微信小程序之video组件视频播放，结束，暂停事件

 效果如图：

 

 

属性	说明
src	视频的资源地址
loop	是否循环播放，默认false
controls	是否显示默认播放按钮(暂停，播放进度，时间）默认为true
danmu-list	弹幕列表
danmu-btn	是否显示弹幕按钮，只在初始化有效，不能动态变更，默认为false
enable-danmu	是否展示弹幕，只在初始化有效，不能动态变更，默认false
autoplay	是否自动播放，默认false
poster	视频封面的图片网络资源地址，如果controls属性为false,则设置poster无效
bindplay	当播放时触发play事件
bindpause	当暂停播放时触发pause事件

 

bindplay：当播放时触发

bindpause：当暂停播放时触发，或者播放到结尾时触发

 <video width="420"   bindplay="bindplay_click" bindpause="bindpause_click"
 id="myVideo" autoplay="{{autoplayVideo}}" src="{{item.redirectUrl}}" 
bindended="videoEnd">

data = {
    autoplayVideo: true,
  }

  methods = {
    bindplay_click() {
      console.log('start')
    },
    bindpause_click() {
      console.log('end')
    },
}

延申下：自定义播放和暂停事件 

html:

<video show-center-play-btn="{{false}}"
       controls="{{false}}"
       id="video"
       src='{{article.video}}'></video>
 
<!-- 播放按钮 -->
<view class='video-play'>
    <image  bindtap="videoPlay" class='video-btn' src='/images/icon/class/play.png'/>
    <image  bindtap="videoPause" class='video-btn' src='/images/icon/class/pause.png'/>
</view>

 JS:

// 播放
videoPlay() {
   console.log('开始播放')
    
   var videoplay = wx.createVideoContext('video')
   videoplay.play()
},
     
 // 暂停播放
videoPause(){
   console.log('暂停播放')
    
   var videoplay = wx.createVideoContext('video')
   videoplay.pause()
},

注意：

1. wx.createVideoContext(‘video’), 这里的’video’是对应的<video id="video">

2. show-center-play-btn 和 controls 设置值的时候，要写成="{{false}}"才会生效

3.隐藏播放键在开发者工具中无效，要用真机调试才看的出来