使用JS控制嵌入的YouTube视频

Question

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

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

感谢。

Answer 1

Plyr.js

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

1. Embedding YouTube视频：

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

2. 获取玩家实例（setup）：

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

3. 处理events并使用methods：

   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/

Answer 2

对于youtube嵌入式，Youtube Iframe播放器API将提供控制/监控嵌入式YouTube视频中的事件所需的大部分功能（请参阅IFrame Player API Reference）。

如果您想获得视频的长度，可以使用player.getDuration()，API documentation可以获得更多详细信息。

关于跟踪栏事件，API不提供监控这些事件的直接方法，但有一种hacky方法可以像This question中提到的那样进行。

实现此目标的另一种方法是使用评论部分中提到的beaver之类的第三方库。

希望这有帮助。