【微信小程序】媒体组件(三)video

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Crab0314/article/details/78216825

最后一个微信小程序的媒体组件吐舌头

1.先看下video的属性,与audio基本类似

属性名类型默认值说明最低版本
srcString 要播放视频的资源地址 
durationNumber 指定视频时长1.1.0
controlsBooleantrue是否显示默认播放控件(播放/暂停按钮、播放进度、时间) 
danmu-listObject Array 弹幕列表 
danmu-btnBooleanfalse是否显示弹幕按钮,只在初始化时有效,不能动态变更 
enable-danmuBooleanfalse是否展示弹幕,只在初始化时有效,不能动态变更 
autoplayBooleanfalse是否自动播放 
loopBooleanfalse是否循环播放1.4.0
mutedBooleanfalse是否静音播放1.4.0
bindplayEventHandle 当开始/继续播放时触发play事件 
bindpauseEventHandle 当暂停播放时触发 pause 事件 
bindendedEventHandle 当播放到末尾时触发 ended 事件 
bindtimeupdateEventHandle 播放进度变化时触发,event.detail = {currentTime: '当前播放时间'} 。触发频率应该在 250ms 一次 
bindfullscreenchangeEventHandle 当视频进入和退出全屏是触发,event.detail = {fullScreen: '当前全屏状态'}1.4.0
objectFitStringcontain当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充,cover:覆盖 
posterString 默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效
2.看下效果图↓


①上面的视频区域,显示用户自己录制的视频。(模拟器暂时无法演示)

②下面的视频区域,显示指定src的视频。

1°controls为true,用户可以操作视频。

2°input框内可以输入文本,点击按钮进行弹幕的发送。


3.附上wxml的代码↓

<view >
  <video src="{{src}}" controls></video>
  <view class="btn-area">
    <button bindtap="bindButtonTap">获取视频</button>
  </view>
</view>

<view>
  <video id="myVideo" src="{{src}}"
    danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
  <view>
    <input bindblur="bindInputBlur" placeholder='input here' value="{{inputValue}}" auto-focus/>
    <button bindtap="bindSendDanmu">发送弹幕</button>
  </view>
</view>
(1)src为视频资源地址,enable-danmu/danmu-btn/controls在属性表中均有定义;

(2)danmuList为弹幕list,在js中进行定义

danmuList: [
      {
        text: '第 1s 出现的弹幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 3s 出现的弹幕',
        color: '#ff00ff',
        time: 3
      }]

danmuList中text为弹幕中文字,color为弹幕的字体颜色,time为弹幕出现的时间(s)
(3)input组件中的bindblur,输入框失去焦点时触发,event.detail = {value: value},获取用户输入的弹幕内容。

bindInputBlur: function (e) {
    this.inputValue = e.detail.value
  },
(4)button发送弹幕,随机获取弹幕颜色

bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
    this.setData({
      inputValue:""
    })
  }
(5)button获取视频

bindButtonTap: function () {
    var that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: ['front', 'back'],
      success: function (res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  },

1°sourceType为从相册中选择,和录制

2°最大视频时长 60s

3°camera可选择前置镜头、后置镜头

4°success录制完成时,将视频的src置为视频的临时文件路径

手机截屏如下↓


4.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: 'first',
  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
      }]
  },
  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()
    })
    this.setData({
      inputValue:""
    })
  }
})

先记录到这里,欢迎同学们交流。吐舌头

阅读更多
换一批

没有更多推荐了,返回首页