google-chrome - pagina - html5 en informatica

El video HTML5 no funcionará

Question

Tengo un video como fondo de una página web, y estoy tratando de hacer que funcione. Aquí está el código:

<video autoplay=''true'' loop=''true'' muted=''true''>
<source src=''/admin/wallpapers/linked/4ebc66e899727777b400003c'' type=''video/mp4''></source>
</video>

Aunque le dije al video que se repita, no es así. También intenté que se onended con el atributo onended (de acuerdo con este hilo de soporte de Mozilla , también probé ese bit de jQuery). Nada ha funcionado hasta ahora. ¿Es un problema con Chrome o mi código?

Editar:

Revisé los eventos de la red y HEAD de una copia de trabajo ( http://fhsclock-labs.heroku.com/no-violence ) frente a la aplicación que estoy tratando de poner en funcionamiento. La diferencia es que la copia de trabajo está sirviendo el video de un activo estático en Heroku (a través de Varnish, aparentemente), mientras que el mío está sirviendo desde GridFS (MongoDB).

La pestaña Red del Inspector de Chrome muestra que en mi aplicación, el video se solicita tres veces. Una vez, el estado está "pendiente", el segundo es "cancelado", y el último es 200 OK. La copia de trabajo solo muestra dos solicitudes, el estado está pendiente y el otro es 206 contenido parcial. Sin embargo, después de que el video se reproduce una vez, esa solicitud cambia a "Cancelado" y realiza otra solicitud para ese video. En mi aplicación, eso no sucede.

En cuanto a Type, en mi aplicación, dos son "indefinidos" y el otro "video / mp4" (que se supone que es). En la aplicación de trabajo, todas las solicitudes son "video / mp4".

Además, obtengo el Resource interpreted as Other but transferred with MIME type undefined. advertencias en la consola.

Realmente no estoy muy seguro de dónde comenzar con esto. Creo que el problema está en el lado del servidor, ya que servir el archivo como activos estáticos funciona bien. Podría ser que el servidor no envíe el tipo de contenido correcto. Podría ser un problema con GridFS. No lo sé.

En cualquier caso, la fuente está here . Cualquier idea que puedas ofrecer es apreciada.

Answer 1

Ah, acabo de tropezar con este problema exacto.

Al parecer, el bucle (o cualquier tipo de búsqueda, para el caso) en <video> elementos de <video> en Chrome solo funciona si el servidor de video que entiende las solicitudes de contenido parcial lo envió . es decir, el servidor debe cumplir con las solicitudes que contienen un encabezado "Rango" con una 206 respuesta de "Contenido parcial". Este es incluso el caso si el video es lo suficientemente pequeño para ser completamente almacenado en chrome, y no se realizan más viajes en el servidor: si su servidor no cumplió con la solicitud de Range de Chrome la primera vez, el video no será loopable o buscable .

Así que sí, un problema con GridFS, aunque podría decirse que Chrome debería ser más indulgente.

Answer 2

En caso de que ninguna de las respuestas anteriores lo ayude, asegúrese de que su inspector no se ejecute con la opción Desactivar caché marcada. Como Chrome toma el video de la memoria caché, básicamente funcionará una vez. Acabo de depurar esto durante 20 minutos antes de darme cuenta de que esta era la causa. Como referencia, sé que no soy el único que informa el error de cromo de otra persona .

Answer 3

La solución más simple:

$(''video'').on(''ended'', function () {
this.load();
this.play();
});

El evento ''ended'' se dispara cuando el video llega al final, video.load() restablece el video al principio y video.play() inicia inmediatamente una vez cargado.

Esto funciona bien con Amazon S3, donde no tiene tanto control sobre las respuestas del servidor, y también soluciona los problemas de Firefox relacionados con video.currentTime no se puede establecer si a un video le faltan metadatos de longitud.

JavaScript similar sin jQuery:

document.getElementsByTagName(''video'')[0].onended = function () {
this.load();
this.play();
};

Answer 4

Parece que ha sido un problema en el pasado, hay al menos dos errores cerrados, pero ambos afirman que se solucionó:

http://code.google.com/p/chromium/issues/detail?id=39683

http://code.google.com/p/chromium/issues/detail?id=18846

Como Chrome y Safari usan navegadores basados ​​en webkit, es posible que puedas utilizar algunos de estos métodos alternativos: http://blog.millermedeiros.com/2011/03/html5-video-issues-on-the-ipad-and-how-to-solve-them/

function restartVideo(){
vid.currentTime = 0.1; //setting to zero breaks iOS 3.2, the value won''t update, values smaller than 0.1 was causing bug as well.
vid.play();
}
//loop video
vid.addEventListener(''ended'', restartVideo, false);

Answer 5

Sé que esto no corresponde exactamente a la pregunta formulada, pero si alguien se encuentra con esto cuando tiene un problema similar, asegúrese de tener sus fuentes en orden correctamente.

Estaba cargando un archivo mp4 y webm y me di cuenta de que el video no se estaba reproduciendo en Chrome. Fue porque el archivo webm era la primera source enumerada, por lo que Chrome estaba cargando el archivo webm y no el mp4 .

Espero que eso ayude a otra persona que se encuentre con este problema.

<video autoplay loop>
<source src="/path-to-vid/video.mp4" type="video/mp4">
<source src="/path-to-vid/video.webm" type="video/webm">
</video>

Answer 6

es supercoco pero Dropbox utiliza el código de estado correcto. Así que cargue en dropbox y reemplace el www por dl.

Por lo tanto, usando un dropbox url, el video se reproduce bien.

Answer 7

Mi situación:

Tengo exactamente el mismo problema, sin embargo, cambiar el encabezado del mensaje de respuesta no fue suficiente. Sin bucle, repetición o búsqueda. Además, una parada pura no funciona, pero esa podría ser mi configuración.

Responder:

Según algunos sitios (ya no se podían encontrar), también es posible activar el método load () justo después de que finaliza el video, y antes de que comience el próximo. Eso debería volver a cargar la fuente causando un elemento de video / audio que funciona una vez más.

@John

Tenga en cuenta que sus respuestas / enlaces son errores normales y no se centran en este problema. Usar un servidor / servidor web es lo que causa este problema. Mientras que los errores que estos enlaces describen son de un tipo diferente. Eso también es por qué la respuesta no está funcionando.

Espero que ayude, todavía estoy buscando una solución.