专栏首页算法与编程之美微信小程序|API音频与视频组件的插入使用

微信小程序|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 团队

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:陈宇杰

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端|利用模态框(Modal)实现弹窗效果

    弹窗效果在网页和app中的运用还是比较常见的。每当在手机里下载一个app时,请求获取存储空间和地理位置时,绝大部分都是使用的弹窗。它不仅提醒作用强、节约页面空间...

    算法与编程之美
  • Python|GUI编程的基础讲解

    学python的各位可能对于python只能在终端里输入输出感觉有些无聊吧!其实在python GUI编程(图形用户界面编程)里可以实现将程序窗口化,可以引入t...

    算法与编程之美
  • 微信小程序|图片轮播

    Swiper滑块视图容器用来在指定区域内切换内容的显示,可以用于制作图片轮播效果。

    算法与编程之美
  • 微信小程序自定义组件

    小小咸鱼YwY
  • 开发 | MIT Taco项目:自动生成张量计算的优化代码,深度学习加速效果提高100倍

    AI科技评论消息:我们生活在大数据的时代,但在实际应用中,大多数数据是“稀疏的”。例如,如果用一个庞大的表格表示亚马逊所有客户与其所有产品的对应映射关系,购买某...

    AI科技评论
  • 人脸专集3 | 人脸关键点检测

    今天继续上期的《人脸关键点检测》,精彩的现在才真正的开始,后文会陆续讲解现在流行的技术,有兴趣的我们一起来学习!

    计算机视觉研究院
  • 前端技术前沿1

    .js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,就相当于html中的css文件。

    达达前端
  • 朴素贝叶斯的基本算法和高斯混合朴素贝叶斯算法

    def fit(self, trainMatrix, trainCategory):

    大数据技术与机器学习
  • MIT Taco 项目:自动生成张量计算的优化代码,深度学习加速效果提高 100 倍

    我们生活在大数据的时代,但在实际应用中,大多数数据是 “稀疏的”。例如,如果用一个庞大的表格表示亚马逊所有客户与其所有产品的对应映射关系,购买某个产品以 “1”...

    AI研习社
  • 关于ORA-01555的问题分析(r5笔记第87天)

    今天开发的同事发给我一个问题,在运行某一个Job的时候抛出了ORA错误,希望我们看看从数据库层面能不能发现什么。 错误日志如下: Function: Entit...

    jeanron100

扫码关注云+社区

领取腾讯云代金券