Video
since 8.6
Employment/Purpose
A Video component is used to play the video in the browser. Like
audio, you can either use the src property to specify an URL of the
video resource, or use the setContent method to specify a dynamically
generated video. Users 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
tag, and supports the following properties: `src`, `autoplay`,
`controls`, `loop`, `playbackRate`, `dimBackground`, `preload`,
`clipToFit`, `poster`, `playsinline` and `crossorigin`.
## Supported Formats
[mp4, WebM, ogg](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#File_formats)
# autoplay
Just set autoplay to `true` doesn't always work because **autoplay
policy is different among browsers**. Please refer to
[autoplay-policy-changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
and
[auto-play-policy-changes-for-macos](https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/).
# Multiple Sources
Most browsers do not support all the video formats, so you 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:
```xml
since 9.6
Since ZK 9.6.0, a new state - `Video.END` is added. When the video is
played to the end, the StateChangeEvent will be triggered.
# Supported Events
onStateChange
Event:
[org.zkoss.zkmax.zul.event.StateChangeEvent](https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/event/StateChangeEvent.html) Notifies
when invoking play(), stop() or pause().
- Inherited Supported Events: [ XulElement](/zk_component_ref/base_components/xulelement#Supported_Events)
# Supported Children
`* `[`Track`](/zk_component_ref/multimedia_and_miscellaneous/track)
# Version History
| Version | Date | Content |
|---------|----------------|-----------------------------------------------------------------------------------|
| 8.6.0 | May 2018 | [ZK-3845](https://tracker.zkoss.org/browse/ZK-3845): Provide a video component |
| 9.5.0 | September 2020 | [ZK-4649](https://tracker.zkoss.org/browse/ZK-4649): Video supports to add tracks |
