微信小程序之video組件視頻播放
1、功能介紹
可以實(shí)現(xiàn)視頻的播放暫停,發(fā)送彈幕,獲取視頻所處位置等。
2、video組件
2.1、用處
video組件常用于視頻的播放,默認(rèn)寬度為300px,高度為225px。
2.2、屬性
屬性 | 說(shuō)明 |
src | 視頻的資源地址 |
loop | 是否循環(huán)播放,默認(rèn)false |
controls | 是否顯示默認(rèn)播放按鈕(暫停,播放進(jìn)度,時(shí)間)默認(rèn)為true |
danmu-list | 彈幕列表 |
danmu-btn | 是否顯示彈幕按鈕,只在初始化有效,不能動(dòng)態(tài)變更,默認(rèn)為false |
enable-danmu | 是否展示彈幕,只在初始化有效,不能動(dòng)態(tài)變更,默認(rèn)false |
autoplay | 是否自動(dòng)播放,默認(rèn)false |
poster | 視頻封面的圖片網(wǎng)絡(luò)資源地址,如果controls屬性為false,則設(shè)置poster無(wú)效 |
bindplay | 當(dāng)播放時(shí)觸發(fā)play事件 |
bindpause | 當(dāng)暫停播放時(shí)觸發(fā)pause事件 |
3、index.js中的數(shù)據(jù)部分
data: { src:"http://localhost:3000/1.mp4", danmuList:[ {text:'first',color:'#ff0000',time:1}, {text:'second',color:'#008080',time:2}, {text:'three',color:'#ff00ff',time:3} ] },
4、結(jié)構(gòu)布局index.wxml
<video id="myVideo" src='{{src}}' danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video> <input bindblur="bindInputBlur"/> <button bindtap="bindSendDanmu">發(fā)送彈幕</button> <button bindtap="bindButtonTap">獲取視頻</button>
5、樣式部分index.wxss
video{ width: 100vw; } input{ border: 1rpx solid #ccc; margin: 20rpx; } button{ background-color: rgb(76, 250, 114); } button{ margin-bottom: 10rpx; }
6、彈幕實(shí)現(xiàn)功能
videoContext:null, inputValue:'', onReady:function(){ this.videoContext=wx.createAudioContext('myVideo') }, bindInputBlur:function(e){ this.inputValue=e.detail.value }, bindSendDanmu: function () { this.videoContext.sendDanmu({ text: this.inputValue, color: "#f90" }) },
創(chuàng)建的videoContent對(duì)象,用于對(duì)video組件進(jìn)行控制
7、獲取視頻功能
bindButtonTap:function(){ wx.chooseVideo({ sourceType:['album','camera'], maxDuration:60, camera: 'back', success:res=>{ this.setData({ src:res.tempFilePath }) } }) }
8、運(yùn)行效果
附:小程序video自定義播放按鈕
html:
<video show-center-play-btn="{{false}}" controls="{{false}}" id="video" src='{{article.video}}'></video> <!-- 播放按鈕 --> <view class='video-play'> <image bindtap="videoPlay" class='video-btn' src='/images/icon/class/play.png'/> <image bindtap="videoPause" class='video-btn' src='/images/icon/class/pause.png'/> </view>
js:
// 播放 videoPlay() { console.log('開始播放') var videoplay = wx.createVideoContext('video') videoplay.play() }, // 暫停播放 videoPause(){ console.log('暫停播放') var videoplay = wx.createVideoContext('video') videoplay.pause() },
注意:
1. wx.createVideoContext(‘video’), 這里的’video’是對(duì)應(yīng)的<video id="video">
2. show-center-play-btn 和 controls 設(shè)置值的時(shí)候,要寫成="{{false}}"才會(huì)生效
3.隱藏播放鍵在開發(fā)者工具中無(wú)效,要用真機(jī)調(diào)試才看的出來(lái)
總結(jié)
到此這篇關(guān)于微信小程序之video組件視頻播放的文章就介紹到這了,更多相關(guān)小程序video視頻播放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
一步步教你用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)
一轉(zhuǎn)眼已經(jīng)臘月了,相信小伙伴們一定想知道我們距離2023新年還有多少天,下面這篇文章主要給大家介紹了關(guān)于如何一步步教你用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)的相關(guān)資料,需要的朋友可以參考下2022-12-12JavaScript枚舉選擇jquery插件代碼實(shí)例
這篇文章主要介紹了JavaScript枚舉選擇jquery插件代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11JS運(yùn)動(dòng)特效之完美運(yùn)動(dòng)框架實(shí)例分析
這篇文章主要介紹了JS運(yùn)動(dòng)特效之完美運(yùn)動(dòng)框架,結(jié)合實(shí)例形式分析了javascript針對(duì)運(yùn)動(dòng)中的元素屬性檢測(cè)與判斷相關(guān)操作技巧,需要的朋友可以參考下2018-01-01javascript原始值和對(duì)象引用實(shí)例分析
這篇文章主要介紹了javascript原始值和對(duì)象引用的方法,實(shí)例分析了javascript原始值和對(duì)象引用的功能、定義與相關(guān)技巧,需要的朋友可以參考下2015-04-04使用js Math.random()函數(shù)生成n到m間的隨機(jī)數(shù)字
何使用js生成n到m間的隨機(jī)數(shù)字,主要目的是為后期的js生成驗(yàn)證碼做準(zhǔn)備,Math.random()函數(shù)返回0和1之間的偽隨機(jī)數(shù)2014-10-10為什么TypeScript的Enum會(huì)出現(xiàn)問(wèn)題
TypeScript引入了很多靜態(tài)編譯語(yǔ)言的特性,今天有一個(gè)類型需要著重討論下,這就是enum,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06輕松理解Javascript變量的相關(guān)問(wèn)題
這篇文章主要給大家介紹了關(guān)于Javascript變量的相關(guān)問(wèn)題,文中給出了詳細(xì)的介紹和示例代碼,相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值,有需要的朋友們下面來(lái)一起看看吧。2017-01-0124個(gè)實(shí)用JavaScript?開發(fā)技巧
這篇文章主要給大家分享了24個(gè)實(shí)用JavaScript?的開發(fā)技巧,文章圍繞JavaScript?的開發(fā)技巧講解展開全文,具有一定的參考價(jià)值,需要的朋友可以參考一下,希望對(duì)你有所幫助2021-12-12