web-dev-qa-db-ja.com

ループ付きのYouTubeプレーヤーAPI

YouTubeプレーヤーAPIを使用してYouTube動画のループを設定するのに苦労しています。

問題は、ビデオがループの下で実行されていないことです。

これが私のコードです

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();
      }

Loop：1が機能していないようです。また、ビデオの上部から共有とビデオのタイトルを削除する方法があります。

前もって感謝します。

videoyoutubeyoutube-javascript-api
19
Prithviraj Mitra

ビデオが変更されていない場合は、単に行うことができます

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

これは、不必要にビデオをリロードするのを防ぎます

44
DanielM

これは、API IFrameビデオループに使用したものです。 「playlist：VIDEO_ID」パラメータを含める必要があることに気付きました。そしてそれは動作します。これは私の例です

<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

これをonPlayerStateChangeで試してみてください。ある方法で、YouTubeはvideoIDを再度挿入するよう求めています。

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

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

documentation で述べたように、ループを機能させるには playlist パラメータをビデオIDに設定する必要があります。

タイトルなどを非表示にする showinfo パラメータが必要になります。

10
Andrew Dinmore

これを使用して、ビデオを再生するために設定された超低音量のループビデオを作成しました。音量を2から0に変更してミュートできます。

また、動画が再生リストに追加されていることを確認してください。どうやらそれは今問題です。また、コードの再生リストとビデオIDの両方の領域でビデオIDを使用します。

コーダーがないので、余分なステップまたは冗長なステップがあることを確認してください。

私はこれがうまくいくのを知っています。

    <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

Html5プレーヤーなので、ビデオを右クリックするだけで、ループ内で再生できます。

スクリプトから、ビデオの最後で再生するには：

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

2つの時点の間のループ1.66秒：

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)

メディアイベントリスト

HTMLMediaElementリファレンス

0
NVRM

作業ループの例（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