Integrate Videojs into AEM | Community
Skip to main content
Tushar_Kar
Level 2
October 16, 2015
Solved

Integrate Videojs into AEM

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. 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
smacdonald2008
smacdonald2008Accepted solution
Level 10
October 16, 2015

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 reply

3 replies

WhoaShekhar
WhoaShekhar
Level 10
October 16, 2015

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!

Translate
Tushar_KarAuthor
Level 2
October 16, 2015

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

Translate
smacdonald2008
smacdonald2008Accepted solution
Level 10
October 16, 2015

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

Translate
Terms & ConditionsAccessibility statement

Loading footer...