ファイル読み込み時のエラーハンドリングについて

Question

前提・実現したいこと

<video>で読み込んだ動画がファイルが存在せず、NOT FOUNDの場合に
エラー表示として別画像もしくは別動画を表示したい。

発生している問題・エラー

<video controls width="100%" height="100%" src="data/A1/SampleA.mp4" class="change keep"></video>

上記、SampleA.mp4がフォルダに存在しない場合に、下記JavaScriptで記載したerror.mp4を再生したい。
（もしくはerror.jpgに切り替えてもよい）

現行の対応

以下の通りjqueryを活用して記述したが適用されませんでした。

$(".video").error(function(){
  $(this).attr({
    "src":"/video/error.mp4"
  });
});

補足事項・環境

<source src="">タグによる方法は不可

sourceタグによる方法ではなく、FILE_NOT_FOUNDEのエラーをjavascript/jqueryでキャッチすることで、
エラー表示をする画像が格納されたPATHにjavascriptで変更したいと考えております。

OS:windows10
Browser:Chrome

よろしくお願いいたします。

Answer 1

<video width="320" height="240" poster="http://via.placeholder.com/150x150" controls>
   <source src="notfound.mp4" type="video/mp4">
</video>

posterという属性があるので、そこで画像を設定出来ます。

https://codepen.io/anon/pen/aqeQGP

更新

<video width="320" height="240" controls>
   <source src="notfound.mp4" type="video/mp4">
   <source src="error.mp4" type="video/mp4">
</video>

sourceタグは複数videoタグ内で使えるので、error時に表示したいvideoファイルを一番下のsourceタグのsrcで読み込んであげればよいかと思います。

Comments

[退会済みユーザー]

すいません、posterは動画がある場合に表示してしまうため不可です。
ファイルが存在しない（NOT_FOUND）のときのみ代替画像を表示したいと考えております。

[HayatoKamono]

追記しました

[HayatoKamono]

souceタグは先に記述したものが無効な場合に後に記述したものがフォールバックとして使われます。

[退会済みユーザー]

iframeタグにおいて対応できませんでした。

<iframe allowfullscreen="true" width="100%" height="600px" style="border: 0px;"><source src="./vrview-master/index.html?video=../data/A1/sampleA1.mp4&amp;loop=false&amp;"></iframe>

[HayatoKamono]

質問はvideoタグが前提でしたよね？そもそもの前提が違うのであれば、この質問は閉じて、別質問を立てて仕切り直したほうがよろしいかと思います。

[退会済みユーザー]

タイトルを変更しました。

Answer 2

セレクタが、videoタグではなくクラス指定になってますが、そこは記載間違いでしょうか？

$(".video").error(function(){
  $(this).attr({
    "src":"/video/error.mp4"
  });
});

// ↓

$("video").error(function(){
  $(this).attr({
    "src":"/video/error.mp4"
  });
});

Comments

[退会済みユーザー]

記載間違えてました。しかしながらやはりvideo srcがない場合もコールバックがなく関数を呼び出せませんでした。