我正在参加「掘金·启航计划」
本身也参考了好几中做法 。最好试验下来还是swiper感觉效果最好
这个也是在小程序项目中需要用到时参考了一些案例后自己再加以修改 然后完成
首先这里是html的代码
-
v-if：用于控制视频在节点的渲染数 v-if="Math.abs(k-index)<=1"
-
muted的默认值是 false，代表默认是禁音视频的
-
http-cache默认开启视频缓存
-
poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
-
show-loading：这里默认去掉播放转圈的标志
<swiper
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'"
:vertical="true"
@change="change"
:current="current"
:indicator-dots="false">
<swiper-item v-for="(list,index) in dataList">
<view v-if="Math.abs(k-index)<=1">
<view>
<video
v-if="isShow && list.videoUrl"
:id="list.videoId+''+index"
:loop="true"
:muted="list.isplay"
:controls="controls"
:http-cache="true"
:page-gesture="false"
:show-fullscreen-btn="false"
:show-loading="false"
:show-center-play-btn="false"
:enable-progress-gesture="false"
:src="list.videoUrl"
@ended="ended"
@click="tapVideoHover(list.state,$event)"
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000; z-index: -1;'"
:poster="list.pic"
></video>
<!--
1.这里是封面（方案二）：这里的封面可以自定义。
2.也在代码中做了批注，两种方案可以共存，不会相互影响。
-->
<image
v-if="
list.rechargeable == 1 ||
list.videoUrl == null
"
:src="scriptVo.pic"
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; position: absolute;'"
mode="aspectFit"
></image>
</view>
<!-- 播放状态：pause 的时候就会暂停 -->
<view class="videoHover" @click="tapVideoHover(list.state,$event)" :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'">
<image v-if="list.state ==='pause' && list.videoUrl" class="playState" src="@/static/img/index/play.png"></image>
</view>
</view>
</swiper-item>
首先我们现在data中定义好我们需要使用到的数据
//定义好data数据
data(){
return{
windowWidth: 0,//
windowHeight: 0,
dataList: [],
k: 0,
voice: "",
timeout: "",
current: 0,
boxStyle:{//视频，图片封面样式🌟💗
'height': 0,
'width': 0,
},
state:'play',
videoID: "",
isShow: false,
controls: true,
}
}
然后在进入页面时去调用我们需要做的初始化操作 这里获取到的高度宽度用在设置视频的大小
onLoad(e) {
this.scriptId = e.scriptId;
this.platform = uni.getSystemInfoSync().platform
var model = uni.getSystemInfoSync().model
this.windowWidth = uni.getSystemInfoSync().windowWidth
this.windowHeight = uni.getSystemInfoSync().windowHeight
this.get() //刚进入页面加载数据
}
这里是定义好了取视频的方法 同时在这个方法中做了一下操作
1.这里把视频添加到视频列表
2.播放当前视频
3.预加载视频
在滑动的change事件中我们可以去判断是否到了最后一条视频 然后去做自己想要的添加效果 具体看个人的业务去做实现 这里就不多讲了
change(){
},
get(){
uni.request({
url:"",//请求的服务端url
method:"GET",
success(res) {
this.isShow = false;
var msg = res.data.data
// 2.这里把视频添加到视频列表
for (let i = 0; i < msg.length; i++) {
this.dataList.push(msg[i])
}
// 3.播放当前视频
setTimeout(()=>{
this.isShow = true;
this.dataList[this.k].isplay = false
this.dataList[this.k].state = 'play'
uni.createVideoContext(this.dataList[this.k]._id+''+this.k,this).play()
this.dataList[this.k].playIng = true
},200)
this.videoID = this.dataList[this.k]._id
// start - 预加载开始
var p = this.k
++p
setTimeout(()=>{
uni.createVideoContext(this.dataList[p]._id+''+p,this).play()
},20)
clearTimeout(this.timeout)
this.timeout = setTimeout(()=>{
uni.createVideoContext(this.dataList[p]._id+''+p,this).seek(0)
uni.createVideoContext(this.dataList[p]._id+''+p,this).pause()
console.log('预加载第' + (p + 1) + '个视频：' + this.dataList[p]._id+''+p)
},1500)
// end - 预加载结束
}
})
}
在计算属性中去监听视频的变化 在切换时暂停上一个视频 同时预加载播放下一个视频这样做可以让体验敢更好一点点
watch:{
async k(k,old_k){
this.isShow = false
if(this.dataList[old_k]){
this.dataList[old_k].playIng = false//如果视频暂停，就加载封面
this.dataList[old_k].isplay = false
this.dataList[old_k].state = 'pause'
//如果视频暂停，那么旧视频停止，这里的this.dataList[old_k]._id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
uni.createVideoContext(this.dataList[old_k].videoId + '' + old_k,this).stop()
}
this.dataList[k].state = 'play'
this.isShow = true
await setTimeout( async ()=>{
uni.createVideoContext(this.dataList[k].videoId+''+k,this).play()
await setTimeout(()=>{
this.dataList[k].isplay = false
this.dataList[k].playIng = true
},50)
},250)
}
},
到了这一步 我们的视频滑动的方法基本上就已经完成了
写的不是很好 愿意看的小伙伴就当作参考看一下就好了 不喜勿碰 会继续努力进步
