javascript - 我应该如何向 videojs 处理的视频注册事件处理程序？

Question

我想向 videojs 处理的视频注册一个事件处理程序，但我无法以可靠的方式选择该元素，因为 videojs 会从 video 标签中删除属性并将它们添加到它所使用的容器元素中。添加。

Answer 1

当每个视频元素 ID 包装在容器 div 内时，

videojs 似乎会向每个视频元素 ID 附加相同的后缀:_html5_api。引用自 source :

// Update tag id/class for use as HTML5 playback tech

// Might think we should do this after embedding in container so .vjs-tech class

// doesn't flash 100% width/height, but class only applies with .video-js parent

tag.id += '_html5_api';

因此，有人会认为，一个微不足道的修复将是这样的:

var vid = document.getElementById("ORIGINALVIDEOID_html5_api")

当然，这种黑客攻击缺乏可靠性，因为这个后缀可能在未来的版本中发生变化。然而，将来不太可能改变的一件事是包装器 div 中存在 video 元素(尽管具有不同的 ID)。

因此，获取视频元素本身的更可靠方法是(假设视频标签 ID 为“cool”) :

videojs("cool").ready(function(){
    // Approach 1
    var video1 = this.contentEl().querySelector("video");
    console.log("video1");
    console.log(video1);
    // Approach 2
    var video_id = this.contentEl().querySelector("video").getAttribute("id");
    var video2 = document.getElementById(video_id);
    console.log("video2");
    console.log(video2);
    // Not really needed, but here is a test that both approaches yield the same result
    console.log("video1 === video2 ?")
    console.log(video1===video2)
})

在 Firefox 中产生:

我在上面的脚本中包含了两种方法:一种是直接的，一种是间接的(通过文档并使用获取的 ID)。当然，您可以使用您想要的 video1 和 video2 中的任何一个。

---

这里需要注意一些事项:

• 这仅在 videojs().ready() 函数内部有效；这是一种 100% 确定播放器已加载的方法
• contentEl() 返回包装器 div，然后在其上使用 querySelector() 来访问视频元素。