使用JS控制嵌入的YouTube视频

Question

我的网页上嵌入了 YouTube 视频。可以用JS来控制吗？

我需要检索视频的总长度并在用户更改轨迹栏位置（或播放期间更改的位置）时获取事件。

Answer 1

Plyr.js

使用Plyr.js，您可以通过简单的 HTML5 媒体播放器控制 YouTube（以及 Vimeo）视频，只需 3 个步骤：

1. 嵌入YouTube 视频：

   <div id="myVideo" data-type="youtube" data-video-id="4IP_E7efGWE"> </div>

2. 获取播放器实例（设置）：

   var videoEl = $('#myVideo').get(), player = plyr.setup(videoEl);

3. 处理事件和使用方法：

   player[0].on('playing', function(event) { var instance = event.detail.plyr; console.log(" >playing"); console.log(" >duration: " + instance.getDuration()); });

例子：

这是一个jsfiddle： https: //jsfiddle.net/beaver71/2g5ggcfa/