Al reproducir videos bajo el WeChat en los teléfonos iOS y Android, encontrará muchos problemas. . Si el video no es un video de Tencent, aparece la reproducción.
Solución: Agregue algunos atributos al video y llame al video nativo de H5.<video id = videoall src = video/01.mp4 póster = imágenes/1.jpg/*视频封面*/preload = auto webkit-playsinline = true/*这个属性是 iOS 10 中设置可以让视频在小窗内播放, Es decir, ¿es una reproducción de pantalla completa* / playsinline = true /* iOS wechat navegador admite reproducción de ventana pequeña* / x -webkit-airplay = permitir x5-video-player-type = h5 /* h5 reproductor, que es WeChat Android. El valor es la pantalla vertical*/ style = object-fils: relleno> </ video>Coster = Images/1.jpg: la imagen que se muestra cuando el atributo especifica la descarga de video, o la imagen que se muestra frente al usuario, haga clic en el botón Reproducir. Si este atributo no está configurado, use el primer cuadro del video en su lugar. Preload = Auto: el atributo especifica el video después de que se carga la página. Webkit-playsinline y playsinline: reproducción local durante la reproducción de video, no deje el flujo del documento. Pero este atributo es más especial. En otras palabras, si la aplicación no está configurada, esta etiqueta no es efectiva en su página.
Es necesario agregar aquí. Necesidad porque la pantalla completa es predeterminada. Pero en este momento la pantalla completa ha jugado controles, si establece el control si está configurado. Se puede usar la transmisión en vivo de la transmisión en vivo, pero el H5 de pantalla completa no es necesaria, por lo que el control del control durante la reproducción de la pantalla completa requiere la siguiente configuración: la misma reproducción de capa.
X-webkit-airplay = permitir que no pueda conocer exactamente su papel por el momento, pero Xiaobian especula que este atributo debería hacer que este video admita la función de AirPlay de iOS. El uso de AirPlay puede reproducir videos, música y archivos de fotos directamente desde diferentes ubicaciones en el dispositivo de iOS. La reproducción también admite las funciones correspondientes. Tipo de video x5-video: habilite el mismo reproductor H5 de capa, es decir, cuando la pantalla completa del video, el DIV se puede presentar en la capa de video, que también es un atributo único de la versión de WeChat Android. Jugar alias en la misma capa también se llama reproducción inmersiva. El mismo reproductor de nivel actual solo entra en vigencia en Android (incluido WeChat) y no admite iOS por el momento. En cuanto a por qué la misma reproducción de capa solo está abierta a Android, porque Android no se puede reproducir como ISO, la pantalla completa predeterminada causará que se bloqueen algunas operaciones de interfaz. La misma capa en este momento resuelve este problema. Sin embargo, durante la prueba, se descubrió que diferentes versiones de efectos ISO y Android eran ligeramente diferentes. ORIENTACIÓN DE VIDEO X5: Declara la dirección respaldada por el jugador, pantalla horizontal del paisaje de valor opcional, pantalla vertical de retráfico. El valor de valor predeterminado. Tanto la transmisión en vivo como el H5 de pantalla completa generalmente se reproducen pantallas verticales, pero este atributo requiere un tipo de juego x5-video para abrir el modo H5 X5-Video-Player-FullScreen: Configuración de pantalla completa. Tiene otros dos valores de atributos, ture y falso, verdadero admite la reproducción de pantalla completa, False no admite la reproducción de pantalla completa.De hecho, el navegador ISO WeChat es el núcleo de Chrome, y los atributos relacionados son compatibles, y es por eso que el X5 no es compatible con la misma capa. El navegador Android WeChat es el kernel X5.
También hay un problema.
SOLUCIÓN: Agregar ajuste de objeto: relleno; Si todavía hay bordes negros, el tamaño del video es inapropiado.<Div id = VideObox> <video id = videoAll src = mp4.mp4 poster = 1.jpg preload = auto webkit-playsinline = true playsinline = true = permiso x5-video-player-type = h5 x5- video-player-fullscreen = True x5-video-orientation = retracty style = object-fit: relleno> </dideos> <div id = playcontr ()> </div> </div> <div id = videoend> <div id = devueltn onClick = Playcontr ()> </div> </div>
*{REDICIONAL: 0; 100%de antecedentes; ; : -40.5px; 2. JPG); <script> var videoall = document.getElementById ('VideSeall'), Videobox = document.getElementById ('VideObox'), btn = d ('btn'), videond = document.getElementById ('videOd'); .DocMeentElement.ClientWidth; PREVICIÓN DE LA FUNCIÓN DE LA FUNCIÓN .Indexof ('ADR')> -1; IOS Terminal Function PlayContr () {if (isandroid) {videoAll.style.width = window.screen. = Block; , Function () {VideoLll .Pause ();Lo anterior es la solución a la reproducción de WeChat HTML5. ¡Muchas gracias por su apoyo al sitio web de VEVB Wulin!