Contenido reimpreso.
Los hermanos de grandes pechos que han hecho el video WeChat H5 deben haber sufrido toneladas de daño o incluso haber dudado de la vida. Pantalla completa automática, no pantalla completa, no reproducción automática, Android, IOS, Barabara ... ¡demasiado indignante! Hoy he resuelto las soluciones relevantes. No todas las anteriores están resueltas, pero se pueden puntuar al menos 60 puntos ...
Paso 1: Configure x5videoplayertype para habilitar el reproductor de la misma capa H5
Utilice el atributo de video "x5videoplayertype" para declarar
el tipo de valor admitido por la misma capa del reproductor H5 x5videoplayertype: h5
<video src="http://xxx.mp4" x5-video-player-type="h5"/>
Nota: Este atributo debe configurarse antes de jugar, y la configuración no es válida después de jugar.
La segunda parte: configurar el modo de pantalla completa de x5videoplayrtherlscreen
Cuando el video se está reproduciendo, ingresará al modo de pantalla completa.
Nota: Declarar este atributo requiere que la página se readapte al nuevo cambio de tamaño de la ventana gráfica. Eventos de cambio de tamaño de escucha pueden
ser alcanzados
<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>
Necesita monitorear los cambios de tamaño de la ventana (cambiar el tamaño) para lograr la pantalla completa
window.onresize = function(){test_video.style.width = window.innerWidth + "px";test_video.style.height = window.innerHeight + "px";}
Parte 3: Establecer la orientación de pantalla horizontal y vertical del reproductor x5videoorientation
Pantalla horizontal
<video x5-video-orientation="landscape"/>
Retrato
<video x5-video-orientation="portrait"/>
Sigue el teléfono para rotar automáticamente
<video x5-video-orientation="landscape|portrait"/>
Nota: este atributo solo tiene efecto cuando se declara x5videoplayertype = "h5"
Paso 3: Configure PlayInline para que no se reproduzca en pantalla completa.
<video src="xxx.mp4" x5-video-player-type="h5" playsinline webkit-playsinline="true"></video>
Parte 4: Configure WeixinJSBridgeReady para que se reproduzca automáticamente
HTML
<video src="xxx.mp4" autoplay x5-video-player-type="h5" />
JS
document.addEventListener("WeixinJSBridgeReady", function() {document.getElementById('video').play();}, false);
Nota: Esta reproducción automática solo puede ser compatible con IOS, Android no tiene poder, pero hay soluciones, Canvas se puede resolver, el código específico se puede buscar en Google, como:
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas
O escrito por un hermano de grandes pechos:
Sinceramente, ese saludo.