<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p> <strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p>Eine vollständige Erklärung auf der Website von Kroc Camen, dem Urheber dieser Technik.
Danke! (
Wirklich schöne Implementierung, das Einfachste, was man bei HTML5-Video vergessen kann, sind die verschiedenen Kodierungsformate für die Videodatei, ansonsten ist es ganz einfach! Danke!
Ich fange gerade erst an, mich mit HTML5-Video zu beschäftigen. Gibt es eine Möglichkeit, ihm Variablen zu übergeben, wie es bei Flash möglich ist? Ein gängiges Szenario für mich ist, ein Video zu haben, das in einer .swf-Datei abgespielt wird, und ich übergebe dynamisch eine Variable, vielleicht den Kundennamen, sodass jede Person, die einem Link zu einer PURL (personalisierten URL) folgt, im Video mit ihrem Namen begrüßt wird. Gibt es eine ähnliche Möglichkeit, dynamische Daten an HTML5-Video zu übergeben?
Steve,
Konnten Sie eine Antwort auf diese Frage finden? Ich möchte genau dasselbe tun wie Sie (d. h. benutzerdefinierte Variablen für Videos übergeben) und war neugierig, ob HTML5-Video die Lösung sein könnte.
hochschieb. Würde auch gerne eine Antwort darauf haben.
Sie stellen die falsche Frage. Die Seite, die das Video anzeigt, könnte Parameter entgegennehmen und etwas anzeigen. Der Videoplayer ist nur für das Video da.
Was ist das beste Videoformat (Datei) für Mobiltelefone (iPhone/Android/WinPhone)?
nicht zum Download, mehr zum Anzeigen im Browser (wie Boat/Firefox/Opera).
Oder gibt es spezielle Konverter oder Parameter?
Es ist möglich, unterschiedliche Videos auf Desktops/iPads und iPhones/Androids usw. über CSS3-Selektoren anzuzeigen. So ist es möglich, die vorhandenen und funktionierenden Videos für Desktops und andere für Mobiltelefone zu erhalten.
Irgendwelche Hinweise / Hilfen?
Vielen Dank für die Antwort.
Großartig… Es funktioniert auch in mobilen Browsern..
Eine Sache, auf die man achten sollte: Die Ressource des
<img>-Tags wird auch bei modernen Browsern heruntergeladen, obwohl sie nicht angezeigt wird.Wenn sie auch als
poster-Attribut verwendet wird (was im obigen Fall nicht der Fall ist), dann geschieht kein Schaden. Wenn nicht, wird sie umsonst heruntergeladen.Hallo,
Vielen Dank für diese klare Erklärung. Eine Frage bleibt mir jedoch: Woher kommt die Datei player.swf? Ich verstehe, dass dies eine Flash-Datei ist, die den Film abspielt. Muss sie für jeden Film neu erstellt werden oder gibt es eine generische Version und wenn ja, wo kann ich sie herunterladen oder muss ich eine Flash-Entwicklungsumgebung kaufen (nicht sehr nützlich für mich...)? Könnten Sie diesen Aspekt bitte etwas genauer erklären?
Danke und Grüße, Paul.
Verwenden Sie einfach eine alte Version (von als sie noch kostenlos war?) von JWPlayer's player.swf oder finden Sie eine andere.
Hello All,
Ich habe kürzlich das obige implementiert, um mich mit HTML5-Video vertraut zu machen. Es funktioniert in allen Browsern, aber nicht auf dem iPad. Die MP4-Datei ist "zuerst" in der Warteschlange. Wenn jemand Licht ins Dunkel bringen könnte, wäre ich sehr dankbar.
Jag
Vielen Dank für den Code, gibt es eine Möglichkeit, den Film automatisch starten zu lassen? Danke AdRog
Fügen Sie einfach `autoplay` nach dem `controls`-Attribut in das Video-Tag ein.
Wirklich großartig... Es funktioniert auch in mobilen Browsern..
Gibt es eine Möglichkeit, dies zum Laufen zu bringen, wenn keine Ogg-Datei verfügbar ist? Ich muss von Flash zu HTML5 für iPad, iPhone usw. zurückfallen und kann keine Frames verwenden. Soweit ich sehe, spielt Firefox das Flash-Video überhaupt nicht ab.
Danke für das Tutorial, ihr solltet euch auch alle Attribute für das Video-Element ansehen, dort beginnt der Spaß erst richtig mit einer Mischung aus jQuery.
Ich möchte nur warnen, dass der Objekt-Fallback im Video-Tag in Firefox einfach nicht funktioniert.
Ich arbeite an einem Projekt für die Offline-Nutzung, bei dem es wichtig ist, das Gesamtgewicht des Projekts so gering wie möglich zu halten. Deshalb habe ich eine Lösung basierend auf dem Code dieses Beitrags ausprobiert, um die Notwendigkeit, eine Ogv-Videodatei zu laden, zu vermeiden.
Wenn Sie HTML5-Video für jeden Browser anzeigen möchten, der MP4-Video unterstützt, und dieselbe Videodatei über Flash in Browsern abspielen möchten, die es nicht unterstützen (Firefox), verwenden Sie diesen Code nicht!: Firefox zeigt den Flash-Player nicht an.
Sie sollten besser die MP4-Unterstützung erkennen (da es möglich ist, dass Firefox eines Tages MP4 unterstützt, wie es bei Opera passiert ist), und dann entweder das Video-Tag oder den Flash-Player-Fallback servieren, je nach Bedarf.
Hallo,
Ich versuche einfach nur, Videos im Web hinzuzufügen. Ich verwende das MP4-Format, aber es wird in Safari nicht angezeigt. Das Lustige ist, dass ich keine Fehlermeldung erhalte. Auf meiner Seite gibt es nur ein Video-Element, und es erscheint zur Laufzeit leer. (Es funktioniert in Safari/Chrome/IE). Mein Code wie unten.
Danke!
http://codepen.io/anon/pen/vEwgBK.html
Das funktioniert jetzt nicht mehr für Safari, richtig?
Gibt es einen neuen Trick für den Safari-Browser?
Entschuldigung für mein Englisch, spanischsprachig
Hallo @Gabriel,
Nachdem ich QuickTime für Safari installiert hatte, funktionierte es. Safari unterstützt das HTML5-Video-Tag mit QuickTime für Windows-Benutzer. Hier finden Sie weitere Details: http://superuser.com/questions/870133/html5-video-tag-not-supported-in-safari-5-1-on-windows-7
Hallo, ich benutze den folgenden Code, um einen 19-Sekunden-Clip abzuspielen. Autoplay funktioniert perfekt auf einem Computer, aber auf Mobilgeräten gibt es einen Play-Button, der angeklickt werden muss, um den Clip zu starten. Gibt es eine Umgehungslösung, um auf Mobilgeräten automatisch abzuspielen?
Vielen Dank im Voraus!
…
<!--
<!--
…