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 视频元素，我向其添加事件并稍后以各种方式进行操作。我对这些事件所做的其中一件事是通过对节点服务器的 ajax 调用向我的 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

你可以使用这个很棒的 Plyr 通过以下方式打包并安装:npm、bower、Ember 或使用 CDN

• 它是语义的(<video> 标签)
• react 灵敏
• 对于 Youtube 和 Vimeo
• 用“vanilla”JavaScript 编写(无库依赖)

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

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