當(dāng)我們進(jìn)行開發(fā)的時(shí)候可能會(huì)遇到需要實(shí)現(xiàn)抖音視頻效果的需求,并且網(wǎng)上該效果的開源代碼少,找到的開源代碼代碼量大,很難進(jìn)行二次開發(fā)
對(duì)此我將自己的代碼進(jìn)行簡(jiǎn)化,僅留下可動(dòng)性高的代碼模塊
以上是實(shí)現(xiàn)效果與此處demo的模板
wxml文件:
<swiper vertical="true" bindchange="nextVideo"> <swiper-item wx:for="{{viList}}"> <video loop="true" enable-progress-gesture="true" object-fit="contain" src="{{item.vio}}" id="video{{index}}" /> <view class="video-right"> <view class="video-right-img" style="margin-bottom: 10rpx; background-image: url({{item.avatar}})" data-user_id="{{item.user_id}}" bindtap="toOtherUser"></view> 點(diǎn)贊 評(píng)論 轉(zhuǎn)發(fā) </view> <view class="video-btm"> <view class="video-btm-con"> <text>@{{item.name}}</text><text>\t創(chuàng)建時(shí)間</text> <view>標(biāo)題</view> </view> </view> </swiper-item></swiper>
wxss文件:
page{ background-color: #000;} swiper{ height: 100vh; width: 100vw;} swiper video{ height: 100vh; width: 100%;} .video-right{ height: 38vh; width: 80rpx; position: fixed; right: 15rpx; top: 50vh; color: #fff;} .video-right-img{ height: 80rpx; width: 80rpx; border-radius: 100rpx; background-color: aquamarine; background-repeat: no-repeat; background-position: center; background-size: cover;} .video-btm{ height: 180rpx; width: 100vw; position: fixed; bottom: 0; color:#fff;} .video-btm-con{ width: 90vw; margin: 0 auto;}
文章來源:http://www.zghlxwxcb.cn/news/detail-521378.html
js文件:文章來源地址http://www.zghlxwxcb.cn/news/detail-521378.html
// pages/index5/index5.jsPage({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { viList:[ { vio:'https://assets.mixkit.co/videos/preview/mixkit-movement-in-a-large-avenue-at-night-in-timelapse-44688-large.mp4', avatar:'https://profile-avatar.yssmx.com/6ef2193c2e9649c88356336c626e5777_m0_64944135.jpg', name:'xiaoshen' }, { vio:'https://assets.mixkit.co/videos/preview/mixkit-movement-in-a-large-avenue-at-night-in-timelapse-44688-large.mp4', avatar:' https://profile.yssmx.com/7/A/9/1_2201_75886543', name:'kami' } ] }, onLoad(options) { // 調(diào)用播放視頻方法 this.startUp() }, // 進(jìn)頁(yè)面時(shí)播放視頻 startUp(){ // 獲取video節(jié)點(diǎn) let createVideoContext = wx.createVideoContext('video0') // 播放視頻 createVideoContext.play() }, // 切換視頻的時(shí)候播放視頻 // 注:此方法視頻如果過大可能會(huì)疊音,所以視頻需要壓縮,或者可以嘗試循環(huán)節(jié)點(diǎn)關(guān)閉視頻 nextVideo(e){ // 播放當(dāng)前頁(yè)面視頻 let index = 'video' + e.detail.current this.playVio(index) // 暫停前一個(gè)頁(yè)面視頻 if(e.detail.current-1 >= 0){ let index1 = 'video' + (e.detail.current-1) this.pauseVio(index1) } // 暫停后一個(gè)頁(yè)面視頻 if(e.detail.current+1 < this.data.viList.length){ let index2 = 'video' + (e.detail.current+1) this.pauseVio(index2) } }, // 播放視頻 playVio(index){ // 獲取video節(jié)點(diǎn) let createVideoContext = wx.createVideoContext(index) // 播放視頻 createVideoContext.play() }, // 暫停視頻 pauseVio(index){ // 獲取video節(jié)點(diǎn) let createVideoContext = wx.createVideoContext(index) // 暫停視頻 createVideoContext.pause() }})
到了這里,關(guān)于微信小程序?qū)崿F(xiàn)抖音視頻效果教程的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!