视频。
效果展示
示例代码
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}