2012-01-05 12 views
6

[Ver las actualizaciones! - Funciona en navegadores Android/IOS pero en ningún otro lado. FireFox, Chrome, Opera, Safari fallaron. A pesar de que son definitivamente HTML5 etiqueta video listo]Apache + etiqueta de video HTML5 - ¿Qué podría salir mal?

simplemente tratando de transmitir un video usando la etiqueta HTML 5. Todo lo que obtengo son los controles del reproductor de video y nada más. Esto es tan simple que asumí que debería funcionar:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Movie title</title> 
</head> 
<body> 
<video id="movie" preload controls> 
    <source src="test.mp4" /> 
</video> 
</body> 

Entonces, ¿dónde podría estar yendo mal? He intentado mucho más que este pequeño fragmento. Probé fragmentos de ejemplos de otras personas. Probé muchos videos, muchos formatos (mp4, flv, ogg). Intenté verlo en Chrome, Firefox, el navegador de Android incorporado, Opera, IE9.

que puede transmitir el archivo de la URL en programas como VLC, sin ningún problema.

estoy empezando a pensar en Apache 2 podría ser el problema aquí, aunque me imagino que el hecho de que pueda transmitir la URL de VLC, sin problema podría sugerir Apache 2 no es el problema.

Cualquier ayuda apreciada. Estoy tirando de pelo aquí.

Actualización:

  • Siempre que intento y acceder a la URL del directorio de vídeo desde dentro de Chrome me parece dar este error: Recursos interpretarse como otro sino que se transfieren con el tipo MIME definido

  • Ese error es definitivamente un problema del lado del servidor, apache2 no debe configurarse correctamente en alguna parte?

  • Si accedo incluso un directorio de archivos FLV de la URL dentro de mi servidor Apache 2 se da este tipo MIME de error no definido. Es el video el que controla. Cada vez que hago clic en jugar espacia el tipo MIME indefinido varias veces.

Update2:

  • Verified mi .htaccess está siendo leído

  • añade lo siguiente a mi .htaccess:

    AddType video/ogg .ogv

    AddType video/ogg .ogg

    AddType video/mp4 .mp4

  • Todavía no funciona, aún vea el TIPO MIME INDEFINIDO en Chrome.

Update3:

  • Firefox y otros pueden ver la URL/test.mp4 sin problema, pero ninguno puede obtener la etiqueta de video para que funcione correctamente.

Update4:

  • Android puede obtener la etiqueta de vídeo a trabajar ahora. El cambio de .htaccess parecía arreglar eso. Sin embargo, ni un solo navegador de escritorio puede hacerlo por el motivo que sea.
+0

único que puedo ver es una etiqueta HTML de fin de falta, y el 'controls' precarga que no parece estar en la especificación. es decir, la precarga toma uno de cada tres argumentos "auto | metadata | ninguno", parece. – bjarneh

+0

Quité el comando de precarga, no hay diferencia. Parece que CHROME no puede transmitir el mp4 directamente desde la URL/test.mp4. Sin embargo, otros navegadores pueden, como Firefox. Así que ahora siento que vuelvo al primer paso, la etiqueta de video es el problema. – Halsafar

+2

ok, acabo de copiar su configuración, y funciona bien en todos mis navegadores, con un clip webm que descargué de: http://camendesign.com/code/video_for_everybody/test.html. mi configuración de apache es vanilla, está instalada a través de apt-get, nunca modifiqué los archivos de configuración global, no .htaccess dentro de 'public_html' y más. Agregué 'controls =" controls "' a la etiqueta de video. – bjarneh

Respuesta

3

Firefox y Opera no son compatibles con MP4, y Chrome retirará el soporte pronto. También es una buena idea agregar una fuente de WebM.

Trate de añadir el atributo type a la declaración source:

<source src="test.mp4" type="video/mp4"> 
+0

Aunque agregar el tipo no cambió nada. La conversión a WEBM con ffmpeg parecía arreglar todo. Chrome, Opera, Firefox pueden verlo perfectamente ahora. Sin embargo, parece que el navegador Android no funciona con WEBM. Así que agregué dos etiquetas fuente una con webm y la otra con mp4. Esto pareció arreglarlo. Desafortunadamente tendré que guardar dos copias de cada video. De todos modos alrededor de esto? – Halsafar

+0

Me temo que no, y puede culpar a ciertas compañías por no estar de acuerdo con un formato de video que todos apoyarían. Originalmente, la especificación HTML5 hizo que OGG (para audio y video) fuera obligatorio, pero Apple y Nokia se quejaron, por lo que se descartó. También necesitarás MP4 para Safari e IE9 de todos modos. –

0

Aquí está mi código html de mi sitio www.pi-corp.net. Esto permite la reproducción en todos los navegadores comerciales con respaldo a flash.

<div class="video-js-box" style="width: 316px"><br><video class="video-js" width="320" height="240" controls preload autoplay poster="http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png"><source src="http://pi-corp.net/picvideo/PIChmi.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><source src="http://pi-corp.net/picvideo/PIChmi.ogv" type='video/ogg; codecs="theora, vorbis"' /><source src="http://pi-corp.net/picvideo/PIChmi.webm" type='video/webm; codecs="vp8, vorbis"' /> 
     <object id="flash_fallback_1" class="vjs-flash-fallback" width="320" height="240" type="application/x-shockwave-flash" 
     data="flowplayer-3.2.1.swf"><div class="style23"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"playlist":["http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png", {"url":"http://pi-corp.net/picvideo/PIChmi.mp4 
     ","autoPlay":true,"autoBuffering":true}]}' /> <img src="http://pi-corp.net/images/PIC_no_playback.png" width="320" height="240" alt="Poster Image" 
      title="No video playback capabilities." /> </div> </object></video>