Youtube使用YouTube iframe api和jquery不工作的自定義progressbar

Question

我想創建一個自定義的youtube progressbar。我做了一些事情，但它沒有按照應有的方式工作。我希望它像YouTube的進度條一樣平穩運行，不是像我一樣每秒更新一次，而是從0到100％，現在我的98％停止。另外，我希望前進行欄在視頻暫停時停止，並在再次播放視頻時再次運行。

進度

function progress(percent, $element) { 
var progressBarWidth = percent * $element.width()/100; 

// $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% "); 

$element.find('div').animate({ width: progressBarWidth }); 
} 

進度CSS

#progressBar { 
width: 960px; 
height: 6px; 
background-color: #444444; 
display: none; 
margin-top: 1px; 
} 

#progressBar div { 
height: 100%; 
width: 0; 
background-color: #ffffff; 
} 

YouTube的iframe中API

// 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: '540', 
width: '960', 
videoId: 'UDxzMcCrOyI', 
playerVars: { 'showinfo': 0, 'modestbranding': 1, 'rel': 0, 'iv_load_policy': 3 } 
}); 
} 

當我按下一個按鈕，視頻被顯示，並且還進度條。視頻正在自動播放。

$('#ytplayer').show(0, function() { 
player.playVideo(); 

$('#progressBar').show(); 




var playerTotalTime = player.getDuration(); 

mytimer = setInterval(function() { 
var playerCurrentTime = Math.round(player.getCurrentTime()); 

var playerTimeDifference = (playerCurrentTime/playerTotalTime) * 100; 
var playerTimePercent = Math.round(playerTimeDifference); 

console.log(playerTimePercent); 

progress(playerTimePercent, $('#progressBar')); 
}, 1000); 



}); 

Answer 1

嘗試這種解決方案：

demo + code

並全面JS代碼：

function progress(percent, $element) { 
    var progressBarWidth = percent * $element.width()/100; 

// $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% "); 

    $element.find('div').animate({ width: progressBarWidth }); 
} 

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('ytplayer', { 
     height: '540', 
     width: '960', 
     videoId: 'UDxzMcCrOyI', 
     playerVars: { 
     'controls' : 0, 
     'modestbranding' : 1, 
     'rel' : 0, 
     'showinfo' : 0 
     }, 
     events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
     } 
    }); 
} 

// 4. The API will call this function when the video player is ready. 
function onPlayerReady(event) { 
    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. 

function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING) { 

     $('#progressBar').show(); 
     var playerTotalTime = player.getDuration(); 

     mytimer = setInterval(function() { 
     var playerCurrentTime = player.getCurrentTime(); 

     var playerTimeDifference = (playerCurrentTime/playerTotalTime) * 100; 


     progress(playerTimeDifference, $('#progressBar')); 
     }, 1000);   
    } else { 

     clearTimeout(mytimer); 
     $('#progressBar').hide(); 
    } 
} 



function stopVideo() { 
    player.stopVideo(); 
}