wake-up-neo.com

HTML5-YouTube-Video ohne iframe einbetten?

Ist es möglich, eine HTML5-Version eines Youtube-Videos ohne iframe einzubetten?

javascriptjqueryhtml5youtube
35
user2217162

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&amp;hl=en_US&amp;rel=0&amp;autohide=1&amp;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>

18
anapsix

Ja. Youtube API ist die beste Ressource dafür.

Es gibt drei Möglichkeiten, ein Video einzubetten:

  • IFrame bettet mit <iframe>-Tags ein
  • IFrame wird mithilfe der IFrame Player-API eingebettet
  • AS3 (und AS2 *) - Objekt bettet DEPRECATED ein

Ich denke, Sie suchen nach dem zweiten von ihnen:

IFrame bettet mit der IFrame Player API ein

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&amp;rel=0&amp;hl=en_US&amp;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&amp;rel=0&amp;hl=en_US&amp;version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>

(Ersetzen Sie yt-video-id durch Ihre Video-ID.)

JSFIDDLE

8
Ionică Bizău

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.

1
markthethomas

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/

0
jamaco