HTML 5 视频。使用源元素而不是 attr 返回播放错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15898511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML 5 Video. Returning playback error with source element instead of attr
提问by sidarcy
I'm looking to add some error handling to a simple HTML5 video element. Im using this chunk of code which appears everywhere online:
我希望为一个简单的 HTML5 视频元素添加一些错误处理。我使用这块在网上随处可见的代码：
JS
JS
function playbackFailed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert('You aborted the video playback.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
alert('A network error caused the video download to fail part-way.');
break;
case e.target.error.MEDIA_ERR_DECODE:
alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
break;
default:
alert('An unknown error occurred.');
break;
}
}
HTML
HTML
<video id="a" src="tgif.vid" autoplay controls onerror="playbackFailed(event)" poster="http://img.rasset.ie/000736d2-512.jpg" width="620" height="400"></video>
Above works fine and I get a snappy alert box when the page loads.
以上工作正常，当页面加载时我会收到一个活泼的警告框。
However if i dont have a "src" attribute and instead use the <source>tag within the <video>element "onerror(event)" doesn't fire? Example markup:
但是，如果我没有“src”属性而是使用元素“onerror(event)”中的<source>标签<video>不会触发？示例标记：
<video id="b" autoplay controls onerror="playbackFailed(event)" poster="http://img.rasset.ie/000736d2-512.jpg" width="620" height="400">
<source src="tgif.vid">
</video>
Note I've given both videos elements above the ids "a" and "b".
请注意，我已经在 ID“a”和“b”上方提供了两个视频元素。
Can someone explain why in the following code:
有人可以在以下代码中解释原因：
<script>
var a = document.getElementById('a');
var b = document.getElementById('b');
a.addEventListener('error', function(e){alert('error event on a')});
b.addEventListener('error', function(e){alert('error event on b')});
</script>
I only get an alert for "a" and not "b"
我只收到“a”而不是“b”的警报
I need to use the <source>tag as I'll have multiple media type for different devices etc.
我需要使用<source>标签，因为我将为不同的设备等提供多种媒体类型。
Thanks in advance for any answers / comments
提前感谢您的任何答案/评论
S
秒
回答by Joseph
If sources are involved, errors in loading sources must be caught from the <source>elementsthemselves. However, to check if all of the <source>elements failed, check the <video>element's networkStatepropertyif it's NETWORK_NO_SOURCE.
如果涉及源，则必须从<source>元素本身捕获加载源中的错误。但是，要检查是否所有<source>元素都失败，请检查<video>元素的networkState属性是否为NETWORK_NO_SOURCE。
More details on the following here:
有关以下内容的更多详细信息：
Here's a sample codewhen the first source fails to load and outputs an error into the console:
HTML
HTML
<video id="b" autoplay controls poster="http://img.rasset.ie/000736d2-512.jpg" width="620" height="400">
<source src="tgif.vid" />
<source src="http://html5doctor.com/demos/video-canvas-magic/video.mp4" />
<source src="http://html5doctor.com/demos/video-canvas-magic/video.webm" />
<source src="http://html5doctor.com/demos/video-canvas-magic/video.ogg" />
</video>
JS (using handlers to avoid inine scripts)
JS（使用处理程序避免 inine 脚本）
var sources = document.getElementsByTagName('source'),
i;
for (i = 0; i < sources.length; i++) {
(function (i) {
sources[i].addEventListener('error', function (e) {
console.log('Error loading: '+e.target.src);
});
}(i));
}
