微信小程序——video视频播放

1、功能介绍

可以实现视频的播放暂停，发送弹幕，获取视频所处位置等。

2、video组件

1、用处

video组件常用于视频的播放，默认宽度为300px，高度为225px。

2、属性 

 

 

 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

发送弹幕获取视频

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        })      }    })  }

         

来源地址：https://blog.csdn.net/xybhua/article/details/128913011