HTML5 비디오 태그로 NETWORK_NO_SOURCE 오류를 잡는 방법

HTML5 < video> 태그에 제공된 < source> 태그 중 어느 것도 재생할 수없는 경우 오류를 표시하고 싶습니다.HTML5 비디오 태그로 NETWORK_NO_SOURCE 오류를 잡는 방법

this page on the Mozilla Developer Network에 따르면,로드가 실패 할 때 각 별도의 소스 태그가 자체 오류를 던집니다 때문에 어떤 소스가로드되었는지 확인하려면 video 요소의 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.

하지만 어느 시점에서 networkState를 확인해야합니까? video_tag.load()를 호출 할 때 즉시 확인하면 원본 요소가 유효하고 비디오가 잘 재생 되더라도 networkState가 NETWORK_NO_SOURCE임을 항상 알려줍니다. 따라서 소스 태그가 브라우저에서 시도 될 때까지 기다려야합니다. 에 Loadstart, loadedmetadata, loadeddata (파이어 폭스)에서 다음과 같은 결과를 & 오류 :

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 :라고하지만 networkState는
loadedmetadata NETWORK_LOADING됩니다 :
loadeddat 호출되지를 A :
오류라고하지 그러나

라고하지, 내가 방화범의 비디오 태그를 체크 아웃 경우 networkState 예상대로 NETWORK_NO_SOURCE이다.

비디오 태그를 확인할 때 어떤 이벤트를 사용해야합니까, 아니면 더 나은 방법이 있습니까?

출처

2012-02-07 voidstate

나는 비디오의 네트워크 상태를 확인하기 위해 이것을 사용했다. 당신이 대신 목록에서 마지막 소스 태그에의 OnError 속성을 설정할 수 있습니다 소스 태그를 사용하는 경우이 공식적인 W3C HTML5 페이지 (http://dev.w3.org/html5/spec/Overview.html#the-video-element)

<script> 
function failed(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; 
    } 
} 
</script> 
<video src="tgif.vid" autoplay controls onerror="failed(event)"></video>

출처

2012-02-07 14:28:11 longilong

는 e.target.error 비디오 소스 두 요소 정의되지 않는다. :/ – voidstate

@longilong 태그를 사용하고 media 요소의 src = ""속성을 사용하지 않는 경우이 솔루션은 작동하지 않습니다. – sidarcy

에서 가져옵니다. 자세한 내용은 the bottom of section 4.8.8 on this page을 참조하십시오. 그 기준에서

인용구 : 당신이처럼의 OnError 속성은 당신이있는 경우에 작동하는 (비디오 태그에 때 이벤트 객체를하지 않기 때문에

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>

이 예는없는 완벽 일련의 태그 대신 video 태그의 src 속성을 사용할 수 있습니다. 그런 다음 해당 태그의 networkState JS 변수를 사용하여 video 태그에서 오류 상태를 검색 할 수 있다고 생각합니다. 그러나 나는 테스트하지 않았습니다. 그 시점에서 당신에게 달려 있습니다. 내가 여기있는 것만으로도 당신의 필요에 만족할 것 같네요.

주 :

대신 마지막 소스 태그에서 "오류"이벤트를 수신 할 수 있지만이 이벤트는 신뢰할 수 없다는 것을 알았습니다. preload 속성이 none으로 설정되지 않은 경우 이벤트가 시작되기 전에 이벤트에 대한 리스너를 안정적으로 추가하는 방법을 찾을 수 없습니다. 이로 인해 onerror 속성을 사용해야했습니다.

안정적으로 이벤트를 수신하는 방법을 찾으면이 메모를 추가하고 싶습니다. this Chromium issue에 따르면 소스 태그의 오류 이벤트는 버블 링되지 않습니다. 이는 해당 특정 태그에서 수신 대기해야 함을 의미합니다.

출처

2013-09-05 16:09:47 radicaledward101

내부에서 요소에 의해 트리거되기 때문에 'error'이벤트가 호출되지 않고 요소에서 이벤트가 트리거되도록하려면 useCapture 매개 변수를 true로 설정하여 addEventListener 메서드를 사용해야합니다 :

video.addEventListener('error', callback, true);

그리고 콜백 내부는 비디오가 소스를 재생할 수없는 경우 NETWORK_NO_SOURCE을 될 것됩니다 networkState 속성을 확인할 수 있습니다.

체크 아웃 또는 addEventListener 대한 MDN에서 문서 및 FF에서 useCapture를 매개 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

출처

2015-08-06 15:33:47 Tiborg

HTML5 비디오 태그로 NETWORK_NO_SOURCE 오류를 잡는 방법

답변

관련 문제