An angular.js directive for video.js
vjs-video you can easily incorporate video into your Angular projects using the roubust HTML video player
video.js. The directive also adds additional features such as data-binded media sources and a responsive video container (for video.js 4.x).
vjs-video works 4.x and 5.x versions of
video.js just in case you're not ready to upgrade.
- video.js >= 4.x
- angular.js >= 1.3
The recomended method for installing
vjs-video is via bower however it also is available in npm.
vjs-video directive and it's corresponding css.
If you are leveraging wiredep in your build workflow, all the required script and stylesheet includes will be injected into your html file.
vjs-video directive is designed to be non-invasive and easy to use. Add the directive to a video tag styled for video.js and that's all that's needed to initialize the
video.js libaray on your video.
Before using the directive, be sure to include it as a dependency within your angular app:
Add the directive to a video tag, using video.js parameters as normal and it will initialize your video tag
vjs-video-container directive implments responsive sizing for your video.js videos. By default it assumes a wide screen 16:9 ratio however any custom ratio can be supplied.
responsive video comes shipped with video.js 5.0 and should be used instead of this directive; however if used with 5.0, the
vjs-video-containeraspect ratio values are passed through to
The following example wraps a video.js instance within a responsive container with a ratio of 4:3.
The vjs-directive supports optional attributes to extend capabilities.
- vjs-setup - an alternative to using data-setup on the video element
- vjs-media - an alternative way of defining for sources and tracks
- vjs-ratio - (only for
vjs-video-container) defines the aspect ratio in the format width:height.
You can use
vjs-setup instead of the
video.js uses if you would prefer to define all of the properties on the scope vs an inline JSON string.
The following example will set the loop option for the
video.js instance using the
vjs-media option expects a reference to an object that contains a
poster element. Whenever the
vjs-media value is changed,
video.js is reinitialized given the new data.
The following example defines a poster image, two sources and one track in a scope variable that is processed by
vjs-ratio only works in conjunction with the
vjs-video-container directive. The value should list width and then height separated by a
(w:h). The value can be the actual width and height or the least common denominator such as
Getting a reference to the videojs instance
There are times will you will want to get access to the video object that
video.js creates. The vjs directive dispatches an event after initialization and can be accessed by listening on the scope for the