[MGNLDEMO-92] Demo of video component (from dam) Created: 28/Aug/15  Updated: 15/Apr/16  Resolved: 30/Oct/15

Status: Closed
Project: Magnolia Demo Projects
Component/s: None
Affects Version/s: None
Fix Version/s: 0.8

Type: Story Priority: Major
Reporter: Christopher Zimmermann Assignee: Federico Grilli
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 1d 6.25h
Original Estimate: Not Specified

Attachments: PNG File Screen Shot 2015-10-30 at 09.34.26.png     PNG File Screen Shot 2015-10-30 at 09.35.14.png     File grca-over15-432.mp4    
Issue Links:
dependency
depends upon MGNLUI-3625 SwitchableField should only validate ... Closed
is depended upon by MGNLDEMO-100 Responsive columns component Closed
is depended upon by MTE-50 HTML5 video Component Closed
relation
is related to MGNLUI-3624 CustomMultiField components can't dis... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: Travel Demo
Sprint: Basel 16
Story Points: 5

 Description   

HTML5 solution with simple fallback.
HTML5 support is actually really good by now. (http://caniuse.com/#feat=mpeg4)

But lets use a polyfill to support old browsers:
(sources: http://html5please.com, https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills)
Two good candidates:
https://github.com/johndyer/mediaelement (Used in wordpress core.)
http://www.videojs.com/

Ideally video component dialog will show dam chooser filtered to show videos. But this is not a strict requirement.

Context: this component starts in the demo but will eventually be in a separate library of components - either in MTE or another "Extra Components" module.

Usage in Demo:
Add a video element to the company page after the jumbotron, but before the text. (https://demopublic.magnolia-cms.com/about/company.html)
Video of grand canyon is attached.

Video should have caption: "The holiday of a lifetime. Helicopter tour over the Grand Canyon."

Video should have 100% width and undefined height so that it will scale responsively.

Note on rights - video is public domain from the US National Park Service. See: http://www.nps.gov/grca/learn/photosmultimedia/b-roll_hd_index.htm
Note on video preparation: - Quicktime can be used to export trimmed clips. Free "Hand Brake" program for osx can be used to resize and export in different formats.



 Comments   
Comment by Federico Grilli [ 15/Oct/15 ]

The implementation has taken into account also what specified by MTE-50, e.g. ability to scale video and choose between dam asset and embedding. However, it was decided not to include the component in MTE and rather keep in demo for the time being as long as we won't have a more clear understanding of its requirements.
Note: the Implementation is pure HTML5 and doesn't use any plugin to fallback to a flash player. Reason for that is that only IE8 currently doesn't support the html5 video tag and its users quota seems to be negligible http://caniuse.com/#search=video
Known issues (to be filed separately)

  • asset or embed code should be required but aren't as validating the form will check that both are present even though they should be mutually exclusive.
  • help text can't be displayed by the asset component (CustomMultiField)
Comment by Philip Mundt [ 26/Oct/15 ]

During QA it was found that the fallback mechansim for the credits (to those provided on the asset) didn't work.
This was fixed in commit https://git.magnolia-cms.com/projects/MODULES/repos/demo-projects/commits/3cac5aeaa29263ff75fe90133c566f41ffe0c25d

Comment by Christopher Zimmermann [ 28/Oct/15 ]

On iOS (at least version 7) the video tag will not be properly sized as is (it displays much smaller).
The same responsive css should be applied to the video tag.

I suggest using just one set of css regardless of if its an embed or a video tag:
.video-container

And using the responsive css in it.

Comment by Ilgun Ilgun [ 30/Oct/15 ]

During QA i figured out that we should be filling both of the field which does not make any sense.
Embed and source should be filled in order to continue. SS attached.

Comment by Ilgun Ilgun [ 30/Oct/15 ]

Talked with federico, It was an known issue, thus, I am closing the ticket.

Generated at Mon Feb 12 05:16:13 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.