Incrustar video en la página web (HTML)

Question

Quiero insertar un video en una página web.
No quiero usar flash porque no está disponible para una gran cantidad de plataformas.
Soy reacio a usar HTML5 porque aún no es demasiado estándar (ES estándar, pero la mayoría de las personas no tienen navegadores que lo admitan)

¿Hay alguna otra manera? ¿O debería apegarme a HTML5 y a un GRAN banner que le dice a la gente que actualice su navegador?

Answer 1

Hay algunas formas de combinar video HTML5 con retrocesos para navegadores no compatibles. Se han demostrado algunas soluciones específicas.

Un ejemplo es Video para todos de Camen Design, que se ajusta a HTML5 y utiliza comentarios condicionales para IE y una etiqueta de objeto anidado para navegadores antiguos. Esto debe cumplir con los estándares, ser compatible con versiones anteriores y estar a prueba del futuro.

Answer 2

HTML 5 no es estándar. Es un borrador. Probablemente se convertirá en estándar algún día. Probablemente cambiará primero.

Si desea insertar video en una página, hoy, al menos hoy, Flash es la mejor opción compatible que tiene disponible. Proporcionaría un enlace a una versión descargable regular como una opción para las personas que no tienen Flash (o que solo quieren ver el video en un reproductor de video dedicado).

Decirle a la gente que actualice su navegador no será de gran ayuda. Hasta donde sé, el único navegador con soporte de video en una versión estable es Firefox. Chrome no lo admite, excepto en la versión de desarrollo. No creo que Opera haya sacado una versión estable con soporte. Microsoft ciertamente no lo ha agregado a Internet Explorer todavía. Safari no estoy seguro.

Si realmente desea evitar Flash, puede usar un objeto HTML 4.01.

<object data="myVideo.ogv" type="video/ogg">
  <!-- fallback content here -->
</object>

& # 8230; y espero que el usuario tenga un complemento capaz de manejar el video instalado.

Answer 3

Acabo de encontrarme con Cortado . Es un applet de Java que reproduce un OGG. Realmente tengo que agradecer a David Dorward por esto, ya que verificar el estado de HTML5 me hizo encontrarlo. Firefox sugiere usar algo como:

 <video src="my_ogg_video.ogg" controls width="320" height="240">  
   <object type="application/x-java-applet"  
           width="320" height="240">  
      <param name="archive" value="cortado.jar">  
      <param name="code" value="com.fluendo.player.Cortado.class">  
      <param name="url" value="my_ogg_video.ogg">  
      <p>You need to install Java to play this file.</p>  
   </object>  
 </video>  

Java está disponible para MUCHO MÁS plataformas que flash, y, en este caso, si solo es una alternativa a HTML5.

( fuente )

Answer 4

Sé que es un poco tarde, pero ¿echaste un vistazo a VLC?

Se puede incrustar en un sitio web, se ejecuta en Windows, Mac OS & amp; Linux, es gratuito, de código abierto, admite muchos formatos de video / audio ...

El inconveniente es que no tiene una GUI agradable con las funciones reproducir / pausar / ajustar volumen / ..., debe crearlas usted mismo.

Puede ver este artículo: http: //www.videolan.org/doc/play-howto/en/ch04.html#id310965

Answer 5

¿Por qué crees que muchos sitios web grandes usan Flash para reproducir videos? Probablemente no por su falta de disponibilidad ... Por supuesto, hay alternativas para incrustar contenido de video en una página web, pero si la disponibilidad es un problema, Flash es la mejor opción en este momento.

Answer 6

Trabajé en este problema porque estoy muy interesado en xHtml + RDFa y encontré una manera de reproducir un video en un documento estricto xHtml 1.0 en navegadores HTML5 sin bloquear no navegadores HTML5.

Publiqué un complemento jQuery aquí: https://github.com/charlycoste/xhtml-video

Y una demostración aquí: http://demo.ccoste.fr/video

En realidad, esto es bastante menos potente que usar una etiqueta HTML5, pero al menos ... ¡funciona!

La solución se basa en javascript y el lienzo, pero se puede degradar con gracia mediante el uso de etiquetas <object> (eso es lo que hace mi complemento jQuery).

Lo que hago es realmente simple:

1. Creo un nuevo elemento de video (no una etiqueta) en la memoria, pero no lo agrego al documento DOM:

   var video = document.createElement('video');
   

2. Creo un nuevo canvas elemento en la memoria pero no lo agrego al documento DOM:

   var canvas = document.createElement('canvas');
   

3. Creo un nuevo elemento img y lo agrego al DOM.

   // var parent = ... ;
   // var width = ...;
   // var height = ...;
   var img = document.createElement('img');
   
   img.setAttribute('width', width);
   img.setAttribute('height', height);
   
   parent.appendChild(img);
   

4. Cuando se reproduce un video (video.play()), hago que dibuje cada cuadro en el lienzo (que no es visible, porque no se agrega al DOM, lo que hace que el DOM permanezca válido en el documento xhtml 1.0)

   canvas.getContext("2d").drawImage(video, 0, 0, width, height);
   

5. Finalmente uso el método toDataURL() del elemento src para obtener una imagen codificada en base64 para el marco y ponerla en el atributo canvas.toDataURL('image/jpeg', quality) del elemento quality.

   img.setAttribute('src', canvas.toDataURL());
   

Al hacer esto, haces que los objetos javascript reproduzcan un video fuera del DOM y empujen cada cuadro en un elemento <=> DOM. Para que pueda reproducir el video utilizando las capacidades HTML5 del navegador, pero sin la necesidad de un documento HTML5.

Y si el navegador no tiene capacidades HTML5 o si no puede manejar el códec usado, recurrirá al comportamiento <=> nativo (en general ... el navegador buscará un complemento como VLC, o etc. ...

Y si no hay forma de reproducir el video (sin complemento), se utilizará el contenido alternativo proporcionado dentro de la etiqueta <=>.

Aspecto de rendimiento: dado que da como resultado un proceso que consume mucho, la reproducción puede parpadear ... Para evitar esto, puede disminuir la calidad de representación utilizando la compresión jpeg de esta manera: <=> donde <=> es un valor entre 0 y 1.