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

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

JS:

video.addEventListener（“loadedmetadata”，开始）；
var轨迹；
var数据；
无功电流x，电流y；
函数start（）{
data=video.getBoundingClientRect（）；
track=video.addTextTrack（“字幕”、“英语”、“英语”）；
video.addEventListener（“mousemove”，运动）；
}
功能运动（e）{
currentX=e.clientX，currentY=e.clientY；
}

如你们所见，我有一个基本的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，我不想强迫他们使用大型库。谢谢。

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

---

警告：使用youtube dl可能不合法（它违反了谷歌的TOS）。请先咨询律师。

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

• 它是语义（
  标记）
• 响应的
• 对于Youtube和Vimeo
• 用“普通”JavaScript编写（无库依赖项）

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

---

到目前为止，我认为这是最好的选择：）希望能帮助你。

你的具体建议是什么，我将通过某种注册方式下载他们需要的所有youtube视频，然后通过视频元素将其流式传输给我的客户？我现在不能做这件事。太多的资源处于危险中。@RunningFromShia我想不出其他方法来实现它。Indeed，那里有一些功能，但我没有找到添加侦听器的方法，例如通过在元素上移动鼠标来获取跳线信息，或者如何添加曲目（addTextTrack）…很抱歉，从我看到的情况来看，我不知道其他方法，它们允许您将我上面提到的事件侦听器添加到非youtube视频中。他们的youtube API仍然只是他们操纵的Iframe，我不认为你可以添加到Iframe事件侦听器中，如字幕和鼠标移动，如果你认为可能的话，也许可以演示一下？我昨天试过了，伙计，但不知道怎么做，Sreys，这可能是因为Iframe有一些限制，不允许你这么做。。。

<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>

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