javascript - 使用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/