小程序开发之组件video（视频）

video

视频。该组件是原生组件，使用时请注意相关限制。
小程序开发之组件video（视频）

默认宽度300px、高度225px，可通过wxss设置宽高。

例如：
效果展示

代码
index.wxml

<!-- 
  src   要播放视频的资源地址，支持云文件ID
  initial-time  指定视频初始播放位置
  duration   指定视频时长 
  controls:true   是否显示默认播放控件（播放/暂停按钮、播放进度、时间）   
  danmu-list  Array弹幕列表   
  danmu-btn:false   是否显示弹幕按钮，只在初始化时有效，不能动态变更  
  enable-danmu:false  是否展示弹幕，只在初始化时有效，不能动态变更  
  autoplay:false  是否自动播放  
  loop:false  是否循环播放
  muted:false   是否静音播放
  page-gesture:false  在非全屏模式下，是否开启亮度与音量调节手势
  direction  设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）
  show-progress:true  若不设置，宽度大于240时才会显示
  show-fullscreen-btn:true  是否显示全屏按钮 
  show-play-btn:true  是否显示视频底部控制栏的播放按钮 
  show-center-play-btn 是否显示视频中间的播放按钮 
  enable-progress-gesture:true  是否开启控制进度的手势
  objectFit  当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖  
  poster  视频封面的图片网络资源地址或云文件ID（2.2.3起支持）如果 controls 属性值为 false 则设置 poster 无效   
  bindplay  当开始/继续播放时触发play事件   
  bindpause 当暂停播放时触发 pause 事件   
  bindended   当播放到末尾时触发 ended 事件  
  bindtimeupdate  播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次   
  bindfullscreenchange  视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal 
  bindwaiting  视频出现缓冲时触发
  binderror   视频播放出错时触发
  bindprogress  加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比   
 -->
<view class='videoView'>
  <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
    binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu="{{true}}" danmu-btn="{{true}}" loop="{{true}}" controls="{{true}}"></video>
</view>

<view class='controlView'>
<view class="control_title">请输入弹幕内容：</view>
 <input bindblur="bindInputBlur" type="text" placeholder="在此处输入弹幕内容" />
  <button bindtap="bindSendDanmu" class="button" type="primary" formType="submit">发送弹幕</button>
  <button bindtap="bindPlay" class="button" type="primary">播放</button>
  <button bindtap="bindPause" class="button" type="primary">暂停</button>
</view>

index.wxss

.videoView{
  display: flex;
  justify-content: center;
}
.control_title{
  margin-left: 25rpx;
}
input{
  width: 100%;
  height: 80rpx;
  padding-left: 30rpx;
  background-color: lightgrey
}
.button{
  margin: 20rpx;
}

index.js

function getRandomColor () {
  const 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({
  data: {
    inputValue: '',
    danmuList:
      [{
        text: '第 1s 出现的弹幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 3s 出现的弹幕',
        color: '#ff00ff',
        time: 3
      }]
  },
  //创建video
  onReady: function (res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  //input监听
  bindInputBlur: function (e) {
    this.inputValue = e.detail.value
  },
  //发送弹幕
  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  },
  //播放
  bindPlay: function() {
    this.videoContext.play()
  },
  //暂停
  bindPause: function() {
    this.videoContext.pause()
  },
  //视频播放出错时触发
  videoErrorCallback: function(e) {
    console.log('视频错误信息:',e.detail.errMsg)
  }
})