Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Integrate Videojs into AEM

Avatar

Level 3

Can any one guide me on how to integrate Videojs into AEM. In my project we need to have a video component but the default HTML 5 video tag doesn't run on IE 9 for .ogg videos. That's why need to have videojs integrated. 

1 Accepted Solution

Avatar

Correct answer by
Level 10

Justin's answer on that other thread is exactly what you need to do:

It looks like there are two parts of this:

1) Including the VideoJS JS and CSS in your page

2) Adding additional VideoJS-specific data attributes to the video element.

#1 should be done with a client library

#2 should be done by creating a custom component which extends the foundation video component. The foundation video component produces an HTML <video> tag, just not with the VideoJS-specific attributes.

Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video.. Make sure that you place these JS and CSS files into a client lib. If you do not know how to do that - see these JQuery/Angular/AEM articles:

http://helpx.adobe.com/experience-manager/using/integrating-jquery-framework-cq.html

http://helpx.adobe.com/experience-manager/using/AngularJS.html

View solution in original post

3 Replies

Avatar

Level 10

Hi There,

Thanks for reaching out. 

Please go through the below mentioned forum thread and see if that helps:

How to integrate HTML5 player (videojs) into adobe CQ5

Thanks!

Avatar

Level 3

This link doesn't have anything useful as it doesn't mention anything specific. Could you please let me know if anything else is there

Avatar

Correct answer by
Level 10

Justin's answer on that other thread is exactly what you need to do:

It looks like there are two parts of this:

1) Including the VideoJS JS and CSS in your page

2) Adding additional VideoJS-specific data attributes to the video element.

#1 should be done with a client library

#2 should be done by creating a custom component which extends the foundation video component. The foundation video component produces an HTML <video> tag, just not with the VideoJS-specific attributes.

Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video.. Make sure that you place these JS and CSS files into a client lib. If you do not know how to do that - see these JQuery/Angular/AEM articles:

http://helpx.adobe.com/experience-manager/using/integrating-jquery-framework-cq.html

http://helpx.adobe.com/experience-manager/using/AngularJS.html