reproducir - insertar video en html5
Chrome se cuelga en la página de carga con muchas etiquetas<video> (2)
Tengo una página con muchos elementos <video> en ella organizados uno tras otro.
Vamos a decir 100 por ahora. Cuando hago clic en la página web, Chrome carga los primeros 25 y puedo ver las imágenes de video que se muestran Ok, pero luego se detiene y el resto permanece en negro. También veo que la página aún se está cargando, y veo un mensaje de Chrome que dice "En curso ..." en la parte inferior izquierda de la página.
Usando Firefox, puedo cargar la misma página sin ningún problema. También utilizando IE 11, puedo cargar la misma página sin problemas y todos los videos se muestran bien.
En ninguno de estos casos he reproducido el video todavía. Todo esto es solo esperar a que la página se cargue por completo.
Estoy usando el servidor local de apache en mi PC. La configuración es el software XAMPP. Así que Apache se está ejecutando en mi PC y accedo a mi página utilizando localhost.
Ahora aquí está lo interesante que encontré. Cuando cargo la página usando file: /// C: / URI, y uso la misma página exacta, ¡ahora Chrome muestra todos los elementos de video muy bien! Ninguno de ellos es negro. Todos se muestran bien y puedo jugar sin ningún problema.
El problema solo aparece cuando se usa el servidor apache. Por lo tanto, es un problema de almacenamiento en búfer entre el servidor web y el navegador Chrome.
Sé que es un problema de almacenamiento en búfer, ya que si muevo uno de los videos que aún se muestran en negro y pongo el enlace en la parte superior de la página y vuelvo a cargar la página, entonces ya no es negro y aparece. Nada cambió excepto la posición de la etiqueta <video> . ¿Entonces parece que Chrome tiene un límite de cuántas etiquetas de video puede cargar en una página?
Estoy usando Chrome 36.0.1985.125 en Windows 7.
Intenté cambiar el tamaño del video mostrado usando:
video {
width: 200px !important;
height: auto !important;
}
Pero no importa el tamaño que use en el anterior, todavía cuelga en el mismo lugar.
¿Alguna sugerencia de que hacer? Podría dividir la página web en muchas páginas diferentes como último recurso.
Esto es Windows 7, 64 bit. Los elementos de video que uso son todos iguales. Aquí hay un ejemplo.
<P>
<video width="480" height="385" controls>
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</P>
Como dije, cambiar el ancho y la altura no hace ninguna diferencia.
Miré el archivo de registro de apache (archivo de registro de acceso) y veo unos 206 códigos allí cuando cargo la página de Chrome (206 es contenido parcial). Aquí está el ejemplo de una entrada:
[11/Aug/2014:13:17:25 -0500] "GET /my_notes/movie.webm HTTP/1.1" 206 1768659
"http://localhost/my_notes/index.htm" "Mozilla/5.0 (Windows NT 6.1; WOW64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36"
Cuando cargo la misma página desde firefox y miro el archivo de registro de apache, no veo ningún código 206 allí. De http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html dice:
El servidor ha cumplido con la solicitud parcial de GET para el recurso. La solicitud DEBE haber incluido un campo de encabezado de Rango (sección 14.35) que indica el rango deseado, y PUEDE haber incluido un campo de encabezado de Rango Si (sección 14.27) para hacer que la solicitud sea condicional.
¿Entonces parece que Chrome tiene un límite del video que puede solicitar? ¿Es este un problema conocido con Chrome?
El mismo problema aquí, esta es la mejor manera de solucionarlo.
Reemplazar
<video controls>....</video>
A
<video controls preload="none" controls poster="screen_shot.png">
Encontré una solución que evita este problema de Chrome. Publicar aquí en caso de que alguien más se encuentre con el mismo problema.
Reemplazado todos los
<video controls>....</video>
con
<video preload = "none" controls poster="screen_shot.png">
Lo que se hace arriba es sugerir al navegador que no descargue los videos a menos que uno haga clic en el botón de reproducción, entonces solo se carga ese video específico. Coloca una imagen de póster mientras tanto, para que el espacio esté ocupado por algo y no vacío.
Ahora la página web se carga bien en Chrome.
Chrome tiene un error conocido al crear varias conexiones de socket y no cerrarlas. https://code.google.com/p/chromium/issues/detail?id=234779