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

Question

我在我的网站上嵌入了一个 youtube 视频（这是一个播放列表 link），我想在用户播放视频时获取视频的时间戳。 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 标签

获取视频的 link

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

从 link

获取视频的 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 element，您可以使用此变量处理所有视频相关事件。

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

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

Get current timestamp of embedded youtube playlist videos from the iframe tag

javascript

youtube

youtube-api

youtube-javascript-api

youtube-iframe-api