javascript - 如何使用 HTML5 视频标签捕获 NETWORK_NO_SOURCE 错误

Question

如果为 HTML5

根据 this page on the Mozilla Developer Network ，似乎我必须检查视频元素的 networkState 属性以查看是否加载了任何源，因为每个单独的源标记在加载失败时都会抛出自己的错误。

To detect that all child elements have failed to load, check the value of the media element's networkState attribute. If this is HTMLMediaElement.NETWORK_NO_SOURCE, you know that all the sources failed to load.

但是我应该在什么时候检查网络状态？如果我在调用 video_tag.load() 时立即检查，它总是告诉我 networkState 是 NETWORK_NO_SOURCE，即使源元素有效并且视频播放正常。因此，我假设我要等到浏览器尝试了源标记。

这是测试:

var state = this._video_tag.networkState;       
console.log( 'networkState', state );
if( state == this._video_tag.NETWORK_NO_SOURCE )
{
    throw new Error( 'No valid sources' );
}

我已经尝试了以下所有带有无效源标记的视频元素事件:loadstart、loadedmetadata、loadeddata 和错误，结果如下(在 Firefox 中):

• loadstart:已调用但 networkState 为 NETWORK_LOADING
• 加载的元数据:未调用
• 加载数据:未调用
• 错误:未调用

但是，如果我在 Firebug 中检查视频标签，networkState 就像预期的那样是 NETWORK_NO_SOURCE。

我应该使用什么事件来控制何时检查视频标签，或者有​​更好的方法吗？

Answer 1

如果您正在使用源标签，您可以在列表中的最后一个源标签上设置 onerror 属性。参见 the bottom of section 4.8.8 on this page了解更多详情。

引用该引用资料:

If the author isn't sure if user agents will all be able to render the media resources provided, the author can listen to the error event on the last source element and trigger fallback behavior:

<script>
 function fallback(video) {
   // replace <video> with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
</script>
<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</video>

这个例子并不完美，因为当 onerror 属性位于视频标签上时，您无法像获取事件对象那样获取事件对象(仅当视频标签中有 src 属性而不是一系列标签。但是，我相信您可以使用该标签上的 networkState JS 变量从视频标签中检索错误状态。不过我还没有测试过。所以这取决于你。这听起来像我所拥有的这里可能会满足您的需求。

注意事项:

虽然您可以改为监听最后一个源代码标签上的“错误”事件，但我发现这是不可靠的。在 preload 属性未设置为 none 的情况下，我找不到在事件触发之前可靠地为事件添加监听器的方法。这迫使我使用 onerror 属性。

如果您确实找到了一种可靠地监听事件的方法，我想添加此注释。根据this Chromium issue源标签上的错误事件不会冒泡，这意味着您必须在该特定标签上收听它。