JavaScript 中的 Youtube 视频 API

Question

我在 JavaScript 中使用了 YouTube 视频 API

并播放我使用过的暂停和停止事件

现在我得到了总当前时间和总观看时间， 但我的主要问题是：

观看视频几秒钟，然后快进，然后再看几秒钟，看看它记录的时间......如果我看视频 5 秒，然后快进到第 10 分钟，再看 5 秒，我实际观看视频的时间是 10 秒，而不是 10 分钟。

这是我的代码：

function onytplayerStateChange(event) 
{ 
    //alert("Status=>"+event.data); 
    if(event. data == 1) { 
        if(Math.floor(event.target.A.currentTime) == 0) { 
            previous_track_time = current_track_time = 0; 
            total_track_time = event.target.A.duration; 
        } else { 
            previous_track_time = current_track_time; 
            current_track_time = event.target.A.currentTime; 
        } 
    } 
    if(event.data == 2) 
    { 
        current_track_time = event.target.A.currentTime; 
        total_track_time =(event.target.A.duration-(current_track_time-previous_track_time)); 
        previous_track_time = current_track_time; 
    }
} 

你能解决这个问题吗？

Answer 1

如果您只希望用户观看视频的时间，则需要使用计数器。 我还简化了您的代码。

函数onPlayerStateChange：

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        //player play
        timer = setInterval(
          function() {
            seconds++;
            console.log("you watch: "+ seconds +" seconds of the video");
          }, 1000
        );
    } else {
      //player pause
      clearInterval(timer);
    }
}

输出：我只看到了 8 秒的视频，前 4 秒和 2:03 的 4 秒

有一个live example（已更新）

完整代码：

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: '390',
        width: '640',
        videoId: 'l-gQLqv9f4o',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

// 4. The API will call this function when the video player is ready.
var seconds = 0;
var timer;
function onPlayerReady(event) {
    event.target.playVideo();

}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        //player play
        timer = setInterval(
          function() {
            seconds++;
            console.log("you watch: "+ seconds +" seconds of the video");
          }, 1000
        );
    } else {
      //player pause
      clearInterval(timer);
    }
}

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