video

NOTE

This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

The <video> component provides a video player.

Child Components

Not supported

Attributes

In addition to the universal attributes, the following attributes are supported.

Name	Type	Default Value	Mandatory	Description
muted	boolean	false	No	Whether the video is muted.
src	string	-	No	Path of the video content to play.
autoplay	boolean	false	No	Whether the video is played automatically after being rendered.
controls	boolean	true	No	Whether the control bar is displayed during video playback. If the value is set to false, the control bar is not displayed. The default value is true, indicating that the platform can either show or hide the control bar.

Styles

In addition to the universal styles, the following styles are supported.

Name	Type	Default Value	Mandatory	Description
object-fit	string	contain	No	Video scale type. If poster has been assigned a value, the setting of this style will affect the scaling type of the video poster. For details, see object-fit enums.

Table 1 object-fit enums

Type	Description
fill	The image is resized to fill the display area, and its aspect ratio is not retained.

Events

In addition to the universal events, the following events are supported.

Name	Parameter	Description
prepared	{ duration: value }⁵⁺	Triggered when the video preparation is complete. The video duration (in seconds) is obtained from duration.
start	-	Triggered when the video is played.
pause	-	Triggered when the video playback is paused.
finish	-	Triggered when the video playback is finished.
error	-	Triggered when the video playback fails.
seeking	{ currenttime: value }	Triggered to report the time (in seconds) when the progress bar is being dragged.
seeked	{ currenttime: value }	Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.
timeupdate	{ currenttime: value }	Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.

Methods

In addition to the universal methods, the following methods are supported.

Name	Parameter	Description
start	-	Starts playing a video.
pause	-	Pauses a video.
setCurrentTime	{ currenttime: value }	Sets the video playback position, in seconds.

NOTE

The methods in the above table can be called after the attached callback is invoked.

Example

<!-- xxx.hml -->
<div class="container">
  <video id='videoId' src='/common/myDeram.mp4' muted='false' autoplay='false'
         controls='true' onprepared='preparedCallback' onstart='startCallback'
         onpause='pauseCallback' onfinish='finishCallback' onerror='errorCallback'
         onseeking='seekingCallback' onseeked='seekedCallback' 
         ontimeupdate='timeupdateCallback'
         style="object-fit:fill; width:80%; height:400px;"
         onclick="change_start_pause">
   </video>
</div>

/* xxx.css */
.container {
  justify-content: center;
  align-items: center;
}

// xxx.js
export default {
  data: {
    event:'',
    seekingtime:'',
    timeupdatetime:'',
    seekedtime:'',
    isStart: true,
    duration: '',
  },
  preparedCallback:function(e){ this.event = 'Video successfully connected'; this.duration = e.duration;},
  startCallback:function(){this.event = 'Playback starts.';},
  pauseCallback:function(){this.event = 'Playback pauses.';},
  finishCallback:function(){this.event = 'Playback ends.';},
  errorCallback:function(){this.event = 'Playback error.';},
  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; 
    }
  },
}