1、功能介绍
可以实现视频的播放暂停，发送弹幕，获取视频所处位置等。
2、video组件
2.1、用处
video组件常用于视频的播放，默认宽度为300px，高度为225px。
2.2、属性
| 属性 | 说明 |
| src | 视频的资源地址 |
| loop | 是否循环播放，默认false |
| controls | 是否显示默认播放按钮(暂停，播放进度，时间）默认为true |
| danmu-list | 弹幕列表 |
| danmu-btn | 是否显示弹幕按钮，只在初始化有效，不能动态变更，默认为false |
| enable-danmu | 是否展示弹幕，只在初始化有效，不能动态变更，默认false |
| autoplay | 是否自动播放，默认false |
| poster | 视频封面的图片网络资源地址，如果controls属性为false,则设置poster无效 |
| bindplay | 当播放时触发play事件 |
| bindpause | 当暂停播放时触发pause事件 |
3、index.js中的数据部分
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
<video id="myVideo" src='{{src}}' danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
<input bindblur="bindInputBlur"/>
<button bindtap="bindSendDanmu">发送弹幕</button>
<button bindtap="bindButtonTap">获取视频</button>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({
src:res.tempFilePath
})
}
})
}8、运行效果
附：小程序video自定义播放按钮
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.隐藏播放键在开发者工具中无效，要用真机调试才看的出来
总结
到此这篇关于微信小程序之video组件视频播放的文章就介绍到这了,更多相关小程序video视频播放内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
