微信小程序 vidao实现视频播放和弹幕的功能


Posted in Javascript onNovember 02, 2016

 微信小程序 vidao视频播放及弹幕的功能的实现。

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);
  }
})

效果

 微信小程序 vidao实现视频播放和弹幕的功能

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript实现动态侧边栏代码
Feb 19 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
js实现简单商品筛选功能
Feb 02 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 Javascript
bootstrap基础知识学习笔记
Nov 02 #Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 #Javascript
Bootstrap table的使用方法
Nov 02 #Javascript
AngularJS指令用法详解
Nov 02 #Javascript
AngularJS表单和输入验证实例
Nov 02 #Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 #Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 #Javascript
You might like
php session处理的定制
2009/03/16 PHP
深入分析php之面向对象
2013/05/15 PHP
php构造函数与析构函数
2016/04/23 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
深入理解JavaScript中的对象
2015/06/04 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
python异步任务队列示例
2014/04/01 Python
Python学习笔记(二)基础语法
2014/06/06 Python
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Python程序运行原理图文解析
2018/02/10 Python
对python中的argv和argc使用详解
2018/12/15 Python
python 常见的排序算法实现汇总
2020/08/21 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
物流专业求职计划书
2014/01/10 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
MySQL 字符集 character
2022/05/04 MySQL