Tabris.js Widgets: Video
The Video widget plays a video from a URL. This URL can point to an external resource or a file bundled with your app.
1 2 3 4 5 |
const video = new Video({ left: 0, top: 0, right: 0, bottom: '#button 16', url: 'http://peach.themazzone.com/durian/movies/sintel-1280-stereo.mp4', controlsVisible: false }); |
The Video can be initialized with a non-empty string. That will cause it to start loading straight away. Alternatively, we can initialize the widget with an empty string, and only set the video.url
property when we want the Video to start loading, so we can lazy load the resource or set a dynamic URL.
The state of the Video can be tracked through a readonly state
property. Through video.state
we know whether the video within the widget is loading (open
), ready to play (ready
), unloaded (empty
), or paused, playing or finished. See the full list of possible states here.
Once the video is loaded we can control it through the pause
, play
, and seek
methods. The play
method takes an optional parameter of type number that allows us to set the playback speed. If this parameter is not set the Video defaults to 1, the normal playback speed. If the value is unsupported, it is avoided, and the playback speed defaults to 1. seek
takes a required number that represents the time index of the Video as a parameter.
The onStateChanged
event fires whenever the state property changes. Thus we can add a listener to the event and perform some action based on the current state. The Video’s current state is available through the event object’s value property. There is also a timeStamp
property available.
In the following code, we display pause
or play
controls depending on whether the Video’s state is play
or pause
.
1 2 3 4 |
const video = new Video({ url: 'http://peach.themazzone.com/durian/movies/sintel-1280-stereo.mp4', }).onStateChanged(event => button.text = event.value !== 'pause' ? '❚❚' : '▶') .appendTo(contentView); |
Other change events fire when various Video widget properties are changed by the user or in the code. For example, the onSpeedChanged
property fires whenever the Video playback speed changes. For the full list of change events see the documentation.
In the example, we have created our own playback controls using methods and change events. The controlsVisible
property is set to false. However, we could also have enabled the native Video playback controls by setting controlsVisible
to true. That gives us functionality ‘out of the box’. The native UI varies from platform to platform.
You can run an example of the Video widget in the Tabris playground here.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!