[Belchart Technology] Informe de prueba del reproductor de pares del kernel del navegador X5
El uso del reproductor de la misma capa no es muy diferente del de los elementos de vídeo normales, excepto que es necesario agregar dos atributos personalizados X5: "X5-Video-Player-Type" y "X5- Reproductor de vídeo" -pantalla completa".
Integremos una página de prueba en el mismo reproductor de capas:
Después de hacer clic en reproducir, el elemento de vídeo ocupa la pantalla completa y la parte del vídeo se muestra en el centro de forma predeterminada:
Según los documentos oficiales, siempre que se modifique el atributo "posición de objeto" del elemento de video, se puede modificar la posición de visualización de la parte del video, pero en realidad el ancho y el alto del video El elemento debe establecerse en el ancho y alto de la pantalla:
El efecto es el siguiente (derecha):
Tenga en cuenta que al configurar la altura del elemento de vídeo en la pantalla altura, debes usar "window.screen.height" en lugar de "documento". elemento de documento. clientheight", debido a que este último no incluye la altura de la barra de navegación, no llenará la pantalla (como se muestra en la imagen de arriba a la izquierda).
Agregue una barra de título a continuación:
Pero haga clic en reproducir para ingresar al estado de pantalla completa. Después de eso, la barra de título desaparece. Dado que los reproductores en la misma capa se pueden cubrir, intente con el posicionamiento absoluto:
La barra de título bloquea el video, pero. hay un degradado negro y los botones izquierdo y derecho (abajo a la izquierda). Documentos oficiales, estos no se pueden eliminar.
Lo siguiente que debe hacer es mover el video hacia abajo para que la interfaz de usuario general sea la misma. antes de ingresar a pantalla completa (arriba a la derecha):
El siguiente paso es agregar otro contenido después del elemento de video:
Sin embargo, después de ingresar al estado de pantalla completa, el elemento de contenido. se mueve hacia arriba (abajo a la izquierda)
Obviamente, la posición de este elemento también debe moverse hacia abajo en la barra de título:
A continuación, intente una respuesta de evento de clic simple:
<. p>En este momento, no hay respuesta al hacer clic en el elemento de contenido después de ingresar al estado de pantalla completa, porque el elemento de video ocupa la pantalla completa y su jerarquía es Alta, lo que bloquea los elementos de contenido. Una vez que conozca el problema, la solución. es simple, simplemente aumente el nivel del elemento principal:Debido a que el estado de pantalla completa del reproductor en la misma capa solo puede especificar una dirección (pantalla vertical predeterminada), por lo tanto, aún estará obligado para jugar en modo vertical En este punto, el efecto general no es el correcto:
Debido a que el ancho y el alto del estado de la pantalla horizontal son exactamente opuestos al estado de la pantalla vertical, la interfaz de usuario se restaurará cuando se active. La pantalla vertical se restaura anormal. Entonces, al ingresar a la pantalla completa, debe juzgar el ancho y el alto. Si el ancho es mayor que el alto, cambie:
Si la página tiene una barra de desplazamiento antes de reproducir. , ¿se puede desplazar en pantalla completa? Es mejor decir que se está desplazando que fluctuando. Puede probarlo usted mismo para obtener el efecto específico. En resumen, después de ingresar al estado de pantalla completa, no use el desplazamiento de página, sino el desplazamiento parcial. Otra cosa a tener en cuenta es que debido a que se aumenta el nivel, si el elemento de contenido es demasiado alto, bloqueará la barra de control de video.
El último problema es al reproducir algunos formatos de video. , la barra de progreso estará desordenada e incluso volverá al modo de pantalla no completa
Este artículo también se publicó en el blog personal del autor: Informe de prueba del jugador X5 | >.