记录微信小程序音频及视频弹幕播放效果。

1.audio

<!-- audio.wxml -->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio> <button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>
// audio.js
Page({
onReady: function (e) {
// 使用 wx.createAudioContext 获取 audio 上下文 context
this.audioCtx = wx.createAudioContext('myAudio')
},
data: {
poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此时此刻',
author: '许巍',
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
},
//播放
audioPlay: function () {
this.audioCtx.play()
},
//暂停
audioPause: function () {
this.audioCtx.pause()
},
//设置当前播放时间在14秒
audio14: function () {
this.audioCtx.seek()
},
//回到开头
audioStart: function () {
this.audioCtx.seek()
}
})

2.video

默认宽度300px、高度225px

<view class="section tc">
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
<view class="btn-area">
<input bindblur="bindInputBlur" placeholder="输入文字"/>
<button bindtap="bindSendDanmu">发送弹幕</button>
</view>
</view>
function getRandomColor () {
let rgb = []
for (let i = ; i < ; ++i){
let color = Math.floor(Math.random() * ).toString()
// 0.0 ~ 1.0 之间的一个伪随机数。Math.random()。floor() 方法执行的是向下取整计算,它返回的是小于或等于函数参数,并且与之最接近的整数。toString() 方法可把一个逻辑值转换为字符串,并返回结果。
color = color.length == ? '' + color : color
rgb.push(color)
}
// join() 方法用于把数组中的所有元素放入一个字符串。
return '#' + rgb.join('')
} Page({
onReady: function (res) {
this.videoContext = wx.createVideoContext('myVideo')
},
inputValue: '',
data: {
src: '',
danmuList: [
{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time:
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time:
}]
},
bindInputBlur: function(e) {
this.inputValue = e.detail.value
},
//发送弹幕文字
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
})
}
})

微信小程序(9)--音频及视频弹幕的更多相关文章

  1. [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext

    引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...

  2. 如何使用微信小程序video组件播放视频

    相信很多人都有在手机上看视频的习惯,比较看视频更真实更形象.那么我们在微信小程序中如何观看视频呢?这就需要video组件的帮忙了.今天我们就给大家演示一下,如何用微信小程序组件video播放视频.我们 ...

  3. 微信小程序自定义音频组件,自定义滚动条,单曲循环,循环播放

    小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...

  4. 微信小程序背景音频播放分享功能

    如果正常背景音频播放的话,只能跳转到自己对应的微信小程序,无法分享朋友圈,我们需要设置分享朋友圈,需要调用一个API 音频背景播放 注意:背景播放在锁屏后播放只支持IOS端,安卓端虽然可以播放,但是锁 ...

  5. 微信小程序------媒体组件(视频,音乐,图片)

    今天主要是简单的讲一下小程序当中的媒体组件,媒体组件包括:视频,音乐,图片等. 先来看看效果图: 1:图片Image <!-- scaleToFill:不保持纵横比缩放图片,使图片的宽高完全拉伸 ...

  6. 微信小程序 背景音频播放遇到的深坑

    1.微信前台(聊天页)暂停后回到小程序,再点击播放,播放信息消失,无法续播 ios可以监听到 (onStop已经停止)事件, 安卓无法监听到,只能监听到普通的暂停事件. 2.

  7. 微信小程序--录制音频,播放音频

    1.在pages创建一个main文件夹2.在main文件夹下创建一个miain.js文件.添加代码: const constant = require('../../utils/constant.js ...

  8. 微信小程序 wxParse插件显示视频

    修改wxParse/html2json.js 文件 ,在 html2json(html, bindName) 方法里 var node = { node: 'element', tag: tag, } ...

  9. 微信小程序的 音频 组件

    audio:音频组件, api 接口为 wx.createInnerAudioContext audio 组件的属性: id:类型 字符串 audio 组件的唯一标识 src:类型 字符串 要播放音频 ...

  10. 微信小程序首支视频广告片发布

    自2017年1月9日上线以来,微信小程序瞬间引爆网络,又迅速归于平静.对这个“无需安装.触手可及.用完即走.无需卸载”的小程序,微信从一开始就对它寄予了无限期望.在公布一系列规则更改后,微信小程序终于 ...

随机推荐

  1. mobiscroll实现二级联动菜单

    mobiscroll是一款非常使用的移动端选择控件,一般用来日期时间的选择的多,其实从官网上可以看到它有很多方面的使用,这里就不一一介绍了,有兴趣可以去官网上查阅一下 https://demo.mob ...

  2. rocketmq启动broker内存占用过大的问题

    解决方法: 修改broker启动脚本runbroker.sh里面的jvm参数 JAVA_OPT="${JAVA_OPT} -server -Xms8g -Xmx8g -Xmn4g" ...

  3. 【leetcode】1072. Flip Columns For Maximum Number of Equal Rows

    题目如下: Given a matrix consisting of 0s and 1s, we may choose any number of columns in the matrix and ...

  4. 英语单词character

    来源——tr帮助说明 TR() User Commands TR() NAME tr - translate or delete characters SYNOPSIS tr [OPTION]... ...

  5. Dubbo学习-7-dubbo配置文件优先级

    Dubbo配置加载流程 根据驱动方式的不同(比如Spring或裸API编程)配置形式上肯定会有所差异,具体参考XML配置.Annotation配置.API配置三篇文档.除了外围驱动方式上的差异,Dub ...

  6. [CSP-S模拟测试]:Tree(贪心)

    题目描述 给定一颗$n$个点的树,树边带权,试求一个排列$P$,使下式的值最大 $$\sum \limits_{i=1}^{n-1}maxflow(P_i,P_{i+1})$$ 其中$maxflow( ...

  7. HDU 5632 Rikka with Array [想法题]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5632 ------------------------------------------------ ...

  8. canvas绘制加载特效

    css样式: body{ text-align: center; } canvas{ background: #ddd; } canvas标签: <canvas id="canvas& ...

  9. 【Unity 系统知识】 Time类

    [转载请注明出处] //表示时间总量Time.time:(只读)表示从程序运行的总时间,会随着游戏的暂停而停止计算.Time.unscaledTime:(只读)不考虑timescale对时间修改的总时 ...

  10. C#调取接口时报错:服务器提交了协议冲突. Section=ResponseStatusLine

    private Dictionary<string, Object> GetLocation(string imei) { #region===代码=== string serviceAd ...