zoukankan      html  css  js  c++  java
  • 微信小程序之----video视频播放

    vidao

    我现在看到的官方文档是不带danmu(弹幕)属性的,之前是有的,不过现在这个属性还可以生效。控制视频的状态可以根据video标签的唯一id得到一个对象实例。video组件并不具备action属性,不能通过action来控制。

    • .wxml
    <view class="section tc">
      <video src="{{src}}"   controls ></video>
      <view class="btn-area">
        <button bindtap="bindButtonTap">获取视频</button>
      </view>
    </view>
    
    <!-- 
      danmu-list:弹幕列表
      enable-danmu:是否显示弹幕
      danmu-btn:弹幕按钮
      controls:是否显示视频控件,并没有什么用
     -->
    <view class="section tc">
      <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 danmu-btn controls></video>
      <view class="btn-area">
        <button bindtap="bindButtonTap">获取视频</button>
        <input bindblur="bindInputBlur"/>
        <button bindtap="bindSendDanmu">发送弹幕</button>
      </view>
    </view>
    
    <!-- 现在的video就下面三个属性 -->
    <video src="" binderror="" hidden></video>
    • .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: '',
        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()
        })
      },
        videoErrorCallback: function(e) {
          console.log('视频错误信息:');
          console.log(e.detail.errMsg);
        }
    })
    • 效果

  • 相关阅读:
    2021年最后的每日一题练习 (持续更新)
    ColorPickUper类算出图片的主要色调
    js控制gif从第一帧开始播放的办法
    ExternalInterface.addCallBack 在TT浏览器 IETester等浏览器上的问题
    js版的矩形式图,算法借鉴datavjs
    Feathers ui给组件加个特定的皮肤
    linux笔记
    ofbiz调试
    ofbiz 笔记
    给gridview动态生成radiobutton添加OnCheckedChanged监听函数
  • 原文地址:https://www.cnblogs.com/liululin/p/6018635.html
Copyright © 2011-2022 走看看