Una breve discusión sobre cómo solucionar los problemas del video html5 en terminales móviles

Este artículo presenta el terminal móvil de video html5, completa los obstáculos y lo comparte con todos. Los detalles son los siguientes:

 <video id=estilo de video=object-fit:fill autoplay webkit-playsinlineplaysinline x5-video-player-type=h5 x5-video-player-fullscreen=true x5-video-orientation=porttraint src=video.mp4 />< /video><!-- object-fit: fill El contenido del video llena todo el contenedor del video poster:img.jpg Reproducción automática de la portada del video: Reproducción automática automática - Cargue el video completo cuando la página cargue meta - Solo cargue los metadatos cuando la página no cargue ninguno - No cargue el video cuando la página cargue silenciado: cuando este atributo está configurado, especifica que la salida de audio del video debe estar silenciada webkit -playsinlineplaysinline: reproducción en línea x5-video-player-type=h5: habilita el reproductor x5 core H5 x5-video-player-fullscreen=true configuración de pantalla completa. Las configuraciones de verdadero y falso conducirán a diferentes diseños. x5-video-orientation=portraint: declara la dirección admitida por el reproductor. Los valores opcionales son pantalla horizontal horizontal y pantalla vertical vertical. Retrato de valor predeterminado. Ya sea una transmisión en vivo o H5 en pantalla completa, generalmente se reproduce verticalmente, pero este atributo requiere el tipo de reproductor de video x5 para habilitar el modo H5 -->

 <reproducción automática de vídeo></vídeo>

Sin embargo, en muchos navegadores móviles, se requiere la operación real del usuario (eventos estándar como toque, clic, doble clic o eventos de pulsación de tecla) para activar la llamada a video.play() para reproducir audio y video automáticamente.

 dom.addEventListener('hacer clic', función () { video.play()})

Video.play() también se puede activar en wx.ready()

 wx.ready(función () { video.play()})

Establece la propiedad webkit-playsinline gamesinline

 <video id=video webkit-playsinline reproduce en línea /></video>

Al reproducir vídeos en iOS Safari y algunos navegadores de Android, el vídeo no se puede reproducir en la página h5 y el sistema se hará cargo automáticamente del vídeo.

Si necesita reproducir un video en una página h5, debe agregar webkit-playsinline a la etiqueta de video. Después de iOS 10, debe agregar juegos en línea. Se recomienda agregar estos dos atributos al mismo tiempo. La aplicación también debe ser compatible con este modo.

 webview.allowsInlineMediaPlayback = SÍ;

Tanto iOS Mobile QQ como WeChat admiten este modo, pero Android WeChat cuelga.

El navegador integrado de Android WeChat utiliza el kernel Tencent X5 y no sigue el estándar X5web. Uno de ellos es el vídeo en pantalla completa forzada. Después de reproducir el video, aparecerán las recomendaciones de video propias de QQ.

Se dice que tiene una lista blanca y los recursos de video en la lista blanca no estarán en pantalla completa. Pero Tencent ya no puede agregar nada a la lista blanca. Urinario, sin solución. . . . . .

Actualmente existe una solución, que consiste en utilizar lienzo h5 para reproducir vídeo.

Errores encontrados al usar lienzo: el video debe agregar el atributo x5-video-player-type = h5; de lo contrario, el video se atascará en el terminal móvil y no se podrá reproducir. Personalmente, creo que es porque el video está asumido.

 <div class=wrapper> <video id=video style=display: none reproducción automática src=video.mp4 x5-video-player-type=h5></video> <canvas id=canvas></canvas></div> <script> var video = document.querySelector('#video') var canvas = document.querySelector('#canvas') var wrapper = canvas.parentNode var width = wrapper.offsetWidth var altura = wrapper.offsetHeight var ctx = c.getContext('2d') var tiempo = null canvas.width = ancho canvas.height = alto canvas.addEventListener('click', function () { video.play( ) }) video.addEventListener('reproducir', función () { tiempo = ventana.setInterval(función () { ctx.drawImage(v, 0, 0, ancho, alto); }, 20); }, falso); video.addEventListener('pausa', función () { ventana.clearInterval(tiempo); }, falso); , función () { ventana.clearInterval(hora }, falso);</script>

Finalmente, se descubrió que aunque el lienzo se usa para reproducir videos, los videos recomendados después de la reproducción en pantalla completa se pueden bloquear en Android WeChat. Pero no hay forma de desactivar el problema de pantalla completa al reproducir vídeos. Todavía recibes la lista blanca malvada. Presentar quejas. . . . . . . . . . . . . . . .

Lo que es aún más molesto es que no he encontrado una manera de activar la salida de pantalla completa a través de js.

