cambio de reproducción de video vue fake Douyin
lt; van-swipe: show-indicators="false": inicial-swipe="showSlide"?@change="onChange" vertical: loop= "false " ref="van_swipe" > /p>
lt;div class="video_container"gt;
?lt;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"? xwebkit-airplay="allow"? ;lt;/videogt;
?lt;! -- portada --gt
lt; img v-show="isVideoShow" class="reproducir"
?@click="reproducir video" ：src="item. video_cover": style="{opacidad: isopacidad}"gt;
*lt; img? v-show="iconPlayShow" class="icon_play".
@click="reproducir video"? src="static/images/icon_play.png"gt;
lt;/divgt;
lt;! -- Descripción del arte inferior --gt;
lt; div class="production_box"gt
lt; }lt;/divgt;
lt;div class="production_des"gt;{{item.introduction}}lt;/divgt;
lt;/divgt; p>
?lt;/van-swipe-itemgt;
lt;/van-swipegt;
En segundo lugar, la parte de descripción de datos
datos () {
let u = navigator.userAgent;
return {
? showSlide: 0,
* allLoaded: false, //Si los datos se han cargado completamente
* página: 1,
* isLoading: true,
* opción: {current: 0,
VideoList: [isVideoShow: verdadero,
? playOrPause: verdadero,
? vídeo: nulo,
iconPlayShow: verdadero,
?isAndroid: u.indexOf("Android") gt; || u.indexOf("Adr") gt; // terminal android
?isiOS : !u .match(/\(i[^;]; (U;)?CPU. Mac OS X/), // terminal ios
? tabIndex: 0,
* showshare : false,
* videoInterval: null, //comprueba si el vídeo está cargado
* videoLazy: false, // carga diferida del vídeo
* isopacidad: 1,
* shareVideo: null, //video para pausar al hacer clic en compartir
* dataLoaded: false
};
? },
III. Eventos
//Desliza para cambiar el vídeo reproducido
onChange(index) {
?// si el primer vídeo ya se está reproduciendo, entonces borre el bucle
? if (this.videoInterval) { clearInterval(this.videoInterval }
? false;
p>?// Pausar la reproducción cuando cambie el vídeo que se está reproduciendo actualmente
let video =
document.querySelectorAll("video")[this.current];
? video.pause();
?
? this.videoList.length) {
this.page; //solicita que se cargue la siguiente página cuando el vídeo cambie al último de la lista
this.getData(index) ;
?} más {
this.changeload(index);
?}
},
//reproducir vídeo
changeload(index) {
? this.playOrPause = false
? p> ? if (this.isiOS) {
//¿Hay video con carga diferida en la página?
if (this.videoLazy) {
// ¿Hay carga diferida de videos en la página?
?videoLazy) {
? this.videoLazy = false
? >
} else {
? this.videoLazy = verdadero;
? this.isopacity = 0; //ios cambia directamente al siguiente paso de reproducción automática
let vid = document.querySelectorAll("video")[this.current];
console.log( "Ingresando changeload ", vid.readyState, vid.networkState);
// Prueba si el vídeo se ha cargado
if (vid.readyState == 4) {
? esto. isopacidad = 1;
? this.videoLazy = false
? this.videoLazy = false; videoLazy, "carga diferida");
} else {
? this.videoInterval = setInterval(() =gt; {
this.myFunction(vid) );
p>?}, 300);
}
this.playOrPause = true
?} más {
if (this.videoLazy) {
? this.videoLazy = false
?
ty = 1;
}
//Restablecer la visualización de la portada en la reproducción de iconos de Android, etc.
this.isVideoShow = verdadero;
this.iconPlayShow = verdadero
?}
},
//comprueba si la imagen cargada de forma diferida está cargada
imageLoaded() {
? this.iconPlayShow = true
},
//reproducción de vídeo
reproducirvideo() {
?let video = document.querySelectorAll("video")[this.current];
? this.isVideoShow = false;
? this.iconPlayShow = false;
?// Comprueba si el vídeo se ha cargado
si (video. readyState = = 4 || video.networkState == 1) {
video.play();
this.isopacity = 1;
?} {
this.videoInterval = setInterval(() =gt; {
? this.myFunction(video);
}, 300
?}
? window.onresize = function() {
video.style.width = window.innerWidth "px";
video .style .height = ventana.innerHeight "px";
? p> ?}
},
pausaVideo() {
? clearInterval(this.videoInterval);
?//pause\play
? let video = document.querySelectorAll("video")[this.current];
? false;
?} else {
this.videoInterval = setInterval(() =gt; {
? this.myFunction(video);
}, 300);
this.iconPlayShow = false;
?}
? this.playOrPause = !this.playOrPause
},
onPlayerEnded(player) {
?// El vídeo finaliza
? this.isVideoShow = true;
? this.current = this.current;
},
myFunction(video) {
? networkState;
? if (video.readyState == 4 || nws == 1) {
video.play();
if (video. readyState == 4) {
? this.iconPlayShow = false; //Botón de pausa
? this.videoLazy = false; //Carga diferida
? this.isopacity = 1; //Si se muestra el video
? this.isVideoShow = false; //Imagen de portada
? p > }
?} else {
this.videoLazy = true;
this.isopacity = 0
?}< / p>
}
desactivado() {
this.showSlide = this.current;
console.log("borrando bucle", " saliendo ");
clearInterval(this. videoInterval);
?}