wechatVideoExample
1.0.0
Pruebe el código fuente para reproducir videos en WeChat: dado que WeChat usa el navegador X5, ocurren varios problemas extraños al usar la etiqueta de video para reproducir videos. Este código fuente es un código fuente provisional creado en el proceso de resolución de este problema. Incluye varios casos de prueba: usar lienzo para reproducir videos, usar imágenes para reproducir videos, usar etiquetas x5, etc. Esta biblioteca de código fuente disponible se puede conservar y los estudiantes interesados pueden descargarla ellos mismos.
###Después de descargar la introducción, cree un nuevo directorio en el host y copie todo el código fuente en este directorio. Utilice el navegador WeChat para acceder a la página html interna y realizar la prueba.
Autor chenjsh36 Equipo de tecnología de Ant Financial Data Experience
Con el advenimiento de la era del tráfico y la mejora de la tecnología de hardware, cada vez más sitios web esperan reproducir sus propios videos en PC o terminales móviles. La mejora gradual de la compatibilidad de <video> hace que los desarrolladores estén más dispuestos a implementar videos. escenarios de reproducción.
Este artículo enumera principalmente los escenarios comunes para la reproducción de video y los obstáculos encontrados en cada escenario. Se espera que pueda ayudar a los desarrolladores a elegir soluciones técnicas apropiadas más rápidamente y reducir los obstáculos cuando se encuentran con la frecuencia de desarrollo.
atributo booleano autoPlay ; cuando se especifica, el video comenzará a reproducirse automáticamente de inmediato y no dejará de esperar a que se carguen los datos.
La reproducción automática de video puede reproducir el video automáticamente cuando la página está abierta y los recursos están lo suficientemente cargados, lo que reduce la interacción de un clic del usuario. También se puede aplicar a fondos dinámicos y funciones de videollamadas de imitación H5. Sin embargo, por diversos motivos, la reproducción automática tiene distintos grados de restricciones tanto en el PC como en los terminales móviles.
En los primeros días, se requería una etiqueta de video con gestos del usuario para reproducir; a partir de la versión 10 , las reglas de video se modificaron y Apple relajó la estrategia en línea y la reproducción automática es la siguiente (solo aplicable al navegador Safari):
<video> podrán autoplay sin un gesto del usuario si su medio de origen no contiene pistas de audio (los elementos de video sin fuentes de audio permiten la reproducción automática).<video muted> también podrán reproducirse automáticamente sin un gesto del usuario.<video> obtiene una pista de audio o se activa sin un gesto del usuario, la reproducción se detendrá.<video autoplay> solo comenzarán a reproducirse cuando estén visibles en la pantalla, como cuando se desplazan hacia la ventana gráfica, se hacen visibles a través de CSS y se insertan en el DOM (los elementos de video solo comenzarán a reproducirse cuando estén visibles en la pantalla).<video autoplay> se pausarán si dejan de ser visibles, por ejemplo, si se desplazan fuera de la ventana gráfica. __Early__ también requería gestos del usuario para reproducir; Chrome 53 de Android luego relajó la política de reproducción automática. La política es diferente a la de Safari de iOS. Es necesario configurar la reproducción automática y silenciar (si el sonido está silenciado) en el video al mismo tiempo para permitir la reproducción automática. reproducción; __FireFox y UC Browser de Android__ admiten la reproducción automática bajo cualquier circunstancia; la situación con otros navegadores de Android no está clara actualmente;
Al principio, la reproducción automática era compatible, pero recientemente Safari y Chrome han modificado sucesivamente sus estrategias de reproducción automática...
__Safari 10 y posteriores__El vídeo y el audio con audio están desactivados de forma predeterminada en la reproducción automática . Para obtener más información, consulte este artículo;
Reproducción automática en Chrome (versión anterior):
Safari (publicación 10) no se reproduce automáticamente:
Los vídeos con sonido silenciado aún se pueden reproducir. Los vídeos con sonido se reproducirán automáticamente según el __Índice de participación de los medios__. Entonces, ¿qué es el Índice de participación de los medios? Se dan la explicación oficial y las dimensiones relacionadas:
MEI es un índice que evalúa la participación mediática del usuario en el sitio actual. Depende de las siguientes dimensiones:
- El usuario permaneció en el medio por más de 7 segundos
- El audio debe mostrarse y no silenciarse.
- Interactuado con vídeo
- El tamaño del medio no debe ser inferior a 200x140.
Después de leer esto, los pensamientos del desarrollador son los siguientes:
Afortunadamente, tanto Safari como Chrome, aunque restringen la reproducción automática, proporcionan un mecanismo para detectar si el vídeo se puede reproducir automáticamente, de modo que los desarrolladores puedan tener alternativas cuando descubran que la reproducción automática no puede ocurrir:
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.catch(error => {
// Auto-play was prevented
// Show a UI element to let the user manually start playback
}).then(() => {
// Auto-play started
});
}
porque puede ser disruptivo, consume muchos datos y a muchos usuarios no les gusta . (Porque puede ser disruptivo, consume muchos datos y a muchos usuarios no les gusta).
Descubrí que el H5 que se reproduce automáticamente a menudo se puede ver en WeChat. Sin embargo, el ejemplo de reproducción de video escrito por el autor con reproducción automática y reproducción en línea todavía no se puede reproducir automáticamente en WeChat, pero sí se puede reproducir automáticamente en DingTalk.
| Navegador del sistema | con sonido | sin sonido |
|---|---|---|
| IOS DingTalk | apoyo | apoyo |
| iOSSafari | prohibir | Reproducción automática |
| IOSWeChat | prohibir | prohibir |
Al consultar la información, el desarrollo de IOS WebAPP se basa en el kernel del navegador proporcionado por IOS , por lo que el rendimiento de la reproducción automática se puede modificar en la vista web de WebAPP. DingTalk obviamente admite la reproducción automática, mientras que WeChat prohíbe la reproducción automática, pero proporciona una función integrada. eventos para admitir la reproducción automática:
Reproducción automática a través del evento WeixinJSBridgeReady en WeChat:
document . addEventListener (
'WeixinJSBridgeReady' ,
function ( ) {
video . play ( ) ;
} ,
false
) ; En los navegadores móviles, cuando el usuario hace clic para reproducir o activa la reproducción a través de la API video.play(), el vídeo se verá obligado a reproducirse en pantalla completa en la parte superior. La intención original del diseño puede ser que la pantalla completa pueda proporcionar una pantalla completa. mejor experiencia de usuario, pero a veces los desarrolladores quieren poder controlar si van a pantalla completa para satisfacer otras necesidades.
Si desea lograr una reproducción que no sea en pantalla completa, simplemente agregue el atributoplayinline a la etiqueta de video. Este atributo básicamente no es un problema en los navegadores móviles basados en el kernel de webkit. Si no funciona, simplemente agregue webkit-playsinline :
< video
src = {videoUrl}
webkit-playsinline =" true "
playsinline =" true "
/>Entonces, ¿cómo lidiar con navegadores con otros núcleos? En este momento, es necesario comprender qué navegadores existen actualmente en el mercado.
En primer lugar, necesita conocer los cuatro núcleos de navegadores actuales en el mundo:
en:
Los navegadores de PC domésticos comunes, como UC Browser, QQ Browser, Baidu Mobile Browser, 360 Secure Browser, Google Chrome, Sogou Mobile Browser, Cheetah Browser y mobile UC, QQ, Baidu y otros navegadores móviles, tienen kernels modificados en función de Webkit. Podemos pensar que los usuarios de dispositivos móviles en el mercado básicamente usan kernels webkit o navegadores modificados según el kernel webkit, por lo que la compatibilidad de Playinline es muy buena.
El elemento de video proporciona múltiples eventos de comportamiento para que los desarrolladores controlen la reproducción de video. Los que tienen buena compatibilidad incluyen onended , __ontimeupdate, onplay, onplaying, etc. __Algunos eventos se comportan de manera inconsistente en diferentes navegadores y diferentes dispositivos.
Por ejemplo: monitorear ' canplay ' en ios (si se han almacenado suficientes datos en el búfer para una reproducción fluida) no se activará durante la carga, incluso si __preload="auto" __ es inútil, pero en el depurador de Chrome en la PC a continuación, será activado durante la fase de carga. Es necesario reproducir iOS antes de que se active.
Carga completada:
Haz clic para jugar:
Carga completada:
Haz clic para jugar
Carga completada:
Haz clic para jugar:
Algunos eventos tienen características de visualización inconsistentes en diferentes sistemas, dispositivos y navegadores, así que tenga cuidado al usarlos.
Con controles agregados a este atributo, Gecko proporcionará controles de usuario, lo que les permitirá controlar la reproducción de video, incluido el volumen, el cruce de fotogramas y pausar/reanudar la reproducción.
El atributo de controles especifica que el navegador debe proporcionar controles de reproducción para el video; de lo contrario, los controles de reproducción estarán ocultos, para que los desarrolladores puedan personalizar sus propios controles de reproducción. Ocultar controles de reproducción tiene buena compatibilidad en terminales móviles PC y IOS. Sin embargo, ocultar controles no es compatible con terminales móviles Android, pero aún se puede lograr mediante algunos métodos.
¡El método más complicado es ampliar el vídeo y mover la barra de control fuera del campo de visión para lograr el efecto oculto! De hecho, el elemento de video se hace más grande que el contenedor principal, de modo que la barra de control inferior estará fuera del contenedor principal, y luego el contenedor principal se configura en: overflow: oculto, ¡un método para ocultar los controles de reproducción! La desventaja es que el vídeo se ampliará y es necesario dejar un espacio en blanco con antelación para ampliarlo.
El equipo del kernel x5 del equipo de Android de Tencent ha relajado las restricciones en la reproducción de videos. Los videos no necesariamente llaman a su muy criticado reproductor de video. Usan el atributo __x5-video-player-type="h5" para ocultar elementos de control. Al mismo tiempo __El video ya no está en la parte superior, lo que permite que otros elementos floten en la parte superior .
Después de comprender los escenarios comunes y los errores comunes de la reproducción de video, podemos mejorar la experiencia del usuario brindando las soluciones correspondientes para diferentes escenarios. Por ejemplo, la página H5 que se reproduce automáticamente en el terminal móvil puede activar indirectamente la reproducción de video guiando a los usuarios a hacer clic o deslizarse. Este es el enfoque más conservador, ¡sin errores! Una mejor solución es reproducir automáticamente de forma predeterminada y capturar la situación en la que la reproducción está prohibida, y luego guiar al usuario para que interactúe para lograr la reproducción del video.
usar vídeo En los primeros días, la reproducción de video estaba severamente restringida en el terminal móvil porque implicaba un alto consumo de rendimiento, un alto consumo de tráfico y consideraciones de experiencia del usuario. Sin embargo, con la mejora del rendimiento del teléfono móvil, la llegada de la era del tráfico y la escena más fuerte. requisitos, las restricciones se han relajado gradualmente, mientras que el lado de la PC se ha ido Gradualmente, de la "generación flexible" a la "generación estricta", ambas actualizan constantemente sus estrategias con el fin de brindar a los usuarios una mejor experiencia. En el futuro, es posible que se unifiquen y los desarrolladores puedan comenzar desde la adaptación de compatibilidad subyacente. Libéralo para que tengas más energía para realizar trabajos de mayor nivel.
Si está interesado en nuestro equipo, puede seguir la columna, seguir github o enviar su currículum a 'tao.qit####alibaba-inc.com'.replace('####', '@'). Cualquier persona con ideales elevados puede unirse ~
Dirección original: https://github.com/ProtoTeam/blog/blob/master/201806/1.md
