ZK Component Reference/Multimedia and Miscellaneous/Video

Video

• Java API: Video
• JavaScript API: Video

[ ZK EE ]
[ since 8.5.2 ]

Employment/Purpose

An video component is used to play the video at the browser. Like audio, you could use the src property to specify an URL of an video resource, or the setContent method to specify a dynamically generated video. Developers might be able to control the play of an video by the play, stop and pause methods.

Example

 <video src="zk.mp4" controls="true" autoplay="true" loop="true" />

Supports HTML5

The video component support HTML 5, like <video>, it includes the properties like autoplay, controls, loop, muted,preload, poster and crossorigin.

Multiple Sources

Most browsers do not support all the video formats, so we could specify multiple source files in different formats for different browsers. For examples:

 <video src="zk.mp4, zk.webm, zk.ogg" />

enableFullScreen

Because security issue, fullScreen API can only be initiated by a user gesture, so the video component only can provide a client-side method enableFullScreen() to use 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

Name	Event Type
onStateChange	Event: StateChangeEvent Notifies when invoking play(), stop() or pause().

• Inherited Supported Events: XulElement

Supported Children

*NONE