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}