video

视频。

效果展示

示例代码

WXML

<view class="page">
    <view class="page__hd">
        <text class="page__title">video</text>
        <text class="page__desc">视频</text>
    </view>
    <view class="page__bd">
     <view class="section tc">
          <video src="http://flv.bn.netease.com/videolib3/1605/22/auDfZ8781/HD/auDfZ8781-mobile.mp4"></video>
      </view>
    </view>

    <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
        bindplay="bindplay"  bindpause="bindpause"  bindended="bindended" bindtimeupdate="bindtimeupdate" danmu-btn controls="{{true}}">
    </video>

JS

Page({
  data:{
    src:""
  },
  bindplay: function (e) {
    console.log("播放了");
    this.setData({
      play: true
    })
  },
  bindpause: function (e) {
    console.log("暂停了");
    this.setData({
      pause: true
    })
  },
  bindended: function (e) {
    console.log("放完了");
    this.setData({
      ended: true
    })
  },
  bindtimeupdate: function (e) {
    console.log("拖动了");
    this.setData({
      timeupdate: JSON.stringify(e.detail) 
    })
  }
})

API

属性	类型	默认值	必填	说明
src	string		是	要播放视频的资源地址
bindplay	eventhandle		否	当开始/继续播放时触发play事件
bindpause	eventhandle		否	当暂停播放时触发 pause 事件
bindended	eventhandle		否	当播放到末尾时触发 ended 事件
bindtimeupdate	eventhandle		否	播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次

多平台支持

属性	平台支持
src	支付宝
bindplay	支付宝
bindpause	支付宝
bindended	支付宝
bindtimeupdate	支付宝

注释：

支付宝在暂停时拖动进度条，bindtimeupdate在ios不会触发；其event.detail = {userPlayDuration, videoDuration}