我应该如何将视频处理程序注册到由videojs处理的视频？

Question

我想为videojs处理的视频注册事件处理程序，但我不能以可靠的方式选择元素，因为videojs从视频标记中删除属性并将它们添加到容器元素中增加了。

Answer 1

videojs 似乎在每个视频元素ID中附加相同的后缀：_html5_api，当它被包装在容器div中时。引自source：

  

//更新标记ID /类以用作HTML5播放技术

     

//可能认为我们应该在嵌入容器后执行此操作，以便.vjs-tech class

     

//不会闪烁100％宽度/高度，但类仅适用于.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()来访问视频元素。

Answer 2

其他答案正在尝试在播放器中获取视频元素，但这是有缺陷的，因为播放器技术可能不是视频元素，例如Flash技术。您应该使用video.js API来收听将从技术中浮出的事件。

var player = videojs("id");
player.on('play', function() {…});