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

来源：互联网发布：小白网络技术论坛编辑：程序博客网时间：2024/06/05 07:32

一.知识点

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>

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=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',   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      })  }})

阅读全文

0 0