使用Youtube iframe api和jquery的Youtube自定义进度条不起作用

Question

我想创建一个自定义的youtube进度条。我做了一些东西，但它没有正常工作。我希望它能像YouTube的进度条一样平稳运行，更频繁地更新，而不是像我的那样每秒钟更新一次，从0到100%，现在我的进度停止在98%。此外，我希望在视频暂停时停止预进度条，并在视频再次播放时再次工作。

Progressbar

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

试试这个解决方案：

演示+代码

以及完整的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();
}