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服务器向我的HTML5视频添加动态字幕（addTextTrack）。一切正常，但这是实际问题：

我希望能够使用youtube API执行所有这些操作：

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

但不能执行上面列出的许多操作，因为youtube提供了一个可以使用的iframe。

现在最后一点，我很欣赏不使用jQuery或大型库的解决方案，因为最后，我建议客户自己使用API，而且我不想强迫它们使用大型库。谢谢。

Answer 1

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

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

Answer 2

您可以使用这个非常棒的 Plyr 包并通过以下方式安装： npm ， bower ， Ember 或使用 CDN

它是语义（<video>标签）
响应
Youtube和Vimeo
用“vanilla”JavaScript编写（没有库依赖项）

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

到现在为止，我觉得这是最好的选择:)希望对你有帮助。

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

2 个答案: