微信小程序之视频播放

一、video属性介绍

先看下video的属性，与audio基本类似

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

二、要实现的效果

先看看功能

1、发送弹幕

在输入框中输入弹幕内容，点击“发送弹幕”，屏幕上就会出现你输入的弹幕内容。

2、获取视频

点击获取视频按钮，弹框选择视频，

3、播放与暂停

点击播放就会开始播放，点击暂停就会暂停。

三、代码

启动nginx来访问本地视频，比如我们在D:\upload文件夹下面放1.mp4视频，nginx启动后，浏览器访问http://localhost:8888/1.mp4，效果如下：

工具类util.js

const 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('')
}

module.exports = {
   getRandomColor
}

wxml文件

<!--controls:是否显示默认播放控件（播放/暂停按钮、播放进度、时间）-->
    <video id="myVideo" 
        src='{{src}}' 
        danmu-list="{{danmuList}}" 
        enable-danmu  
        danmu-btn 
        controls >
        </video>
    
<input bindblur="bindInputBlur" value="{{inputValue}}"  placeholder='请输入弹幕内容'/>
<button bindtap="bindSendDanmu">发送弹幕</button>
<button bindtap="bindButtonTap">获取视频</button>
<button bindtap="bindVideoPlay">播放</button>
<button bindtap="videoPause">暂停</button>

js文件

const util = require('../../utils/util.js');
Page({

    /**
     * 页面的初始数据
     */
    data: {
        src:"http://localhost:8888/1.mp4",
        // danmuList中text为弹幕中文字，color为弹幕的字体颜色，time为弹幕出现的时间（s）
        danmuList:[
          {text:'first',color:'#ff0000',time:1},
          {text:'second',color:'#008080',time:2},
          {text:'three',color:'#ff00ff',time:3}
        ],
        
    },
    videoContext:null,
    inputValue:'',
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    
    onReady: function () {
        this.videoContext=wx.createVideoContext('myVideo')
    },
    bindInputBlur:function(e){
        console.log(e)
      this.inputValue=e.detail.value
    },
    bindSendDanmu: function () {
        console.log("1")
        this.videoContext.sendDanmu({
          text: this.inputValue,
          color: util.getRandomColor()
        })
        // 发送完弹幕就清空输入框
        this.setData({
          inputValue:""
        })
      },
    
    bindButtonTap: function () {
        var that = this
        wx.chooseVideo({
          sourceType: ['album', 'camera'],
          maxDuration: 60,
          camera: ['front', 'back'],
          success: function (res) {
            that.setData({
              src: res.tempFilePath
            })
          }
        })
      },
    //播放
    bindVideoPlay: function () {
        this.videoContext.play();
    },
    //暂停
    videoPause: function(){
        this.videoContext.pause();
    },  
})

wxss文件

video{
    width: 100vw;
  }
  input{
    border: 1rpx  solid #ccc;
    margin: 20rpx;
  }
  button{
    background-color: rgb(76, 250, 114);
  }
  button{
    margin-bottom: 10rpx;
  }

如果报错：Component does not have a method to handle event "tap".

解决办法如下：点击详情，在本地设置中，不勾选将JS编译成ES5