8

シンプルな HTML5 ビデオ要素にエラー処理を追加しようとしています。私はオンラインのどこにでも現れるこのコードのチャンクを使用しています:

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

<video id="a" src="tgif.vid" autoplay controls onerror="playbackFailed(event)" poster="http://img.rasset.ie/000736d2-512.jpg" width="620" height="400"></video>

上記は問題なく動作し、ページが読み込まれるとすぐに警告ボックスが表示されます。

ただし、「src」属性を持たず、代わり<source>に要素「onerror(event)」内でタグを使用すると、<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>

ID「a」と「b」の上に両方のビデオ要素を指定したことに注意してください。

誰かが次のコードで理由を説明できますか:

<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>

「b」ではなく「a」のアラートのみが表示されます

<source>さまざまなデバイスなどに複数のメディア タイプがあるため、タグを使用する必要があります。

回答/コメントをお寄せいただきありがとうございます

S

4

1 に答える 1

9

ソースが関係している場合、ソースの読み込みエラーは要素自体からキャッチする必要があります。<source>ただし、すべての<source>要素が失敗したかどうかを確認するには、<video>要素のnetworkStateプロパティが であるかどうかを確認しNETWORK_NO_SOURCEます。

以下の詳細については、こちらをご覧ください。

最初のソースの読み込みに失敗し、コンソールにエラーを出力する場合のサンプル コードを次に示します。

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 (ハンドラを使用して 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));
}
于 2013-04-09T10:41:10.180 に答える