Player"
From Documentation
Charlesqiu (talk | contribs) |
Charlesqiu (talk | contribs) |
||
| Line 1: | Line 1: | ||
| − | = | + | = Videoplayer = |
| − | *Java API: <javadoc>org.zkoss.zkmax.zul. | + | *Java API: <javadoc>org.zkoss.zkmax.zul.Videoplayer</javadoc> |
| − | *JavaScript API: <javadoc directory="jsdoc">zkmax.med. | + | *JavaScript API: <javadoc directory="jsdoc">zkmax.med.Videoplayer</javadoc> |
= Employment/Purpose = | = Employment/Purpose = | ||
| − | An <tt> | + | An <tt>videoplayer</tt> component is used to play the video at the browser. Like <tt>audio</tt>, you could use the <tt>src</tt> property to specify an URL of an video resource, or the <tt>setContent</tt> method to specify a dynamically generated video. Developers might be able to control the play of an video by the <tt>play</tt>, <tt>stop</tt> and <tt>pause</tt> methods. |
= Example = | = Example = | ||
| Line 11: | Line 11: | ||
<source lang="xml" > | <source lang="xml" > | ||
| − | < | + | <videoplayer src="zk.mp4" controls="true" autoplay="true" loop="true" /> |
</source> | </source> | ||
= Supports HTML5 = | = Supports HTML5 = | ||
| − | The | + | The videoplayer component support HTML 5, like <video>, it includes the properties like <tt>autoplay</tt>, <tt>controls</tt>, <tt>loop</tt>, <tt>muted</tt> and <tt>preload</tt>. |
= Multiple Sources = | = 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: | Most browsers do not support all the video formats,so we could specify multiple source files in different formats for different browsers. For examples: | ||
<source lang="xml" > | <source lang="xml" > | ||
| − | < | + | <videoplayer src="zk.mp4, zk.webm, zk.ogg" /> |
</source> | </source> | ||
= enableFullScreen = | = enableFullScreen = | ||
| − | The | + | The videoplayer component provides a client-side method <tt>enableFullScreen()</tt> to use full screen mode. |
<source lang="xml" > | <source lang="xml" > | ||
| − | < | + | <videoplayer id="player" src="zk.mp4" /> |
<button xmlns:w="client" w:onClick="zk.$('$player').enableFullScreen()" /> | <button xmlns:w="client" w:onClick="zk.$('$player').enableFullScreen()" /> | ||
</source> | </source> | ||
| Line 32: | Line 32: | ||
= Properties = | = Properties = | ||
== turnOffLight == | == turnOffLight == | ||
| − | The | + | The videoplayer component provides theater mode, If turnOffLight="true", the whole page will cover by translucent black except <videoplayer>. |
| − | + | ||
| + | [[Image:Player-turnOffLight.png]] | ||
<source lang="xml" > | <source lang="xml" > | ||
| − | < | + | <videoplayer src="zk.mp4" turnOffLight="true" /> |
</source> | </source> | ||
Revision as of 10:35, 13 April 2018
Videoplayer
- Java API: Videoplayer
- JavaScript API: Videoplayer
Employment/Purpose
An videoplayer 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
<videoplayer src="zk.mp4" controls="true" autoplay="true" loop="true" />
Supports HTML5
The videoplayer component support HTML 5, like <video>, it includes the properties like autoplay, controls, loop, muted and preload.
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:
<videoplayer src="zk.mp4, zk.webm, zk.ogg" />
enableFullScreen
The videoplayer component provides a client-side method enableFullScreen() to use full screen mode.
<videoplayer id="player" src="zk.mp4" />
<button xmlns:w="client" w:onClick="zk.$('$player').enableFullScreen()" />
Properties
turnOffLight
The videoplayer component provides theater mode, If turnOffLight="true", the whole page will cover by translucent black except <videoplayer>.
<videoplayer src="zk.mp4" turnOffLight="true" />
currentTime
paused
volume
Supported Events
| None | None |
- Inherited Supported Events: XulElement
Supported Children
*NONE
Use Cases
| Version | Description | Example Location |
|---|---|---|