Incorpora video in una pagina Web (HTML)

Question

Voglio incorporare un video in una pagina Web.
Non voglio usare il flash perché non è disponibile per un numero enorme di piattaforme.
Sono riluttante a usare HTML5 perché non è ancora troppo standard (È standard, ma la maggior parte delle persone non ha browser che lo supportano)

C'è un altro modo? O dovrei attenermi a HTML5 e un banner ENORME che dice alle persone di aggiornare il proprio browser?

Answer 1

Esistono alcuni modi per combinare video HTML5 con fallback per browser non supportati. Sono state dimostrate alcune soluzioni specifiche.

Un esempio è Video per tutti di Camen Design, conforme a HTML5, e utilizza commenti condizionali per IE e un tag oggetto nidificato per browser meno recenti. Questo dovrebbe essere conforme agli standard, retrocompatibile e a prova di futuro.

Answer 2

HTML 5 non è standard. È una bozza. Probabilmente diventerà standard un giorno. Probabilmente cambierà prima.

Se vuoi incorporare il video in una pagina, almeno oggi Flash è la migliore opzione supportata che hai a disposizione. Fornirei un collegamento a una versione scaricabile normale come opzione per le persone che non hanno Flash (o che vogliono solo guardare il video in un lettore video dedicato).

Dire alle persone di aggiornare il proprio browser non sarà di grande aiuto. Per quanto ne so, l'unico browser con supporto video in una versione stabile è Firefox. Chrome non lo supporta tranne nella versione di sviluppo. Non credo che Opera abbia realizzato una build stabile con supporto. Microsoft certamente non lo ha ancora aggiunto a Internet Explorer. Safari non ne sono sicuro.

Se vuoi davvero evitare Flash, puoi usare un oggetto HTML 4.01.

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

&

# 8230; e spero che l'utente abbia un plug-in in grado di gestire il video installato.

Answer 3

Mi sono appena imbattuto in Cortado . È un'applet Java che riproduce un OGG. Devo davvero ringraziare David Dorward per questo, dato che controllare lo stato di HTML5 mi ha fatto incontrare. Firefox suggerisce di usare qualcosa come:

 <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 è disponibile su ALTRE piattaforme rispetto a Flash e, in questo caso, se si tratta solo di un fallback a HTML5.

( source )

Answer 4

So che è un po 'tardi, ma hai dato un'occhiata a VLC?

Può essere incorporato in un sito Web, funziona su Windows, Mac OS & amp; Linux, è gratuito, open source, supporta molti formati video / audio ...

Lo svantaggio è che non ha una buona interfaccia grafica con funzioni play / pause / set volume / ..., devi crearle tu stesso.

Puoi dare un'occhiata a questo articolo: http: //www.videolan.org/doc/play-howto/en/ch04.html#id310965

Answer 5

Perché pensi che molti siti Web di grandi dimensioni utilizzino Flash per riprodurre video? Probabilmente non a causa della sua indisponibilità ... Naturalmente ci sono alternative per incorporare contenuti video in una pagina Web, ma se la disponibilità è un problema, Flash è il modo migliore per andare al momento.

Answer 6

Ho lavorato su questo problema poiché sono molto interessato a xHtml + RDFa e ho trovato il modo di riprodurre un video in un documento rigoroso xHtml 1.0 sui browser HTML5 senza bloccare non i browser HTML5.

Ho pubblicato un plug-in jQuery qui: https://github.com/charlycoste/xhtml-video

E una demo qui: http://demo.ccoste.fr/video

In realtà, questo è molto meno potente dell'uso di un tag HTML5, ma almeno ... funziona!

La soluzione si basa su javascript e canvas ma può essere degradata con garbo utilizzando <object> tag (è quello che fa il mio plugin jQuery).

Quello che faccio è in realtà semplice:

1. Creo un nuovo elemento video (non un tag) in memoria ma non lo aggiungo al documento DOM:

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

2. Creo un nuovo canvas elemento in memoria ma non lo aggiungo al documento DOM:

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

3. Creo un nuovo img elemento e lo aggiungo 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. Quando il video è in riproduzione (video.play()), lo faccio disegnare ogni fotogramma nell'area di disegno (che non è visibile, perché non aggiunto al DOM - il che rende il DOM valido documento xhtml 1.0)

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

5. Infine, utilizzo il metodo toDataURL() dell'elemento src per ottenere un'immagine codificata base64 per il frame e inserirla nell'attributo canvas.toDataURL('image/jpeg', quality) dell'elemento quality.

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

In questo modo, fai in modo che gli oggetti javascript riproducano un video dal DOM e invii ciascun fotogramma in un elemento <=> DOM. Quindi puoi riprodurre il video utilizzando le funzionalità HTML5 del browser, ma senza la necessità di un documento HTML5.

E se il browser non ha funzionalità HTML5 o se non è in grado di gestire il codec utilizzato, ricadrà sul comportamento nativo <=> (in generale ... il browser cercherà un plug-in come VLC, oppure così via ...)

E se non è possibile riprodurre il video (nessun plug-in per esso), verranno utilizzati i contenuti alternativi forniti all'interno del tag <=>.

Aspetto delle prestazioni: poiché si traduce in un processo che consuma molto, la riproduzione potrebbe sfarfallare ... Per evitare ciò, è possibile ridurre la qualità di rendering utilizzando la compressione jpeg in questo modo: <=> dove <=> è un valore compreso tra 0 e 1.