web-dev-qa-db-ja.com

HTML5ビデオのエラー処理

ビデオを再生できないかどうかを確認する必要があります（「x」記号がブラウザーに表示されます）。

このコードは機能しません。 「onerror」イベントはFirefoxで発生しません

var v = document.getElementsByTagName("video")[0];
    if ( v != undefined )
        v.onerror = function(e) {
            if ( v.networkState == v.NETWORK_NO_SOURCE )
            {
                // handle error
            }
        }

ここで何が問題になっていますか？

htmlerror-handlinghtml5-video
24
AntonAL

「onerror」は<video>の有効なイベントタイプではありません

代わりに「エラー」を使用してください。

document.getElementsByTagName('video')[0].addEventListener('error', function(event) { ... }, true);

<video>のイベントの完全なリストについては、こちらをご覧ください： https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox

23
therealklanni

Firefox 4以降、「エラー」イベントは <source>要素 。

そして、エラーハンドラを追加する必要があります唯一/最後のソース：

HTML

<video id="vid" controls>
  <source src="dynamicsearch.mp4" type="video/mp4"></source>
  <source src="otherdynamicsearch.avi" type="video/avi"></source>
</video>

JS

var v = document.querySelector('video#vid');
var sources = v.querySelectorAll('source');

if (sources.length !== 0) {
    var lastSource = sources[sources.length-1];

    lastSource.addEventListener('error', function() {
        alert('uh oh');
    });
}

JQuery

$('video source').last().on('error', function() {
    alert('uh oh');
});

AngularJS

エラー処理ディレクティブを作成できます（または ng-error を使用します）：

<video id="vid" controls>
  <source src="dynamicsearch.mp4" type="video/mp4"></source>
  <source src="otherdynamicsearch.avi" type="video/avi" ng-error="handleError()"></source>
</video>

エラー処理ディレクティブのlink関数が実行する必要がある場所（ng-errorからコピー）：

element.on('error', function(event) {
    scope.$apply(function() {
        fn(scope, {$event:event});
    });
});
19
Kenny Ki

ChromeとFirefoxではonerrorコールバックが異なるため、エラーをマッピングする必要があります。Mozillaは error.originalTarget を使用します。

以下は、純粋なJavaScriptでそれを行う方法のサンプルです。

const file = 'https://samples.ffmpeg.org/MPEG-4/MPEGSolution_jurassic.mp4';

window.fetch(file, {mode: 'no-cors'})
.then((response) => response.blob())
.then((blob) => {
  const url = window.URL.createObjectURL(blob);
  const video = document.createElement('video');      

  video.addEventListener('error', (event) => {
    let error = event;

    // Chrome v60
    if (event.path && event.path[0]) {
      error = event.path[0].error;
    }

    // Firefox v55
    if (event.originalTarget) {
      error = error.originalTarget.error;
    }

    // Here comes the error message
    alert(`Video error: ${error.message}`);

    window.URL.revokeObjectURL(url);
  }, true);

  video.src = url;
  document.body.appendChild(video);
});

上記の例は、受信エラーイベントを MediaError にマップし、エラー再生メッセージを表示するために使用できます。

4
Benny Neugebauer

エラーイベントをキャッチするには、video.addEventListner()を使用する必要があります。

var video = document.createElement('video');
var onError = function() { // your handler};
video.addEventListener('error', onError, true);
...
// remove listener eventually
video.removeEventListener('error', onError, true);

addEventListener（キャプチャ時）の3番目のパラメーターはtrueに設定する必要があることに注意してください。エラーイベントは通常、動画要素（タグ）の子孫から発生します。

とにかく、errorイベントを発生させるためにビデオタグに依存することは、ビデオが再生されたかどうかを検出するための最良の戦略ではありません。このイベントは、一部のAndroidおよびiOSデバイスでは発生しません。

私が考えることができる最も信頼できる方法は、timeupdateおよびendedイベントをリッスンすることです。ビデオが再生されている場合、少なくとも3つのtimeupdateイベントを取得します。エラーの場合、endedはerrorよりも確実にトリガーされます。

4
Aleš Kotnik

代わりに、イベントリスナーをタグに追加してみてください。onerror属性（「error」イベント）は、videoタグではなく、ソースタグで機能すると思います。

2
ccallendar

パグの例

video(src= encodeURI(item.urlVideo), type='video/mp4'  onerror="myFunction('param',this)")
script(src='/javascripts/onerror.js')

function myFunction(param, me) { 
    console.log(me);
    me.poster = './images/placeholder.jpg'; }
0
Ľubomír Drinka