Einbetten von video in web-Seite (HTML)

StackOverflow https://stackoverflow.com/questions/1200719

Frage

Ich möchte einbetten Sie ein video in eine Webseite.
Ich will nicht zu verwenden, weil flash nicht verfügbar ist für eine Vielzahl von Plattformen.
Ich bin zurückhaltend mit HTML5 becase es ist nicht zu standard noch (Es IST standard, aber die meisten Menschen haben nicht den Browsern, die dies unterstützen)

Gibt es eine andere Möglichkeit?Oder sollte ich stick auf HTML5 und einem GROßEN banner den Leuten zu erzählen, um ein upgrade Ihrer browser?

War es hilfreich?

Lösung

Es gibt ein paar Möglichkeiten, HTML5-Video mit Fallbacks für nicht-unterstützende Browser zu kombinieren. Einige spezifische Lösungen wurden demonstriert.

Ein Beispiel ist Video für Jedermann von Camen Entwurf, der HTML5 entspricht, und verwendet bedingte Kommentare zu IE und ein verschachtelter Objekt-Tag für älteren Browser. Dies sollte standardkonforme, rückwärtskompatibel und zukunftssicher.

Andere Tipps

HTML 5 ist nicht Standard. Es ist ein Entwurf. Es wird wahrscheinlich Standard eines Tages. Es wird wahrscheinlich zuerst ändern.

Wenn Sie Video in eine Seite einbetten möchten dann, heute zumindest ist die beste Flash-unterstützte Option, die Sie zur Verfügung haben. Ich würde für die Menschen einen Link zu einer regelmäßigen Download-Version als Option zur Verfügung stellen, die nicht über Flash verfügen (oder wer will nur das Video in einem eigenen Video-Player sehen).

Menschen erzählen ihren Browser aktualisieren wird viel nicht helfen. Soweit ich weiß, ist der einzige Browser mit Video-Unterstützung in einer stabilen Version Firefox. Chrome unterstützt es nicht, außer in der Entwicklungsversion. Ich glaube nicht, Opera hat einen stabilen Aufbau mit Unterstützung herausgebracht. Microsoft hat hinzugefügt sicher es noch nicht zu Internet Explorer. Safari Ich bin mir nicht sicher.

Wenn Sie wirklich Blitz vermeiden wollen, dann können Sie ein HTML 4.01-Objekt verwenden. 

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

... und hoffen, dass der Benutzer eine Plug-in der Lage, hat das Video installierte Handhabung.

Ich habe gerade kommen über Cortado . Es ist ein Java-Applet, das eine OGG spielt. Ich muss actualy danken David Dorward für diese, da ich über sie Kontrolle auf HTML5 Status gemacht kommen. Firefox schlägt vor, mit so etwas wie: 

 <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 ist weit mehr Plattformen als Blitz zur Verfügung, und in diesem Fall, wenn nur ein Rückfall auf HTML5.

( Quelle )

Ich weiß, es ist ein bisschen spät, aber haben Sie einen Blick auf VLC?

Es kann in einer Webseite eingebunden wird, läuft auf Windows, Mac OS und Linux ist kostenlos, Open Source, unterstützt eine Vielzahl von Video / Audio-Format ...

Der Nachteil ist, dass es nicht eine schöne GUI mit Play / Pause / set Volumen / ... Funktionen hat, müssen Sie sie selbst erstellen.

Sie können in diesem Artikel einen Blick: http: //www.videolan.org/doc/play-howto/en/ch04.html#id310965

Warum denken Sie viele große Websites Flash-Video verwenden zu spielen? Wahrscheinlich nicht, weil es Unverfügbarkeit ist ... Natürlich gibt es Alternative Video-Content in einer Web-Seite einbetten, aber wenn die Verfügbarkeit ein Problem, Flash ist der beste Weg, im Moment zu gehen.

Ich arbeitete an diesem problem, da ich sehr interessiert bin xHtml+RDFa und ich einen Weg gefunden, zu spielen, ein video in ein xHtml 1.0 strict Dokument auf HTML5-Browsern, ohne zu blockieren, die nicht HTML5-Browser.

Veröffentlicht habe ich ein jQuery-plugin hier: https://github.com/charlycoste/xhtml-video

Und eine demo hier: http://demo.ccoste.fr/video

Tatsächlich, das ist ganz weniger leistungsfähig als die Verwendung eines HTML5-tag, aber zumindest ist...es funktioniert!

Die Lösung basiert auf javascript und canvas kann aber anmutig durch die Verwendung von degradierten <object> tags (das ist, was mein jQuery-plugin does).

Was ich Tue, ist eigentlich einfach:

  1. Erstelle ich eine neue video element (kein tag) im Speicher aber ich nicht hinzufügen es an das DOM-Dokument:

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

  2. Ich erstellen Sie eine neue canvas element im Speicher aber ich nicht hinzufügen es an das DOM-Dokument:

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

  3. Ich erstellen Sie eine neue img element und Ich füge es der DOM.

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

img.setAttribute('width', width);
img.setAttribute('height', height);

parent.appendChild(img);

  4. Wenn das video abgespielt wird (video.play()), Mache ich es zu zeichnen, jedes Bild in der Leinwand (die nicht sichtbar ist, weil nicht Hinzugefügt, um die DOM - das macht den DOM bleiben gültigen xhtml-1.0-Dokument)

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

  5. Schließlich verwende ich die toDataURL() Methode der canvas element zu erhalten, die eine base64-codierte Bild für den Rahmen und stellen Sie es auf die src Attribut des img element.

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

Indem wir dies tun, stellen Sie die javascript-Objekte spielen Sie ein video aus dem DOM-und push-jeder frame in einem img DOM-element.So können Sie spielen die video mit HTML5-Fähigkeiten des browser, aber mit keine Notwendigkeit von einem HTML5 Dokument.

Und wenn der browser kein HTML5-Funktionen oder, wenn es nicht mit den verwendeten codec, wird wieder auf die native <object> Verhalten (in der Regel...der browser sucht nach einem plugin wie VLC oder so...)

Und wenn es keine Möglichkeit gibt, die Wiedergabe der video - (kein plugin dafür), die alternative Inhalte, die innerhalb der <object> - tag verwendet werden.

Performance-Aspekt:als das Ergebnis ein sehr hoher Anspruch, der der Wiedergabe flimmert...Um dies zu vermeiden, kann eine Verringerung der rendering-Qualität, die durch eine jpeg-Komprimierung auf diese Weise : canvas.toDataURL('image/jpeg', quality) wo quality ist ein Wert zwischen 0 und 1.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top