web-dev-qa-db-ja.com

Youtube iframe「ループ」が機能しない

YouTubeプレーヤーデモ を使用して、ビデオの自動再生とループ自体に必要なコードを生成しようとしました。ただし、自動再生のみが動作し、ループは発生せず、デモビデオも動作しません。これが私が使ったコードです。

<iframe class="embed-responsive-item" id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?&autoplay=1&loop=1&rel=0&showinfo=0&color=white&iv_load_policy=3" frameborder="0" allowfullscreen>
</iframe>
htmliframeyoutube
51
Seal Blue

ループとともにplaylistパラメーターを追加してみてください。再生リストの場合、現在の動画IDとして値を設定します。

<iframe class="embed-responsive-item"id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?&autoplay=1&loop=1&rel=0&showinfo=0&color=white&iv_load_policy=3&playlist=M7lc1UVf-VE"
      frameborder="0" allowfullscreen></iframe>

現在、loopパラメーターは、playlistパラメーターと組み合わせて使用​​した場合にAS3プレーヤーでのみ機能します。単一のビデオをループするには、ループパラメーター値を1に設定し、プレイリストパラメーター値を、プレーヤーAPI URLで既に指定されている同じビデオIDに設定します。

http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID

リファレンス： https://developers.google.com/youtube/player_parameters#loop

127
K K

受け入れられた答えも私にはうまくいきませんでした。 2018年9月の回避策（ボーナス：JSでハードコーディングする代わりに、#yt-wrapのCSSで幅と高さを設定します）：

<div id="yt-wrap">
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="ytplayer"></div>
</div>

<script>
  // 2. This code loads 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);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      width: '100%',
      height: '100%',
      videoId: 'VIDEO_ID',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
    player.mute(); // comment out if you don't want the auto played video muted
  }

  // 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.
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      player.seekTo(0);
      player.playVideo();
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>
4
LuH

このようにreact nativeを使用して、プレイリストにも同じビデオID値を使用するようにしてください。

例えばvideo idがSpongeBOBの場合、urlは次のようになります：

https://www.youtube.com/embed/SpongeBOB？playlist =SpongeBOB＆loop = 1

以下はreact native webviewの実装です

<WebView
  javaScriptEnabled={true}
  domStorageEnabled={true}
  mediaPlaybackRequiresUserAction={true}
  style={{ height:180, width:300,alignSelf:"center",alignContent:"center"}}
  source={{uri: 'https://www.youtube.com/embed/qD101Xlc5uw?playlist=qD101Xlc5uw&loop=1' }}
 />
3
Abhishek Garg

私はちょうど把握：あなたがループを使用するにはplaylist = ""を持っている必要があります

src = "https://www.youtube.com/embed/peSfCy7HFrM?playlist=peSfCy7HFrM&loop=1;rel=0&autoplay=1&controls=0&showinfo=0" frameborder = "0" allowfullscreen>

2
Lana Đỗ
'playlist': '<?php echo $youtube_video ?>'

playerVars内。

たとえば、完全なコード：

<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:'100%',
          width: '100%',
          fitToBackground: true,  
          videoId: '<?php echo $youtube_video ?>',
          playerVars: { 
              'autoplay': 1, 
              'controls': 0,
              'autohide':1,
              'enablejsapi':1,
              'loop':1, 
              'disablekb':1, 
              'fs': 0, 
              'modestbranding': 0, 
              'showinfo': 0, 
              'color': 'white', 
              'theme': 'light', 
              'rel':0  ,
              'playlist': '<?php echo $youtube_video ?>'
          },
          events: {
            'onReady': onPlayerReady
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
        player.mute();
        player.setVolume(0);
        //player.setSize(1920, 1080);
        player.setLoop(true);
        player.setPlaybackQuality('hd1080');
      }

あなたのHtmlコード：

<div id="player"></div>

ビデオを変数に保持したい場合は、これを使用します：

<?php $youtube_video='C0DPdy98e4c';?>
1
Zakir Sajib