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!
