微信小程序中視頻的顯示與隱藏功能
在微信小程序中實(shí)現(xiàn)視頻的播放與暫停
需求:
- 視頻列表中只能有一個(gè)視頻在播放
- 點(diǎn)擊視頻實(shí)現(xiàn)播放與暫停功能
- 加載完成顯示圖片,點(diǎn)擊后變?yōu)橐曨l播放
- 從上次播放的位置進(jìn)行播放
思路:
- 定義一個(gè)標(biāo)記變量,控制視頻的播放與暫停
- true => 本次問(wèn)播放
- false => 本次為暫停
- 每次點(diǎn)擊后,更新data中視頻的id值
- 聲明一個(gè)數(shù)組,用于存放播放視頻的id和播放時(shí)間
{ vid:xxx, currentTime:xxx }
事件的流程圖
代碼實(shí)現(xiàn):
靜態(tài)
<!-- 使用scroll-view組件 --> <scroll-view class="scroll_video" enable-flex scroll-y> <view class="scroll_videoList_item" wx:for="{{videoList}}" wx:key="index"> <!-- 注意這個(gè)id是標(biāo)簽屬性, 點(diǎn)擊視頻標(biāo)簽,事件的回調(diào) event屬性會(huì)獲取到這個(gè)id值 item.data.vid == vid => 點(diǎn)擊獲取到id bindtimeupdate:視頻的進(jìn)度條發(fā)生變化時(shí)觸發(fā) 通過(guò)event.detail.currentTime獲取播放的時(shí)間(詳見(jiàn)官網(wǎng)) --> <video src="{{item.data.urlInfo.url}}" id="{{item.data.vid}}" class="scroll_video_item" wx:if="{{vid == item.data.vid ? isPlay? true : false :false}}" bindtap="clickVideo" poster="{{item.data.coverUrl}}" bindtimeupdate="handlerUpdate" ></video> <!-- 視頻加載的時(shí)候使用圖片代替,點(diǎn)擊時(shí)切換為視頻 --> <image id="{{item.data.vid}}" class="scroll_img_item" src="{{item.data.coverUrl}}" bindtap="clickVideo" wx:else ></image> </view> </scroll-view>
邏輯:
//頁(yè)面中使用到的數(shù)據(jù) data: { // 保存點(diǎn)擊的nav id clickId: '', // 保存視頻的數(shù)據(jù) videoList: [], // 保存點(diǎn)擊的視頻的id vid: '', // 控制視頻是否播放 isPlay: true, //為true =>這一次為播放,為false => 這一次為暫停 }, //視頻的播放與暫停 clickVideo(event) { // 獲取用戶(hù)點(diǎn)擊視頻的id // console.log(event.currentTarget.id); let vid = event.currentTarget.id // 創(chuàng)建視頻的上下文與video組件進(jìn)行一一關(guān)聯(lián) if (!this.player) { // 沒(méi)有視頻的上下文,創(chuàng)建一個(gè) this.player = wx.createVideoContext(vid) // 播放視頻 this.player.play() // 存儲(chǔ)這次點(diǎn)擊的視頻的id this.setData({ vid }) } else { // 有視頻上下文了 if (vid != this.data.vid) { // 說(shuō)明再次點(diǎn)擊的是其他的視頻 // 暫停上一個(gè)視頻 -> 創(chuàng)建一個(gè)新的視頻上下文 -> 播放這個(gè)視頻 this.player.pause() this.player = wx.createVideoContext(vid) this.player.play() this.setData({ isPlay: true,//只要id不同,都是暫停上一次,播放這一次!!! vid }) } else { // 說(shuō)明第二次點(diǎn)擊的是正在播放的視頻 if(this.data.isPlay){ // 上一次的為播放,這一次需要暫停 this.player.pause() // 修改狀態(tài) this.setData({ isPlay:false, }) }else { // 上一次為暫停,這一次需要播放 this.player.play() this.setData({ isPlay:true, }) } } } }, // 視頻播放的時(shí)間 handlerUpdate(event) { const { videoUpdataTime } = this.data // 定義一個(gè)存儲(chǔ)視頻id和時(shí)間的對(duì)象 const updateTime = { vid: event.currentTarget.id, currentTime: event.detail.currentTime, } // 如果數(shù)組里有時(shí)間,則更新時(shí)間,如果沒(méi)有事件,則添加這個(gè)對(duì)象 let updateItem = videoUpdataTime.find(item => item.vid == updateTime.vid) if (updateItem) { // 有,更新時(shí)間 updateItem.currentTime = event.detail.currentTime } else { // 沒(méi)有,添加整個(gè)對(duì)象 videoUpdataTime.push(updateTime) } // 更新數(shù)據(jù) this.setData({ videoUpdataTime, }) },
總結(jié):
- 沒(méi)有思路的時(shí)候,可以畫(huà)一個(gè)流程圖,不要空想 ??
- 多看文檔!多看文檔!多看文檔!重要的事情說(shuō)三遍
- 需要注意的是,如果在微信開(kāi)發(fā)者工具中測(cè)試有bug,但是代碼檢查不出問(wèn)題,試試真機(jī)測(cè)試,會(huì)有意想不到的結(jié)果 ??
到此這篇關(guān)于微信小程序中視頻的顯示與隱藏的文章就介紹到這了,更多相關(guān)微信小程序顯示與隱藏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript將數(shù)組轉(zhuǎn)換成CSV格式的方法
這篇文章主要介紹了JavaScript將數(shù)組轉(zhuǎn)換成CSV格式的方法,實(shí)例分析了javascript使用valueOf方法將數(shù)組值轉(zhuǎn)換為csv格式字符串的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03微信小程序?qū)崿F(xiàn)下拉刷新動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了微信小程序動(dòng)畫(huà)實(shí)現(xiàn)下拉刷新動(dòng)畫(huà),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06微信小程序?qū)崿F(xiàn)時(shí)間進(jìn)度條功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)時(shí)間進(jìn)度條功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11JS控制FileUpload的上傳文件類(lèi)型實(shí)例代碼
下面小編就為大家?guī)?lái)一篇JS控制FileUpload的上傳文件類(lèi)型實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10ES6基礎(chǔ)之?dāng)?shù)組和對(duì)象的拓展實(shí)例詳解
這篇文章主要介紹了ES6基礎(chǔ)之?dāng)?shù)組和對(duì)象的拓展,結(jié)合實(shí)例形式詳細(xì)分析了ES6數(shù)組和對(duì)象拓展運(yùn)算符、拓展方法的使用及相關(guān)操作技巧,需要的朋友可以參考下2019-08-08數(shù)據(jù)庫(kù)管理工具PHPMyAdmin
這篇文章主要為大家介紹了數(shù)據(jù)庫(kù)管理工具PHPMyAdmin使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09JavaScript canvas實(shí)現(xiàn)俄羅斯方塊游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)俄羅斯方塊游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07