微信小程序 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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
js弹出对话框方式小结
Nov 17 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
Vue SSR 即时编译技术的实现
May 06 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 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
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
JavaScript 密码强度判断代码
2009/09/05 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
使用python遍历指定城市的一周气温
2017/03/31 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
详解pandas映射与数据转换
2021/01/22 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
灰雀教学反思
2014/04/28 职场文书
秋季运动会开幕词
2015/01/28 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
Redis基本数据类型Set常用操作命令
2022/06/01 Redis