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

Question

我想创建一个自定义的 youtube 进度条。我做了一些东西，但它没有按应有的方式工作。我希望它像 YouTube 的进度条一样流畅运行，而不是像我的那样每秒更频繁地更新，并且从 0 到 100%，现在我的停止在 98%。我还希望 preogressbar 在视频暂停时停止，并在视频再次播放时再次工作。

进度条

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