微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章
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="p 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 团队
微信号：算法与编程之美
长按识别二维码关注我们!
“写留言”发表评论，期待您的参与！
