Ändern Sie Video-Eigenschaft auf innerhtml eines IFrame

ich dies haben iframe für meine einbetten Youtube Video:Ändern Sie Video-Eigenschaft auf innerhtml eines IFrame

<iframe class="event-video" src="http://www.youtube.com/embed/myvideoid?showinfo=0&autoplay=1&loop=1&playlist=myvideoid&controls=0&modestbranding=1&iv_load_policy=3"></iframe>

I loop=1 Schleife verwenden das Video, aber jedes Mal neu startet es wieder geladen (das Video friert für ein paar Sekunden mit dem "Laden" Gif von Youtube).

Da ich mein Video kontinuierlich (nahtlos) loopen möchte, gefällt mir diese Lösung nicht.

Ich entdeckte, dass wenn ich rechts auf das Video klicke, zeigt es mir eine HTML5-Video-Box mit einigen Optionen, einer von ihnen, um das Video "zu loopen". Wenn ich auf diese Option klicke, ändert sich das video Element auf dem innerenHtml der iframe Eigenschaft, die loop hinzugefügt wird.

Und es löst mein Problem. Das Video wird nicht mehr in jedem Loop neu geladen. Meine Frage ist: Wie kann ich das mit jQuery machen? Gibt es eine sichere Möglichkeit, diese loop Eigenschaft auf video Element von iframe 's innerHtml hinzuzufügen?

Quelle

2016-06-02 Pedro Estevao

die SOP verhindert, dass Sie in irgendeiner Weise in die iframe zu erreichen. Ich schlage vor, dass Sie sich lieber den JS-basierten Player und seine API ansehen - sehen Sie, ob das das 'video' Element direkt in das DOM des Hauptdokuments rendern kann, so dass Sie es auch direkt manipulieren können. – CBroe

Eine andere Idee ist es, YouTube alle zusammen zu überspringen und ein Standard-HTML5-Video zu verwenden. Offensichtlich bedeutet dies Bandbreitenkosten und längere Ladezeiten, aber es würde Ihnen die volle Kontrolle über das Video geben. Sie könnten ein CDN verwenden, um diese Probleme zu vermeiden, aber ja, das ist teuer. Nur ein Gedanke, viel Glück! –

Es gibt keine Möglichkeit dies zu ändern, da das Video nicht auf derselben Domain wie der Code abgespielt wird, was bedeutet, dass Sie nicht auf die Elemente innerhalb dieses Iframes zugreifen können. Sie können jedoch die JS-API von youtube verwenden Dein Video, wenn es endet.

Dieser Code wird die „Schleife“ -Attribut auf den <video> Element innerhalb des iframe nicht hinzufügen, aber es wird Ihnen die Loop-Funktion geben, die Sie suchen (ohne das Video neu zu laden, nur um es von Anfang an spielen):

<!doctype html> 
 
    <html lang="en"> 
 
     <head> 
 
      <meta charset="utf-8"> 
 
      <title>Test</title> 
 
      <script src="http://www.youtube.com/player_api"></script> 
 
     </head> 
 
     <body> 
 
     <div id="player"></div> 
 
     <script type="text/javascript"> 
 
      var player; 
 
      function onYouTubeIframeAPIReady() { 
 
       player = new YT.Player('player', { 
 
        height: '390', 
 
        width: '640', 
 
        videoId: 'M4Xrh8OP1Jk', 
 
        events: { 
 
        'onReady': onPlayerReady, 
 
        'onStateChange': onPlayerStateChange 
 
        } 
 
       }); 
 
      } 
 

 
      function onPlayerReady(event) { 
 
       event.target.playVideo(); 
 
      } 
 

 
      function onPlayerStateChange(event) { 
 
       console.log(event.data) 
 
       if (event.data == YT.PlayerState.ENDED) { 
 
        event.target.playVideo(); 
 
       } 
 
      } 
 
     </script> 
 
    </body> 
 
</html>

Quelle

2016-06-08 01:34:34 Dekel

Danke. Es funktioniert, aber leider blinkt es, wenn das Video "neu gestartet" wird. Es ist nicht 100% nahtlos, vielleicht 99%, aber das 1% stört mich immer noch. Aber da meine Frage war oder nicht möglich sein wird (um den Iframe-Inhalt zu ändern), werde ich diese Antwort akzeptieren. –

Ändern Sie Video-Eigenschaft auf innerhtml eines IFrame

Antwort

Verwandte Themen