4 Replies Latest reply on Jul 1, 2013 6:02 AM by Asa B

    HTML5 compatible video component

    dfgdgdfgfdgdg Level 1

      Dear All,


      I want to create a component which accepts 3rd party embed code and you tube as well as any other video source. Also, videos uploaded in DAM can be added to the component as a source.


      Can anyone please suggest the best approach to design it so that there are no performance issues as well?


      The output should be HTML5 compatible with flash as fallback.


      Any help would be really appreciated.



        • 1. Re: HTML5 compatible video component
          dfgdgdfgfdgdg Level 1

          Can we reuse video component as the default video component displays the output in html5 form using video tag. So, can we use the existing video component by adding the below modifications:

          1. Create another tab in the component where we can give html source code for youtube and external sources.

          2. Edit fallback.jsp so that it displays flash video incase html5 is not supported.


          Any views/ideas on this would be really appreciated.


          Thanks and Regards,

          • 2. Re: HTML5 compatible video component

            You'll most likley have to build a custom component.

            Try using video.js, mediaelement.js or flowplay.org to provide the clientside player.

            • 3. Re: HTML5 compatible video component
              dfgdgdfgfdgdg Level 1

              Thank you very much for the response.

              I think it is a good suggestion to use video.js as it is simple to implement and provides many features.


              I have googled the details of video.js. Do we need to only include the video.js javascript library and add html5 video tag to the page using a jsp?

              Has anyone used video.js? Any further highlights on how to implement it?


              Many thanks and appreciate your help.



              • 4. Re: HTML5 compatible video component
                Asa B Level 1

                For video playback across devices, you'll just need to make a component which allows several videos to be linked within an HTML5 video tag. One of the tags should be mp4 h.264 as most devices can support that format.  If not natively then using a flash fallback. The client-side component itself is pretty straight forwards.


                Getting your CQ authors a component which smoothly integrates with the DAM or a third party conversion or hosting service is a much taller order.


                Each video should should ideally be converted into several formats

                Ogg, webM, MP4. I'd suggest using a service for transcoding. Also you'll probably also want a service to host the videos.


                Then you've got to deal with transcripts for WCAG 2 and 508. Getting transcripts exposed in the HTML 5 video tag is simple. But most CQ5 authors will want a service to transcribe the video for them.


                Next, CQ5 authors don't want to have to make their own poster frame. So getting a "poster frame" out of the video is problem.


                Wiring up analytics for the user controls is also something most CQ5 authors will want.


                Video playlist require their own component.


                Finally, post roll links or messages will likely be asked for by content authors.


                The component I built for video.js doesn't handle this additional functionality it simply embeds the video(s) on a page. Which is why is not in use.


                I'd highly recommend brightcove, longtail video, or wistia (my favorite).