vjs-video
An angular.js directive for video.js
With 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.
Dependencies
- video.js >= 4.x
- angular.js >= 1.3
Installation
Bower Install
The recomended method for installing vjs-video
is via bower however it also is available in npm.
Next include angular
, video.js
, the 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.
Basic usage
The 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
Responsive Container
The 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-container
aspect ratio values are passed through tovideo.js
.
The following example wraps a video.js instance within a responsive container with a ratio of 4:3.
Directive Attributes
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.
vjs-setup
You can use vjs-setup
instead of the data-setup
attribute 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-setup
attribute:
HTML
JavaScript
vjs-media
The vjs-media
option expects a reference to an object that contains a sources
, tracks
, and/or 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-video
.
HTML
JavaScript
vjs-ratio
The 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 16:9
.
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 vjsVideoReady
event.