YouTube API - 設置開始和結束時間之間的循環視頻

Question

我設法在需要的時候開始播放視頻並結束視頻，但有什麼方法可以循環播放嗎？循環選項似乎沒有太大的作用。

小提琴：https://jsfiddle.net/u7nkz292/

代碼：

<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: '360', 
     width: '640', 
     videoId: 'M7lc1UVf-VE', 
      playerVars: { 
     autoplay: 1,  // Auto-play the video on load 
     controls: 0,  // Show pause/play buttons in player 
     showinfo: 0,  // Hide the video title 
     modestbranding: 1, // Hide the Youtube Logo 
     fs: 1,    // Hide the full screen button 
     cc_load_policy: 0, // Hide closed captions 
     iv_load_policy: 3, // Hide the Video Annotations 
     start: 36, 
     end: 45, 
     loop: 1,   // Run the video in a loop 
     autohide: 0   // Hide video controls when playing 
    }, 
    }); 
    } 
</script> 

Answer 1

您可以實現onStateChange回調&負載的視頻具有相同startSeconds & endSeconds參數與loadVideoById：

// 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); 

var videoId = 'M7lc1UVf-VE'; 
var startSeconds = 36; 
var endSeconds = 45; 

// Replace the 'ytplayer' element with an <iframe> and 
// YouTube player after the API code downloads. 
var player; 

var playerConfig = { 
    height: '360', 
    width: '640', 
    videoId: videoId, 
    playerVars: { 
    autoplay: 1, // Auto-play the video on load 
    controls: 0, // Show pause/play buttons in player 
    showinfo: 0, // Hide the video title 
    modestbranding: 1, // Hide the Youtube Logo 
    fs: 1, // Hide the full screen button 
    cc_load_policy: 0, // Hide closed captions 
    iv_load_policy: 3, // Hide the Video Annotations 
    start: startSeconds, 
    end: endSeconds, 
    autohide: 0, // Hide video controls when playing 
    }, 
    events: { 
    'onStateChange': onStateChange 
    } 
}; 

function onYouTubePlayerAPIReady() { 
    player = new YT.Player('ytplayer', playerConfig); 
} 

function onStateChange(state) { 
    if (state.data === YT.PlayerState.ENDED) { 
    player.loadVideoById({ 
     videoId: videoId, 
     startSeconds: startSeconds, 
     endSeconds: endSeconds 
    }); 
    } 
} 

Here是小提琴