Question

我有一个video元素和一个通过jQuery将onplay处理程序附加到视频的脚本：

<video id="vid" />
<!-- ... -->
<script type="text/javascript">
    $('#vid').on('play', function () {
        $(this).addClass('playing');
    });
</script>

根据this answer,，用户可以在加载脚本之前与视频播放器进行交互。但是我需要确保在可以触发onplay事件之前附加我的事件处理程序。

为了对此进行测试，我在调用video的{{1}}后面添加了一个脚本。处理程序在除WebKit之外的所有主要浏览器上运行，WebKit根本不播放视频。即使在play()函数中包装jQuery语句，仍然可以在$().ready()之前附加处理程序。

是否可以保证我的脚本永远不会错过HTML5视频中的任何事件？这同样适用于所有DOM事件吗？如果我在脚本中添加onplay该怎么办？

Answer 1

在这种情况下，竞争条件曾经是可能的：

<video autoplay src="…"></video>
<script>alert("wait!")</script>
<script>$('video').on('play',…)</script>

但是，规范已经改变以缓解这个问题。现在浏览器应该queue firing of events until next event loop run，而不是立即触发它们。

如果附加事件处理程序的脚本是紧跟在<video>之后的内联脚本，运行而不等待用于DOMReady，则竞争条件不会发生在兼容的浏览器。

如果您使用外部或异步脚本，等待DOMReady，使用setTimeout或同步XHR，那么您可能会错过这些事件，因为这些事情可能导致事件循环被处理（尽管我不是100％确定网络停顿是否允许浏览器处理事件循环。）

我不知道WebKit是否已更新以支持更安全的行为。如果您仍然遇到问题，那么即使立即触发事件，您也可以使用有效的方法：

使用内联事件处理程序：
```
<video onplay="…">
```
以编程方式（document.createElement('video')）创建元素，并在插入文档之前附加处理程序。

Answer 2

确保使用RequireJS的最佳方法是确保在需要时以正确的顺序嵌套，或者使用RequirePlugin for RequireJS。

现代化者。

我的脚本执行之前可以触发DOM事件吗？

2 个答案: