一、第一部分html页面的准备
<van-swipe :show-indicators="false" :initial-swipe="showSlide" @change="onChange" vertical :loop="false" ref="vant_swipe" >
<van-swipe-item v-for="(item, index) in videoList" :key="index" class="product_swiper">
<div class="video_container">
<video class="video_box" width="100%" height="100%" webkit-playsinline="true" x5-playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" playsinline="true" preload="auto" :src="item.video_url" :playOrPause="playOrPause" x-webkit-airplay="allow" x5-video-orientation="portrait" @click="pauseVideo" @ended="onPlayerEnded($event)" loop="loop" :style="{opacity:isopacity}"></video>
<!-- 封面 -->
<img v-show="isVideoShow" class="play" @click="playvideo" :src="item.video_cover" :style="{opacity:isopacity}">
<img v-show="iconPlayShow" class="icon_play" @click="playvideo" src="static/images/icon_play.png">
</div>
<!-- 底部作品描述 -->
<div class="production_box">
<div class="production_name">{{item.title}}</div>
<div class="production_des">{{item.introduction}}</div>
</div>
</van-swipe-item>
</van-swipe>
二、数据说明部分
data() {
let u = navigator.userAgent;
return {
showSlide: 0,
allLoaded: false, //数据是否全部加载完
page: 1,
isLoading: true,
option: {},
current: 0,
videoList: [],
isVideoShow: true,
playOrPause: true,
video: null,
iconPlayShow: true,
isAndroid: u.indexOf("Android") > -1 || u.indexOf("Adr") > -1, // android终端
isiOS: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
tabIndex: 0,
showshare: false,
videoInterval: null, //检查视频是否加载好
videoLazy: false, //视频懒加载
isopacity: 1,
shareVideo: null, //点击分享的时候需要暂停的视频
dataLoaded: false
};
},
三、事件
//滑动改变播放的视频
onChange(index) {
//如果已经播放第一个了就清除循环
if (this.videoInterval) { clearInterval(this.videoInterval); }
this.iconPlayShow = false;
//改变的时候 暂停当前播放的视频
let video = document.querySelectorAll("video")[this.current];
video.pause();
//判断案例加载到哪里了
if (index + 1 == this.videoList.length) {
this.page++; //当视频切换到列表的最后一个的时候请求加载下一页
this.getData(index);
} else {
this.changeload(index);
}
},
//播放视频
changeload(index) {
this.playOrPause = false;
this.current = index;
if (this.isiOS) {
//页面中是否存在视频懒加载
if (this.videoLazy) {
this.videoLazy = false;
this.isopacity = 1;
} else {
this.videoLazy = true;
this.isopacity = 0;
}
//ios切换直接自动播放下一个
let vid = document.querySelectorAll("video")[this.current];
console.log("进入changeload", vid.readyState, vid.networkState);
//检测视频是否加载好了
if (vid.readyState == 4) {
this.isopacity = 1;
this.videoLazy = false;
vid.play();
console.log(this.videoLazy, "懒加载");
} else {
this.videoInterval = setInterval(() => {
this.myFunction(vid);
}, 300);
}
this.playOrPause = true;
} else {
if (this.videoLazy) {
this.videoLazy = false;
this.isopacity = 1;
}
//安卓播放时重置显示封面。图标等
this.isVideoShow = true;
this.iconPlayShow = true;
}
},
//检查视频懒加载的图片是否加载好
imageLoaded() {
this.iconPlayShow = true;
},
//视频播放
playvideo() {
let video = document.querySelectorAll("video")[this.current];
this.isVideoShow = false;
this.iconPlayShow = false;
//检测视频是否加载好了
if (video.readyState == 4 || video.networkState == 1) {
video.play();
this.isopacity = 1;
} else {
this.videoInterval = setInterval(() => {
this.myFunction(video);
}, 300);
}
window.onresize = function() {
video.style.width = window.innerWidth + "px";
video.style.height = window.innerHeight + "px";
};
},
pauseVideo() {
clearInterval(this.videoInterval);
//暂停\播放
let video = document.querySelectorAll("video")[this.current];
if (this.playOrPause) {
video.pause();
this.iconPlayShow = true;
this.videoLazy = false;
} else {
this.videoInterval = setInterval(() => {
this.myFunction(video);
}, 300);
this.iconPlayShow = false;
}
this.playOrPause = !this.playOrPause;
},
onPlayerEnded(player) {
//视频结束
this.isVideoShow = true;
this.current += this.current;
},
myFunction(video) {
let nws = video.networkState;
if (video.readyState == 4 || nws == 1) {
video.play();
if (video.readyState == 4) {
this.iconPlayShow = false; //暂停按钮
this.videoLazy = false; //懒加载
this.isopacity = 1; //视频是否显示
this.isVideoShow = false; //封面图片
clearInterval(this.videoInterval);
}
} else {
this.videoLazy = true;
this.isopacity = 0;
}
}
deactivated() {
this.showSlide = this.current;
console.log("清除循环", "退出");
clearInterval(this.videoInterval);
}