微信小程序|API音频与视频组件的插入使用
欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
1、音频组件控制 首先在微信小程序中插入音频组件需首先引入一个audioContext对象，之后再通过 audioId 跟一个audio组件绑定，通过它可以操作一个audio组件。audio组件引入代码示例如下：
<!-- audio.wxml -->
audio src="{{src}}" id="myAudio" ></audio>
<button type=" primary" bindtap=" audioPlay" >播放</button>
<button type=" primary" bindtap= "audioPause">暂停</ button>
<button type=" primary" bindtap=" audio50">设置当前播放时间为50秒< / button>
<button type=" primary" bindtap=" audioStart">回到开头</ button>其次在js文件中同样需要引入插件，保证音频组件的正常使用。
// audio.js
Page({
onReady: function (e) {
//使用WX. createAudioContext 获取audio 上下文context
this . audioCtx = wx . createAudioContext( ' myAudio' )
this . audioCtx . setSrc( 'http:/ /ws. stream . qqmusic . qq . com/M500001VfvsJ21xFqb . mp3?
guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E38
4E06DCBDC9AB7C49FD7
13D632D313AC4858BACB8DDD29067D3C601481D36E62053BF 8DF
EAF74C0A5CCFADD6471160CAF 3E6A&fromta
g=46 ' )
this. audioCtx. play()
},
data:
{src:
},
audioPlay: function () {
this . audioCtx . play()
},
audioPause: function () {
this . audioCtx . pause( )
},
audio14: function () {
this . audioCtx . seek(14)
},
audioStart: function () {
this . audioCtx . seek(0)
})
2、视频组件控制 在小程序中创建一个videoContext对象，通过 videoId 跟一个 video 组件绑定，通过它可以操作一个 video 组件。
<view class="section tc">
<video id="myVideo" src="http: / /wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?
filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e0020401288254
0400&bizid=1023&hy=SH&fileparam=
302c020101042530230204136ffd93020457e3c4ff02024ef202031e
8d7f02030f42400204045a320a0201000400"
enable-danmu danmu-btn controls></video>
<view class="btn-area">
<input bindblur="bindInputBlur" />
<button bindtap=" bindSendDanmu" >评论区< / button>
</view>
</view>另外，组件的功能设置示例如下：
function getRandomColor () {
let rgb = []
for(leti=0;i<3;++i){
let color = Math. floor(Math. random() * 256) . toString(16)
color=color.length==1?'e
+ color : color
rgb . push(color)
return
+ rgb.join('')
Page({
onReady: function (res) {
this . videoContext = wX. createVideoContext( ' myVideo' )
},
inputValue:
bindInputBlur: function(e) {
this . inputValue = e.detail. value
},
bindSendDanmu: function ( ) {
this . videoContext . sendDanmu({
text: this. inputValue,
color: getRandomColor( )
})
})
3、总结 在视频组件设置中首先需要特别注意的是播放与暂停的专门引入语句<play>与<pause>，其次是人性化设置发送弹幕与播放速度的设置<senddanmu>、<playbackrate>,可以加深用户体验度。
END
主 编 | 王文星
责 编 | 陈宇杰
where2go 团队
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-04-05，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读