一、第一部分html页面的准备

二、数据说明部分

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);

}