video

Child Components
Attributes
Events
Methods
Example

The <video> component provides a video player.

Child Components

Not supported.

Attributes

Name	Type	Default Value	Mandatory	Description
src	string	-	No	Path of the video to play.
muted	boolean	false	No	Whether the video is muted.
autoplay	boolean	false	No	Whether the video is automatically played.
controls	boolean	true	No	Whether to display the video playback control bar. The value false means not to display the control bar, and true means that the display of the control bar is controlled by the system. The default value is true.

Events

Name	Parameter	Description
start	-	Triggered when video playback starts.
pause	-	Triggered when video playback is paused.
finish	-	Triggered when video playback is finished.
error	-	Triggered when video playback fails.
seeking	{ currenttime: value(s) }	Time reported when the seek bar is being manipulated, in seconds.
seeked	{ currenttime: value(s) }	Time reported when the seek operation completes, in seconds.
timeupdate	{ currenttime: value(s) }	Current video playback time (in seconds) reported when the playback progress changes. This time is reported every 250 ms.

Methods

Name	Parameter	Description
start	-	Starts video playback.
pause	-	Pauses video playback.
setCurrentTime	{ currenttime: value(s) }	Sets the seek position of the video.

Example

<!-- xxx.hml -->
<div>
  <video id='videoId' src='/common/mydream.mp4' muted='false' autoplay='false' controls="true" onstart='startCallback' onpause='pauseCallback' onfinish='finishCallback' onerror='errorCallback' onseeking='seekingCallback' onseeked='seekedCallback' ontimeupdate='timeupdateCallback' onclick="change_start_pause"></video>
</div>

/* xxx.js */ 
export default {
  data: {
    event:'',
    seekingtime:'',
    timeupdatetime:'',
    seekedtime:'',
    isStart: true,
  },
  startCallback:function(){this.event = 'Video playback starts.';},
  pauseCallback:function(){this.event = 'Video playback is paused.';},
  finishCallback:function(){this.event = 'Video playback is finished.';},
  errorCallback:function(){this.event = 'Video playback fails.';},
  seekingCallback:function(e){ this.seekingtime = e.currenttime; },
  timeupdateCallback:function(e){ this.timeupdatetime = e.currenttime;},
  change_start_pause: function() {
    if(this.isStart) {
      this.$element('videoId').pause();
      this.isStart = false;
    } else {
      this.$element('videoId').start();
      this.isStart = true; 
    }
  }
}