ivy-videojs
Simple Ember integration for the video.js HTML5 video player.
NOTE: Currently only the HTML5 video tech is supported. The Flash player is broken due to the fact that video.js removes the (Ember-managed) <video>
element from the DOM when using anything other than the native HTML5 video tech.
Installation
From the root of your ember-cli application:
ember install ivy-videojs
Usage
Use the ivy-videojs
component as you would a video
tag, either by passing in the src as a string:
{{ivy-videojs src="/path/to/video.mp4"}}
or binding the src to an object:
{{ivy-videojs src=src}}
; Controller;
or even to an array:
; Controller;
The src can be anything supported by video.js. See the Player API docs for examples.
Responsive Videos
As of video.js 5.0, there is now native support for responsive videos. To use this, set the fluid
property to true:
{{ivy-videojs fluid=true src="/path/to/video.mp4"}}
See the Player API docs for more details.
Advanced Usage
If you need more control over the video player, there's also an ivy-videojs-player
component that exposes a lower-level interface to the video.js player. This can be useful if, for instance, you're using video.js plugins and need to change the way your application interacts with the video.js player. In fact, the ivy-videojs
component is actually just a thin wrapper around the ivy-videojs-player
component.
The ivy-videojs-player
does not bind any properties, but it does set up event handlers for the following:
abort
canplay
canplaythrough
durationchange
emptied
ended
error
loadeddata
loadedmetadata
loadstart
pause
play
playing
progress
ratechange
resize
seeked
seeking
stalled
suspend
timeupdate
useractive
userinactive
volumechange
waiting
Generally if you're using ivy-videojs-player
, you'll set up a handler for the "ready" action, and then use that time to configure the player and set up any custom events or property bindings.
setup
Property
The If, for some reason, you need to pass in arguments to the initial videojs
initialization call, you can do so through a setup
property. For instance, if you wanted to enable the playback rate menu, you could pass in setup
in your template:
{{ivy-videojs setup=setup}}
And then in your controller, define setup like so:
; Controller;
This is exactly what the demo app does.
Binding Properties
Here's a basic example that binds the "src" attribute:
{{ivy-videojs-player ready="ready" src=src}}
; Controller;
The above just tells ivy-videojs-player
that its "src" property should be bound to the player's "src" property. This is fine if the component property and the player property have the same name, but what if they're different? Not to worry, that's what the optional third argument is for:
{{ivy-videojs-player ready="ready" sources=sources}}
; Controller;
So in the above example, the "sources" property of the component is bound to the "src" property of the player. You can think of this as essentially calling the following whenever the component's "sources" property changes:
player;
Handling Events
Much like properties, you can also handle custom player events. To do this, call the component's sendActionOnPlayerEvent
method inside your "ready" action handler:
{{ivy-videojs-player ready="ready" tada="tada"}}
; Controller;
As above, if the action name differs from the name of the player event, you can pass a third argument to indicate what the event name is:
; Controller
Upgrading
See UPGRADING.md
Development
Installation
git clone
this repositoryyarn
yarn run bower install
Running
ember server
- Visit your app at http://localhost:4200.
Running Tests
ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.