Question

我的HTML页面中嵌入了YouTube视频。我正在尝试获取YouTube视频的当前时间。我用这个问题的答案来创建这样的页面（YouTube currentTime with jQuery）

当我试图显示我收到错误的时间时：'getCurrentTime不是函数'。

HTML

<div style="text-align:center"> 
  <button onclick="playPause()">Play</button> 
  <button onclick="showTime()">Show Time</button>
  <br><br>
  <iframe id = "it"  width="560" height="315" src="https://www.youtube.com/v/FHtvDA0W34I?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
  <br>
  <label id=startHighlighlbl>VideoHighlightStart: </label>
</div>

的JavaScript

<script> 
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        events: {
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
}


function ShowTime() {

    alert(player.getCurrentTime());
} 


</script>

Answer 1

您应该通过YT-API加载视频，因此player已正确初始化，因此可通过API访问。基本上，您需要从HTML中删除iframe，而让YT-API为您创建iframe。

尝试以下方法：

   var tag = document.createElement('script');

   tag.src = "https://www.youtube.com/iframe_api";
   var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

   var player;

   function onYouTubeIframeAPIReady() {
     player = new YT.Player('it', {
       height: '315',
       width: '560',
       videoId: 'FHtvDA0W34I',
       events: {
         'onReady': onPlayerReady,
         'onStateChange': onPlayerStateChange
       }
     });
   }

   function onPlayerReady(event) {
     event.target.playVideo();
   }

   var done = false;

   function onPlayerStateChange(event) {
     if (event.data == YT.PlayerState.PLAYING && !done) {
       setTimeout(stopVideo, 6000);
       done = true;
     }
   }

   function stopVideo() {
     player.stopVideo();
   }

   function ShowTime() {
     alert(player.getCurrentTime());
   }

<body>
  <button onclick="ShowTime()">Show Time</button>
  <br>
  <div id="it"></div>
</body

无法获得youtube视频当前时间

1 个答案: