HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでブラウザがメディアデータを取得できない場合にスクリプトを実行する方法【onstalled属性】

onstalled属性とは

HTMLのonstalled属性を使うと、ブラウザが何らかの理由でメディアデータを取得できなかった場合に、指定したスクリプトを実行できます。動画や音声ファイルのダウンロードが途中で止まった場合などに、ユーザーへエラーメッセージを表示するといった処理に活用できます。

onstalled属性が使用できる要素

この属性は、以下の2つのメディア要素で使用可能です。

<video>
<audio>

<video>要素の構文

<video onstalled="script">

<audio>要素の構文

<audio onstalled="script">

実装例

以下のコードを実行して、onstalled属性の実際の動作を確認してみましょう。

<!DOCTYPE HTML>
<html>
   <body>
      <video width="300" height="200" controls onstalled="display()">
         <source src="/html5/foo.ogg" type="video/ogg" />
         <source src="/html5/foo.mp4" type="video/mp4" />
         お使いのブラウザはvideo要素に対応していません。
      </video>
      <script>
         function display()
         {
            alert("Sorry! Video isn't available right now!");
         }
      </script>
   </body>
</html>

この例では、動画データの取得に失敗したタイミングでdisplay()関数が呼び出され、「Sorry! Video isn't available right now!」というアラートが表示されます。このようにonstalled属性を利用することで、メディアが利用できない状況をユーザーに適切に通知できます。

  1. HTMLで要素がフォーカスを失ったときにスクリプトを実行するには？

    HTMLでは、onblur属性を使うことで、要素がフォーカスを失ったタイミングでスクリプトを実行できます。例えば、テキスト入力欄からカーソルが外れた瞬間に入力内容を加工するといった処理が簡単に実装可能です。以下のサンプルコードを実行して、onblur属性の動作を確認してみてください。コード例<!DOCTYPE html> <html>    <body>       <p>下記に入力してください！</p>       Country: <input

  2. HTMLでブラウザがメディアデータを取得中のときにスクリプトを実行するには？

    HTMLでは、onprogress属性を使用することで、ブラウザがメディアデータ（動画や音声）をダウンロードしている最中にスクリプトを実行できます。onprogress属性とはonprogress属性は、ブラウザがメディアデータを取得（バッファリング）している間に発生するイベントです。読み込みの進捗状況をユーザーへ通知したり、ローディング表示を制御したりする際に活用できます。実装例以下のコードを実行して、onprogress属性の動作を確認してみましょう。<!DOCTYPE html> <html>    <body>   &n