微信小程序开发—(十六)video视频播放

一.知识点

1.video

video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和height。

2.wx.createVideoContext(videoId)：创建并返回 video 上下文 videoContext 对象

videoContext：videoContext 通过 videoId 跟一个 video 组件绑定，通过它可以操作一个 video 组件。

二.操作

1.视频播放：发送弹幕

wxml

<view class="section">
  <video id="myVideo" src="{{src}}" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
  <view class="btn-area">
  	<button type="primary" bindtap="videoPlay">播放</button>
	<button type="primary" bindtap="videoPause">暂停</button>
    <input bindblur="bindInputBlur" placeholder="请输入弹幕内容"/>
    <button bindtap="bindButtonTap">获取视频</button>
    <button bindtap="bindSendDanmu">发送弹幕</button>
  </view>
</view>

js

var util = require('../../utils/util.js')
function getRandomColor () {//随机获取颜色
  let rgb = []
  for (let i = 0 ; i < 3; ++i){
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}

Page({
  	onReady: function (res) {
    	this.videoContext = wx.createVideoContext('myVideo');//获取上下文
  	},
  	inputValue: '',
    data: {
	src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?
	filekey=30280201010421301f0201690402534804102ca905ce620b1241b72
	6bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c0
	20101042530230204136ffd93020457e3c4ff02024ef202031e8d7f020
	30f42400204045a320a0201000400',
   		danmuList: [
	      {
	        text: '第 1s 出现的弹幕',
	        color: '#ff0000',
	        time: 1
	      },
	      {
	        text: '第 3s 出现的弹幕',
	        color: '#ff00ff',
	        time: 3
	    }]
    },
    //播放
    videoPlay:function(){
    	this.videoContext.play();
    },
    //暂停
    videoPause:function(){
    	this.videoContext.pause();
    },
    //写弹幕
  	bindInputBlur: function(e) {
    	this.inputValue = e.detail.value
  	},//获取视频
  	bindButtonTap: function() {
	    var that = this
	    wx.chooseVideo({
	      	sourceType: ['album', 'camera'],
	      	maxDuration: 60,
	      	camera: ['front','back'],
	      	success: function(res) {
	        	that.setData({
	          		src: res.tempFilePath
	        	})
	      	}
	    })
  	},
  	//发送弹幕
  	bindSendDanmu: function () {
    	this.videoContext.sendDanmu({
      		text: this.inputValue,
      		color: getRandomColor()
    	})
  	}
})

2.监听视频加载错误状态

<!--监听button点击事件-->
<button bindtap="listenerButton">点击显示视频组件</button>

<!--视频组件src资源地址，binderror为监听错误信息-->
<video 
    src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4"
    style="width: 100%; height: 100%"
    hidden="{{hiddenVideo}}"
    binderror="listenerVideo" />

Page({
  data:{
    // text:"这是一个页面"
    hiddenVideo: true
  },
  /**
   * 监听视频加载错误状态
   */
  listenerVideo:function(e) {
      console.log(e.detail.errMsg);
  },
  /**
   * 监听button点击事件
   */
  listenerButton:function() {
      this.setData({
          hiddenVideo: !this.data.hiddenVideo
      })
  }

})