从iframe标记获取嵌入式YouTube播放列表视频的当前时间戳

Question

我已经在自己的网站上嵌入了youtube视频（这是一个播放列表链接），我想获取用户正在播放视频时的视频时间戳。 youtube视频嵌入到我的网站中为：

<iframe src="//www.youtube.com/embed/eykoKxsYtow?list=PLeo1K3hjS3usILfyvQlvUBokXkHPSve6S" width="560" height="314" allowfullscreen="allowfullscreen"></iframe>

现在播放此视频时，我想获取视频的当前时间戳。我想将其存储在数据库中，以便下次用户登录我的网站时可以开始播放视频。如何使用Javascript执行此操作？

这是我尝试过的。

ytplayer = document.getElementsByTagName("iframe")[0];
ytplayer.getCurrentTime();

抛出错误：

VM1406:1 Uncaught TypeError: ytplayer.getCurrentTime is not a function
    at <anonymous>:1:10

一旦获得了时间戳，现在我还想将视频设置为该用户再次登录的时间戳。如何使用Javascript设置视频位置？

我需要完整的工作代码，youtube API很难理解。

Answer 1

您可以尝试一下，效果很好。

将其放入您的html文件。

<div id="player"></div>

现在从iframe标签获取视频的链接

let url = document.getElementsByTagName('iframe').src;

从链接获取视频的ID

function youtube_parser(url){
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    var match = url.match(regExp);
    return (match&&match[7].length==11)? match[7] : false;
}
let video_id = youtube_parser(url);

一旦获得了video_id，现在就可以开始使用了。

<script>
      // This code loads the IFrame Player API code asynchronously.
      let tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      let firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


      // This function creates an <iframe> (and YouTube player) after the API code downloads. 
      // player is a global variable
      let player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '360',
          width: '640',
          videoId: video_id,
          events: {
            'onReady': onPlayerReady,
          }
        });
      }
</script>

现在您可以使用player变量进行ajax调用，此变量类似于您可以使用此变量处理所有与视频相关的事件的javascript video player元素。

function onPlayerReady(event) {
    $.ajax({
        //make ajax call to get the timestamp of the video fro the database, if the user has watched this video.
        event.target.playVideo();
    });
}

let interval = setInterval(function(){
    $.ajax({
        // Make AJAX call to store the timestamp of video already watched at regular time intervals
    });
}, time_interval);