Video
Video
[ ZK EE ] [ since 8.5.2 ]
Employment/Purpose
A video component is used to play the video in the browser. Like audio, you can use the src property to specify an URL of the video resource, or use the setContent method to specify a dynamically generated video. Developers can control the video by play, stop and pause.
Example
<video src="zk.mp4" controls="true" autoplay="true" loop="true" />
Supports HTML5
The video component is based on HTML 5's <video> tag, and supports the following properties: autoplay, controls, loop, muted, preload, poster and crossorigin.
Multiple Sources
Most browsers do not support all the video formats, so we can specify multiple source files in different formats for different browsers. If the first format is not supported by the browser, it will fallback to the 2nd format. For example:
<video src="zk.mp4, zk.webm, zk.ogg" />
enableFullScreen
For security reason, fullScreen API can only be initiated by an user gesture, therefore the video component only provides a client-side method enableFullScreen() for enabling the full screen mode.
<video id="player" src="zk.mp4" />
<button xmlns:w="client" w:onClick="zk.$('$player').enableFullScreen()" />
dimBackground
The video component provides theater mode, If dimBackground="true", the whole page will be covered by translucent black except the Video.
When theater mode is enabled, user can click anywhere on the page except the Video to disable theater mode.
<video src="zk.mp4" dimBackground="true" />
playbackRate
The video provides setPlaybackRate(double) to decide the video play speed, the valid value is between 0.5 to 4.0.
Default: 1.0
<video src="zk.mp4" playbackRate="0.5" />
currentTime
The video provides setCurrentTime(double) to decide which part of video to play, the value is seconds.
<video src="zk.mp4" currentTime="60" />
playing
The video provides setPlaying(boolean) to play or pause the video.
playing="true" is same as invoking play(), playing="false" is same as invoking pause().
<video src="zk.mp4" playing="false" />
volume
The video component provides setVolume(double) to change the volume, the valid value is between 0.0 to 1.0.
Default: 1.0
<video src="zk.mp4" volume="0.5" />
muted
The video component provides setMuted(boolean) to mute the video.
Default: false
<video src="zk.mp4" muted="true" />
StateChangeEvent
When calling play(), stop() or pause(), will trigger StateChangeEvent, you can check current state by calling event.getState(), Video has three states, you can access them by using Video.PLAY, Video.STOP and Video.PAUSE.
For example:
If you want to do something after start playing video, you can write codes as shown below (MVVM style).
<video onStateChange="@command('stateChange', event=event)" />
@Command
public void stateChange(@BindingParam("event") StateChangeEvent event) {
if (event.getState() == Video.PLAY) {
// do something...
}
}
Supported Events
Event: StateChangeEvent
Notifies when invoking play(), stop() or pause(). |
- Inherited Supported Events: XulElement
Supported Children
*NONE