Ist es möglich, eine HTML5-Version eines Youtube-Videos ohne iframe einzubetten?
Hier ist ein Beispiel für das Einbetten ohne iFrame:
<div style="width:100%;height:100%;width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;">
<embed src="http://www.youtube.com/v/GlIzuTQGgzs?version=3&hl=en_US&rel=0&autohide=1&autoplay=1" wmode="transparent" type="application/x-shockwave-flash" width="100%" height="100%" allowfullscreen="true" title="Adobe Flash Player">
</div>
vergleiche mit regulärem iframe "embed" Code von YouTube:
<iframe width="854" height="510" src="//www.youtube.com/embed/GlIzuTQGgzs" frameborder="0" allowfullscreen></iframe>
und so weit wie HTML5 geht, <object>
-Tag wie folgt verwenden (korrigiert):
<object style="width:100%;height:100%;width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;" data="http://www.youtube.com/embed/GlIzuTQGgzs">
</object>
Ja. Youtube API ist die beste Ressource dafür.
Es gibt drei Möglichkeiten, ein Video einzubetten:
<iframe>
-Tags einDEPRECATED
einIch denke, Sie suchen nach dem zweiten von ihnen:
Der folgende HTML- und JavaScript-Code zeigt ein einfaches Beispiel, in dem ein YouTube-Player in das Seitenelement mit dem ID-Wert ytplayer eingefügt wird. Die hier angegebene Funktion onYouTubePlayerAPIReady () wird automatisch aufgerufen, wenn der IFrame Player-API-Code geladen wurde. Dieser Code definiert keine Player-Parameter und keine anderen Event-Handler.
<div id="ytplayer"></div>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE'
});
}
</script>
Hier sind einige Anweisungen wo Sie einen Blick auf die API werfen können.
Ein Einbettungsbeispiel ohne iframe
ist die Verwendung von <object>
-Tag:
<object width="640" height="360">
<param name="movie" value="http://www.youtube.com/embed/yt-video-id?html5=1&rel=0&hl=en_US&version=3"/
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed width="640" height="360" src="http://www.youtube.com/embed/yt-video-id?html5=1&rel=0&hl=en_US&version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>
(Ersetzen Sie yt-video-id
durch Ihre Video-ID.)
Ja, aber es kommt darauf an, was Sie unter "einbetten" verstehen. Soweit ich das beurteilen kann, haben Sie nach dem Durchlesen der Dokumente anscheinend einige Möglichkeiten, um mit der iframe-API zurechtzukommen. Sie können die JavaScript- und Flash-APIs ( https://developers.google.com/youtube/player_parameters ) verwenden, um einen Player einzubetten. Dies erfordert jedoch das Erstellen von Flash-Objekten in Ihrem Code (etwas, das ich persönlich vermeide, aber nicht unbedingt etwas, das man haben muss). Im Folgenden finden Sie einige hilfreiche Abschnitte aus den Entwicklerdokumenten für die Youtube-API.
Wenn Sie all diese Methoden wirklich umgehen und Videos ohne jegliche Art von Iframe einbinden möchten, sollten Sie am besten einen HTML5-Video-Player/eine App erstellen, der/die eine Verbindung zur Youtube Data API ( https: // developer) herstellen kann .google.com/youtube/v3 / ). Ich bin mir nicht sicher, wie umfangreich Ihre Anforderungen sind, aber dies wäre der richtige Weg, wenn Sie wirklich mit iframes oder Flash-Objekten umgehen möchten.
Hoffe das hilft!
Nützlich:
( https://developers.google.com/youtube/player_parameters )
IFrame-Einbettungen mithilfe der IFrame-Player-API
Befolgen Sie die Anweisungen der IFrame-Player-API, um einen Video-Player in Ihre Webseite oder Anwendung einzufügen, nachdem der JavaScript-Code der Player-API geladen wurde. Der zweite Parameter im Konstruktor für den Videoplayer ist ein Objekt, das die Playeroptionen angibt. Innerhalb dieses Objekts identifiziert die Eigenschaft playerVars die Player-Parameter.
Der folgende HTML- und JavaScript-Code zeigt ein einfaches Beispiel, in dem ein YouTube-Player in das Seitenelement eingefügt wird, das den ID-Wert ytplayer hat. Die hier angegebene Funktion onYouTubePlayerAPIReady () wird automatisch aufgerufen, wenn der IFrame Player-API-Code geladen wurde. Dieser Code definiert keine Player-Parameter und auch keine anderen Event-Handler.
...
IFrame-Einbettungen mit Tags
Definieren Sie in Ihrer Anwendung ein Tag, in dem die src-URL den Inhalt angibt, den der Player laden soll, sowie alle anderen Player-Parameter, die Sie festlegen möchten. Die Höhen- und Breitenparameter des Tags geben die Abmessungen des Players an.
Wenn Sie das Element selbst erstellen (anstatt es mit der IFrame-Player-API zu erstellen), können Sie Player-Parameter direkt an das Ende der URL anhängen. Die URL hat folgendes Format:
...
AS3-Objekt bettet ein
Objekteinbettungen verwenden ein Tag, um die Abmessungen und Parameter des Players anzugeben. Der folgende Beispielcode zeigt, wie Sie mithilfe eines eingebetteten Objekts einen AS3-Player laden, der automatisch dasselbe Video wie in den beiden vorherigen Beispielen abspielt.
Verwenden Sie das Objekt-Tag:
<object data="http://iamawesome.com" type="text/html" width="200" height="200">
<a href="http://iamawesome.com">access the page directly</a>
</object>
Ref: http://debug.ga/embedding-external-pages-without-iframes/