Einbetten von video in web-Seite (HTML)
-
05-07-2019 - |
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?
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:
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');
Ich erstellen Sie eine neue
canvas
element im Speicher aber ich nicht hinzufügen es an das DOM-Dokument:var canvas = document.createElement('canvas');
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);
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);
Schließlich verwende ich die
toDataURL()
Methode dercanvas
element zu erhalten, die eine base64-codierte Bild für den Rahmen und stellen Sie es auf diesrc
Attribut desimg
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.