标记都不可播放,我想显示一个错误
根据,似乎我必须检查视频元素的networkState属性,以查看是否加载了任何源,因为每个单独的源标记在加载失败时都会抛出自己的错误
要检测所有子元素加载失败,请检查媒体元素的networkState属性的值。如果这是HTMLMEDIALEMENT.NETWORK\u NO\u源,则您知道所有源都未能加载
但我应该在什么时候检查网络状态?如果我在调用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&error,结果如下(在Firefox中):
- loadstart:已调用,但networkState为网络\正在加载
- loadedmetadata:未调用
- loadeddata:未调用
- 错误:未调用
但是,如果我在Firebug中查看视频标签,networkState就像预期的那样是NETWORK\u NO\u SOURCE
我应该用什么事件来控制何时检查视频标签,或者有更好的方法吗?我用这个来检查视频的网络状态。这是取自W3CHTML5官方页面()
功能失败(e){
//视频播放失败-显示说明原因的消息
开关(如target.error.code){
案例e.target.error.MEDIA\u ERR\u中止:
警报('您中止了视频播放');
打破
案例e.target.error.MEDIA\u ERR\u网络:
警报(“网络错误导致视频下载部分失败”);
打破
案例e.target.error.MEDIA\u ERR\u解码:
警报('由于损坏问题或您的浏览器不支持使用的视频功能,视频播放被中止');
打破
案例e.target.error.MEDIA\u ERR\u SRC\u不受支持:
警报('由于服务器或网络故障或格式不受支持,无法加载视频');
打破
违约:
警报('发生未知错误');
打破
}
}
如果使用源标记,则可以在列表中的最后一个源标记上设置onerror属性。有关更多详细信息,请参阅
引用该参考文献:
如果作者不确定用户代理是否都能够呈现
提供媒体资源后,作者可以收听上的错误事件
最后一个源元素和触发器回退行为:
<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>
功能回退(视频){
//替换为其内容
while(video.hasChildNodes()){
if(HTMLSourceElement的video.firstChild实例)
video.removeChild(video.firstChild);
其他的
video.parentNode.insertBefore(video.firstChild,video);
}
video.parentNode.removeChild(视频);
}
...
这个例子并不完美,因为当onerror属性位于视频标签上时,您无法获得事件对象(只有在视频标记中有src属性而不是一系列标记时,这才有效。但是,我相信您可以使用该标记上的networkState JS变量从视频标记中检索错误状态。不过,我还没有测试过。因此,这取决于您。听起来我这里的内容可能会让您的nee满意ds
注:
虽然您可以在最后一个源标记上侦听“error”事件,但我发现这是不可靠的。在preload属性未设置为none的情况下,我无法找到可靠的方法在事件激发之前为事件添加侦听器。这迫使我使用onerror属性
如果您确实找到了可靠地侦听事件的方法,我想添加此注释。根据源标记上的错误事件不冒泡,这意味着您必须在该特定标记上侦听它。不会调用“错误”事件,因为它是由内部元素触发的,并且要使事件也在el上触发因此,必须使用addEventListener方法,并将useCapture参数设置为true,如下所示:
video.addEventListener('error', callback, true);
然后在回调中,您可以检查networkState属性,如果视频无法播放源,则该属性将成为NETWORK\u NO\u源
查看MDN中关于addEventListener和useCapture参数的文档
在FF中,视频元素和源元素的e.target.error都未定义。:/@longilong如果您在媒体元素上使用的是标记而不是src=“”属性,则此解决方案将无法工作。
video.addEventListener('error', callback, true);