Al reproducir un vídeo en iOS, aparecerá brevemente una pantalla negra y luego se mostrará normalmente.

Solución:

Agrega un div encima del video y rellénalo con una imagen para crear la ilusión de cargarlo antes de reproducirlo. Luego escuche el evento timeupdate y elimine este bloque div cuando se reproduzca el video.

 video.addEventListener('timeupdate', function(){ if(video.currentTime > 0.1){ posterImg.hidden(); }})

HTMLVideoElement y HTMLAudioElement heredan de HTMLMediaElement

 //Error de medios MediaObj.error; //null: normal MediaObj.error.code; //1. Terminación del usuario 2. Error de red 3. Error de decodificación 4. URL no válida //El estado actual de los medios MediaObj.currentSrc; /Volver al recurso actual URLMediaObj.src = value; //Devolver o configurar el recurso actual URLMediaObj.canPlayType(type); //Si se pueden reproducir recursos en un formato determinado MediaObj.networkState; //0. Este elemento no está inicializado 1. Normal pero no utiliza la red 2. Se están descargando datos 3. No se encuentra el recurso MediaObj.load() //Recarga el recurso especificado por src MediaObj.buffered; Regrese al área almacenada en el búfer, TimeRangesMediaObj.preload; //none: no precargue metadatos: precargue información de recursos auto://estado listo MediaObj.readyState //1:HAVE_NOTHING; //2:HAVE_METADATA //3.HAVE_CURRENT_DATA //4.HAVE_FUTURE_DATA //5.HAVE_ENOUGH_DATAMediaObj.seeking; //Si está buscando//Estado de reproducción MediaObj.currentTime = valor //La posición de reproducción actual, la asignación puede cambiar la posición MediaObj .startTime; // Generalmente 0, si se trata de medios de transmisión o un recurso que no comienza desde 0, no es 0MediaObj.duration; // La secuencia de longitud del recurso actual devuelve infinito MediaObj.paused // Si se debe pausar MediaObj.defaultPlaybackRate = valor; ; //Predeterminado Para la velocidad de reproducción, puede configurar MediaObj.playbackRate = value; //Velocidad de reproducción actual, cámbiela inmediatamente después de configurar MediaObj.played; // Devuelve el área que se ha reproducido, TimeRanges, mira a continuación para este objeto MediaObj.seekable; // Devuelve el área que se puede buscar TimeRangesMediaObj.ended // Si finalizar MediaObj.autoPlay // Si reproducir automáticamente MediaObj; .loop; //Sí, reproducción en bucle MediaObj.play(); //Reproducir MediaObj.pause(); //Pausa//Control de video MediaObj.controls;//Si hay una barra de control predeterminada MediaObj.volume = valor; //Volumen MediaObj.muted = valor //Silenciar//TimeRanges (región) objeto TimeRanges.length; /Región Número de segmentos TimeRanges.start(index) //Posición inicial del área del segmento de índice TimeRanges.end(index) //La posición final de la sección de índice //[★★★**Eventos relacionados**★★★]//Distribución de eventos var eventTester = function(e){ Media.addEventListener(e, function(){ console.log ((new Date()).getTime(),e) },false);}//Monitoreo de eventos eventTester(loadstart); //El cliente comienza a solicitar datos eventTester(progress); //El cliente está solicitando datos eventTester(suspend); //Descarga retrasada eventTester(abort); //El cliente finaliza activamente la descarga (no causada por un error) eventTester(loadstart); //El cliente comienza a solicitar datos eventTester( progreso) ; //El cliente está solicitando datos eventTester(suspend); //Descarga retrasada eventTester(abort); //El cliente finaliza activamente la descarga (no debido a un error), eventTester(error); //Se encontró un error al solicitar datos eventTester(stalled); //La velocidad de la red se detuvo eventTester(play); //EventTester(pause) se activa cuando play() y la reproducción automática comienzan a reproducirse //pause() activa eventTester(loadedmetadata; ); //Longitud del recurso obtenida con éxito eventTester(loadeddata); //eventTester(esperando datos, no un error eventTester(playing); //Iniciar reproducción eventTester(canplay); //Se puede reproducir, pero puede pausarse debido a la carga eventTester(canplaythrough); //Se puede reproducir, se han cargado todas las canciones eventTester(seeking); //Buscando eventTester(seeked); /Encontrando eventTester(timeupdate); //El tiempo de reproducción cambió eventTester(ended); //La reproducción finalizó eventTester(ratechange); //La velocidad de reproducción cambió eventTester(durationchange); //Cambios en la longitud del recurso eventTester(volumechange); //Cambios en el volumen

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.