Javascript - 向嵌入的 Youtube 内容添加视频元素功能

Question

让我从我已经拥有的开始： HTML5：

<video id= "video" preload=auto autoplay controls>
<source src = "http://www.w3schools.com/html/mov_bbb.mp4">
</video>

JS：

<script>
video.addEventListener("loadedmetadata", start);
var track;
var data;
var currentX, currentY;
function start(){
    data = video.getBoundingClientRect();
    track = video.addTextTrack("captions", "English", "en");
    video.addEventListener("mousemove", movement);         

}
function movement(e){
    currentX = e.clientX, currentY = e.clientY;

}
</script>

如您所见，我有基本的 HTML5 视频元素，我会在其中添加事件并稍后以各种方式进行操作。我对这些事件所做的其中一件事是通过对 Node 服务器的 ajax 调用将动态字幕（addTextTrack）添加到我的 HTML5 视频中。一切正常，但这是实际问题：

我希望能够使用 youtube API 完成所有这些事情：

 <iframe width="560" height="315" src="https://www.youtube.com/embed/QtXby3twMmI" frameborder="0" allowfullscreen></iframe>

但不能做上面列出的许多事情，因为 youtube 提供了一个可以使用的 iframe。

最后一件事，我很欣赏不使用 jQuery 或大型库的解决方案，因为最后，我自己向客户建议了一个 API，我不想在他们身上强加大型库。谢谢。

Answer 1

您可以使用这个很棒的 Plyr 软件包并通过以下方式安装它：npm、bower、Ember或使用一个CDN

• 这是语义（<video> 标签）
• 响应式
• 适用于 Youtube 和 Vimeo
• 用“vanilla”JavaScript 编写（无库依赖）

并且总重量小于 60 Kb 完全可以接受。

到目前为止，我认为这是最好的选择 :) 希望对您有所帮助。

Answer 2

您可以使用 youtube 提供的选项，这些选项可用 here 或者如果这些限制您可以 使用youtube-dl 下载视频并将其托管在您的服务器上。然后您就可以像使用其他 html5 视频一样使用它了。

警告：使用 youtube-dl 可能不合法（它违反了 Google 的服务条款）。请先咨询律师。