Videoplayer"

From Documentation
 
(6 intermediate revisions by the same user not shown)
Line 30: Line 30:
 
</source>
 
</source>
  
= Properties =
+
= turnOffLight =
== turnOffLight ==
 
 
The videoplayer component provides theater mode, If turnOffLight="true", the whole page will cover by translucent black except <videoplayer>.
 
The videoplayer component provides theater mode, If turnOffLight="true", the whole page will cover by translucent black except <videoplayer>.
  
Line 39: Line 38:
 
</source>
 
</source>
  
== currentTime ==
+
= currentTime =
The videoplayer provieds currentTime property to decide which part of video to play, value is seconds.
+
The videoplayer provieds <tt>setCurrentTime(double)</tt> to decide which part of video to play, the value is seconds.
  
 
<source lang="xml" >
 
<source lang="xml" >
Line 46: Line 45:
 
</source>
 
</source>
  
== paused ==
+
= paused =
When user invoke <tt>play,pause or stop</tt> method, the paused property will change accordingly, so user can access the status of videoplayer by invoking <tt>isPaused()</tt>.
+
The videoplayer provieds <tt>setPaused(boolean)</tt> to play or pause the video.
  
User can also set paused to true or false, paused="false" is same as invoking <tt>play()</tt>, paused="true" is same as invoking <tt>pause()</tt>
+
paused="false" is same as invoking <tt>play()</tt>, paused="true" is same as invoking <tt>pause()</tt>.
  
 
<source lang="xml" >
 
<source lang="xml" >
Line 55: Line 54:
 
</source>
 
</source>
  
== volume ==
+
= volume =
 +
The videoplayer component provides <tt>setVolume(double)</tt> to change the volume, the valid value is between 0.0 to 1.0.
  
 
<source lang="xml" >
 
<source lang="xml" >
 
  <videoplayer src="zk.mp4" volume="0.5" />
 
  <videoplayer src="zk.mp4" volume="0.5" />
 +
</source>
 +
 +
= muted =
 +
The videoplayer component provides <tt>setMuted(boolean)</tt> to mute the video.
 +
 +
<source lang="xml" >
 +
<videoplayer src="zk.mp4" muted="true" />
 
</source>
 
</source>
  

Latest revision as of 09:10, 16 April 2018

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

Player-Sample.png

 <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()" />

turnOffLight

The videoplayer component provides theater mode, If turnOffLight="true", the whole page will cover by translucent black except <videoplayer>.

Player-turnOffLight.png

 <videoplayer src="zk.mp4" turnOffLight="true" />

currentTime

The videoplayer provieds setCurrentTime(double) to decide which part of video to play, the value is seconds.

 <videoplayer src="zk.mp4" currentTime="60" />

paused

The videoplayer provieds setPaused(boolean) to play or pause the video.

paused="false" is same as invoking play(), paused="true" is same as invoking pause().

 <videoplayer src="zk.mp4" paused="true" />

volume

The videoplayer component provides setVolume(double) to change the volume, the valid value is between 0.0 to 1.0.

 <videoplayer src="zk.mp4" volume="0.5" />

muted

The videoplayer component provides setMuted(boolean) to mute the video.

 <videoplayer src="zk.mp4" muted="true" />

Supported Events

Name
Event Type
None None

Supported Children

*NONE

Use Cases

Version Description Example Location