微信小程序 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中URL编码函数代码
Jan 11 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
vue在图片上传的时候压缩图片
Nov 18 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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
PHP实现活动人选抽奖功能
2017/04/19 PHP
php通过各种函数判断0和空
2020/07/04 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
python中随机函数random用法实例
2015/04/30 Python
python简单的函数定义和用法实例
2015/05/07 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
公务员的自我鉴定
2013/10/26 职场文书
环保宣传标语
2014/06/12 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
建议书格式
2015/02/04 职场文书
MySQL插入数据与查询数据
2022/03/25 MySQL
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL