微信小程序 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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
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面向对象编程快速入门
2006/12/14 PHP
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
js切换div css注意的细节
2012/12/10 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
在Python中使用gRPC的方法示例
2018/08/08 Python
详解Python字符串切片
2019/05/20 Python
Python netmiko模块的使用
2020/02/14 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
小区的门卫岗位职责
2014/10/01 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
介绍信怎么写
2015/01/30 职场文书
教师见习总结范文
2015/06/23 职场文书
教师节主题班会方案
2015/08/17 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫
宝塔更新Python及Flask项目的部署
2022/04/11 Python