it-swarm.com.de

Youtube-Player-API mit Schleife

Ich habe Schwierigkeiten mit dem Einrichten der Schleife für Youtube-Videos mit Youtube Player API.

Das Problem ist, dass das Video nicht unter einer Schleife läuft.

Hier ist mein Code

var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',

          playerVars: {
            'controls': 0,           
            'showinfo': 0,
            'rel': 0,
            'loop': 1

          },
          videoId: 'qzZuBWMnS08',
          events: {
            'onReady': onPlayerReady,
           // 'onStateChange': onPlayerStateChange
          }
        });
      }
function onPlayerReady(event) {
        //  event.target.setLoop(true);
        event.target.playVideo();
      }

Die Schleife: 1 scheint nicht zu funktionieren. Es gibt auch eine Möglichkeit, die Freigabe und den Videotitel vom oberen Rand des Videos zu entfernen.

Danke im Voraus.

17

Wenn sich das Video nicht ändert, können Sie es einfach tun 

onStateChange: 
    function(e) {
        if (e.data === YT.PlayerState.ENDED) {
            player.playVideo(); 
        }
    }

Dies verhindert ein ungewolltes erneutes Laden des Videos

42
DanielM

Dies ist, was ich für die API-IFrame-Video-Schleife verwendet habe. Ich habe bemerkt, dass Sie den Parameter "playlist: VIDEO_ID" angeben müssen. und es funktioniert. Das ist mein Beispiel

<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: 'VIDEO_ID',
      playerVars: {
        playlist: 'VIDEO_ID',
        loop: 1
      }
    });
  }
</script>

11
Ayman

Versuchen Sie dies in Ihrer onPlayerStateChange , auf eine Art und Weise, in der Youtube Sie die Video-ID erneut eingeben soll.

onStateChange: function(e){
    var id = 'qzZuBWMnS08';

    if(e.data === YT.PlayerState.ENDED){
        player.loadVideoById(id);
    }
}
10
Edwin

Wie in documentation angegeben, müssen Sie den Parameter playlist auf die Video-ID setzen, damit die Schleife funktioniert.

Der showinfo -Parameter soll den Titel usw. verdecken.

10
Andrew Dinmore

Ich habe es mir zur Aufgabe gemacht, mir ein Loop-Video mit extrem niedriger Lautstärke für das Abspielen von Videos zu geben. Sie können den Ton stummschalten, indem Sie die Lautstärke von 2 auf 0 ändern. 

Stellen Sie außerdem sicher, dass Ihr Video zu einer Wiedergabeliste hinzugefügt wird. Anscheinend ist das jetzt ein Problem. Verwenden Sie die Video-ID sowohl in Wiedergabelisten- als auch Video-ID-Bereichen im Code.

Ich bin mir sicher, dass ich zusätzliche Schritte oder redundante Schritte als kein Kodierer habe. 

Ich weiß nur, dass das funktioniert.

    <div id="player">
<script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '315',
          width: '600',
          videoId: 'DrrH-YTvVVc',
          playerVars: {
          playlist: 'DrrH-YTvVVc',
          loop: 1      }       ,
   events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
           event.target.setVolume(2);
       event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = true;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
    //      setTimeout(stopVideo, 6000);
                  player.playVideo();
        }
           event.target.setVolume(2);
      }
</script></div>
3
Shonn Piersol

Seit dem HTML5-Player können wir einfach mit der rechten Maustaste auf das Video klicken => in Schleife abspielen.

Vom Drehbuch bis zur Wiedergabe am Ende des Videos:

document.getElementsByClassName('video-stream html5-main-video')[0].loop = true

Schleife 1,66 Sekunden zwischen zwei Zeitpunkten:

const video = document.getElementsByClassName('video-stream html5-main-video')[0]

/* Loop markers in seconds */
let start = 54.34, end = 56

/* Seek to time in seconds */
function seek(time){
  video.loop = true
  video.currentTime = time
  video.play()
}

/* Loop between start and end */
function loop(e){
  if (e.target.currentTime > end){
    seek(start)
  }
}

/* Will loop for 1.66s */
video.addEventListener("timeupdate", loop, false)

/* Seek to 54.34s */
seek(start)

/* Abort the loop */
// video.removeEventListener("timeupdate", loop, false)

/* New loop */
// start = 14; end = 15; seek(start)

Liste der Medienereignisse

HTMLMediaElement-Referenz

0
NVRM

Beispiel für eine Arbeitsschleife (02-2019)

<div id="ytplayer">
<script>
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      width: '640',
      height: '360',

          // 1. Video_Id
          videoId: 'AfAwsdbj04I',

      playerVars: { 
          autoplay: 1,
          loop: 1,
          controls: 0,
          rel: 0,
          modestbranding: 1,

          // 2. Playlist_Id (don't forget "PL")
          playlist: 'PLxWQS97ZR2-_c2eqKxSHxEu7v462-qnYM'

      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }
  function onPlayerReady(event) {
    event.target.setVolume(80);
    event.target.playVideo();
 //  player.mute();
  }
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      player.seekTo(0);
      player.playVideo();
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>
</div>
0
Nucleon