當(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)！
