微信小程序播放视频
<view class="section tc">
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" enable-danmu danmu-btn controls></video>
<view class="btn-area">
<input bindblur="bindInputBlur"/>
<button bindtap="bindSendDanmu">发送弹幕</button>
</view>
</view>
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')
console.log(wx.createVideoContext('myVideo'))
},
inputValue: '',
bindInputBlur: function (e) {
this.inputValue = e.detail.value
},
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
})
}
})
微信小程序播放视频的更多相关文章
- 微信小程序播放视频发送弹幕效果
首先.先来看一下效果图 然后.再看一下官方文档API对video的说明 相关属性解析: danmu-list:弹幕列表 enable-danmu:是否显示弹幕 danmu-btn:弹幕按钮 contr ...
- 腾讯技术分享:微信小程序音视频与WebRTC互通的技术思路和实践
1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...
- 腾讯技术分享:微信小程序音视频技术背后的故事
1.引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...
- 微信小程序存放视频文件到阿里云用到算法js脚本文件
peterhuang007/weixinFileToaliyun: 微信小程序存放视频文件到阿里云用到算法js脚本文件 https://github.com/peterhuang007/ ...
- 微信小程序中视频的显示与隐藏
在微信小程序中实现视频的播放与暂停 需求: 视频列表中只能有一个视频在播放 点击视频实现播放与暂停功能 加载完成显示图片,点击后变为视频播放 从上次播放的位置进行播放 思路: 定义一个标记变量,控制视 ...
- “取件帮”微信小程序宣传视频链接及内容介绍
1.视频链接 视频上传至优酷自频道,地址链接:http://v.youku.com/v_show/id_XMzg2NTM3OTc5Ng==.html?spm=a2hzp.8253869.0.0 2.视 ...
- 微信小程序选择视频,视频上传,视频播放
请查看链接地址看具体详情: 选择视频: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-video.html#wxchoosevideoobje ...
- 微信小程序播放背景音乐
小程序实现和h5一样的音乐图标一直旋转. 一..js中封装旋转动画方法 添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围 ...
- "PSP助手”微信小程序宣传视频链接及内容介绍
此作业的要求参见[https://edu.cnblogs.com/campus/nenu/2019fall/homework/8677] 队名:扛把子组 组长:迟俊文 组员:刘信鹏 韩昊 宋晓丽 梁梦 ...
随机推荐
- RecycleView + SwipeRefreshLayout 实现下拉刷新和底部自动加载
前段时间项目里面使用了RecycleView 但是里面的刷新和加载都是框架里面封装好的,直接使用 这几天比较闲就自己来实现以下. 因为SwipeRefreshLayout是一个下拉刷新控件所有直接和R ...
- java面试之----堆(heap)、栈(stack)和方法区(method)
JAVA的JVM的内存可分为3个区:堆(heap).栈(stack)和方法区(method)也叫静态存储区. 堆区: 1.存储的全部是对象,每个对象都包含一个与之对应的class的信息.(class的 ...
- jquery在IE8上使用find的问题
有一个字符串,其中是一个XML文件的内容,但是使用find方法老是不正确(IE8,其他浏览器如Chrome.Firefox),代码如下: var xml="<ServiceResult ...
- Document flow API in SAP CRM and C4C
Document flow API in CRM 以一个具体的例子来说明.在Appointment的Overview page上能看见一个名叫Reference的区域,这里可以维护一些其他的业务文档的 ...
- oracle数据库中创建表空间和临时表空间,以及用户和密码以及设置密码永不过期
首先进入oracle用户,命令是: su - oracle sqlplus /nolog connect system/123456@ora11g 或者 [oracle@localhost ~]$ ...
- Windos下Android(ADT Bundle)配置NDK的两种方法------ADT、Cygwin、NDK配置汇总(转)
转自:http://blog.csdn.net/yanzi1225627/article/details/16897877 Android开发环境由windows下ADT Bundle搭建,且按前文h ...
- js面向对象 继承
1.类的声明 2.生成实例 3.如何实现继承 4.继承的几种方式 1.类的声明有哪些方式 <script type="text/javascript"> //类的声明 ...
- CentOS6.6上进程挂起的诡异问题和处理
由于新的服务器不再支持CentOS5.4系统了,我们在新装机器上安装CentOS6.6.随着CentOS6.6机器的增多,我们逐渐注意到一个诡异问题:运行在这些机器上的某些进程,容易莫名其妙地挂起(举 ...
- Android学习笔记_50_(转 四种加载方式详解(standard singleTop singleTask singleInstance)
Android之四种加载方式 (http://marshal.easymorse.com/archives/2950 图片) 在多Activity开发中,有可能是自己应用之间的Activity跳转,或 ...
- Android学习笔记_36_ListView数据异步加载与AsyncTask
一.界面布局文件: 1.加入sdcard写入和网络权限: <!-- 访问internet权限 --> <uses-permission android:name="andr ...