微信小程序——video视频播放
短信预约 -IT技能 免费直播动态提醒
1、功能介绍
可以实现视频的播放暂停,发送弹幕,获取视频所处位置等。
2、video组件
1、用处
video组件常用于视频的播放,默认宽度为300px,高度为225px。
2、属性
3、index.js中的数据部分
data: { class="lazy" data-src:"http://localhost:3000/1.mp4", danmuList:[ {text:'first',color:'#ff0000',time:1}, {text:'second',color:'#008080',time:2}, {text:'three',color:'#ff00ff',time:3} ] },
4、结构布局index.wxml
5、样式部分index.wxss
video{ width: 100vw;}input{ border: 1rpx solid #ccc; margin: 20rpx;}button{ background-color: rgb(76, 250, 114);}button{ margin-bottom: 10rpx;}
6、弹幕实现功能
videoContext:null, inputValue:'', onReady:function(){ this.videoContext=wx.createAudioContext('myVideo') }, bindInputBlur:function(e){ this.inputValue=e.detail.value }, bindSendDanmu: function () { this.videoContext.sendDanmu({ text: this.inputValue, color: "#f90" }) },
创建的videoContent对象,用于对video组件进行控制
7、获取视频功能
bindButtonTap:function(){ wx.chooseVideo({ sourceType:['album','camera'], maxDuration:60, camera: 'back', success:res=>{ this.setData({ class="lazy" data-src:res.tempFilePath }) } }) }
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341