video

视频播放组件。

子组件

不支持。

属性

名称

类型

默认值

必填

描述

src

string

-

播放视频内容的路径。

muted

boolean

false

视频是否静音播放。

autoplay

boolean

false

视频是否自动播放。

controls

boolean

true

控制视频播放的控制栏是否显示,如果设置为false,则不显示控制栏。默认为true,由系统决定显示或隐藏控制栏。

事件

名称

参数

描述

start

-

播放时触发该事件。

pause

-

暂停时触发该事件。

finish

-

播放结束时触发该事件。

error

-

播放失败时触发该事件。

seeking

{ currenttime: value(秒) }

操作进度条过程时上报时间信息,单位为s。

seeked

{ currenttime: value(秒) }

操作进度条完成后,上报播放时间信息,单位为s。

timeupdate

{ currenttime: value(秒) }

播放进度变化时触发该事件,单位为s,更新时间间隔为250ms。

方法

名称

参数

描述

start

-

请求播放视频。

pause

-

请求暂停播放视频。

setCurrentTime

{ currenttime: value(秒) }

指定视频播放的进度位置。

示例

<!-- 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 = '视频开始播放'; },
  pauseCallback:function(){ this.event = '视频暂停播放'; },
  finishCallback:function(){ this.event = '视频播放结束'; },
  errorCallback:function(){ this.event = '视频播放错误'; },
  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; 
    }
  }
}