使用JS控制嵌入的YouTube视频

Posted 2021-04-26

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

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

谢谢。

答案

当涉及到youtube嵌入时，Youtube Iframe Player API将提供控制/监控来自嵌入式YouTube视频的事件所需的大部分功能（请参阅IFrame Player API Reference）。

如果你想获得视频的长度你可以使用player.getDuration()，更多细节可以在API documentation中找到。

关于跟踪栏事件，API不提供监视这些事件的直接方法，但是如This question中提到的那样，有一种hacky方式来执行它。

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

希望这可以帮助。

另一答案

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

Example:

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