php做抖音在微信中播放,微信小程序实现抖音切换视频效果

思路：

使用微信小程序的swiper组件，使其竖向滑动

分页加载，每次加载3个视频，当滑动到只剩1个视频时加载下一页

问题：

加载多个视频时，多个视频会同时播放

效果图：

效果图1

效果图2

代码：

index.json文件：

{

"usingComponents": {},

"navigationStyle":"custom",

"navigationBarTextStyle":"white"

}

index.wxml文件：

wx:if="{{index==q_videoIndex}}" 用于控制只播放当前视频，否则多个视频会同时播放没刷到的也会播放

index.wxss文件：

/**index.wxss**/

page{

width: 100%;

height: 100%;

}

.q_swiper{

width: 100%;

height: 100%;

background-color: #000;

}

.q_videoView{

width: 100%;

height: 100%;

position: relative;

}

.q_videoView video{

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

}

index.js文件：

videoList内的视频地址为临时地址，届时视频链接可能失效，如果视频链接失效，您只需自己随意找几个视频替换掉地址即可

//index.js

Page({

/**

* 页面的初始数据

*/

data: {

q_videos: [], //视频

q_videoIndex: 0, //视频index

q_yjz: false, //是否允许预加载

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

// videoList内的视频地址为临时地址，届时视频链接可能失效，如果视频链接失效，您只需自己随意找几个视频替换掉地址即可

var videoList = [{

id: '1',

url: "http://sns-1255549670.cos.ap-guangzhou.myqcloud.com/tmp_29f5566f128e9a4ee470f30c310b63678b7e786e2ab03ac2.mp4?0.42363964325301695",

}, {

id: '2',

url: "http://sns-1255549670.cos.ap-guangzhou.myqcloud.com/tmp_4eeae5bfcad7f75ec481b5ad87f4a9102ea7c735df672d18.mp4?0.9295834871549054",

}, {

id: '3',

url: "http://sns-1255549670.cos.ap-guangzhou.myqcloud.com/tmp_7a9caafe0a37a460686fcf2a4a6dc492e0e44119c10cc47b.mp4?0.401603295588834",

}]

this.setData({

q_videos: videoList, //视频

// 每次加载3个视频，当获取的视频数量小于3时，证明没有后续视频了，也就不需要在进行预加载了

q_yjz: videoList.length < 3 ? false : true, //是否允许预加载

})

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

},

//动态更新当前视频下标

q_swiperBindchange: function (e) {

console.log('当前视频下标：', e.detail.current)

this.setData({

q_videoIndex: e.detail.current

})

// 当加载的视频还剩1个未被滑到时加载下一页

if (this.data.q_videos.length - (e.detail.current + 1) == 1 && this.data.q_yjz) {

this.q_yjzVideos() //预加载视频

}

},

//预加载视频

q_yjzVideos: function () {

console.log('预加载视频')

var videoList = [{

id: '4',

url: "http://sns-1255549670.cos.ap-guangzhou.myqcloud.com/tmp_b0855d9c92f6ce4cd91796e8b1ca39a78bca4d48f524bb06.mp4?0.27723747875520743",

}, {

id: '5',

url: "http://sns-1255549670.cos.ap-guangzhou.myqcloud.com/wx982ed8d3473ced2c.o6zAJs8Oghy9CSGBPJEdSoJABPEU.SZVa80OoOknW8750107432d93943f9ce930651ad5ffa.mp4?0.27723747875520743",

}]

var array = this.data.q_videos.concat(videoList) //concat() 方法：用于连接两个或多个数组,并返回一个新数组

this.setData({

q_videos: array, //视频

q_yjz: videoList.length < 3 ? false : true, //是否允许预加载

})

},

})

OK