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

HTMLでメディアの再生終了時にスクリプトを実行する方法｜onended属性の使い方

HTMLでは、onended属性を使用することで、動画や音声などのメディアが最後まで再生されたタイミングでスクリプトを実行できます。この属性を活用すれば、「ご視聴ありがとうございました」「次回もお楽しみに！」といったメッセージを視聴者に表示することが可能です。

使用例

以下のコードを実行すると、onended属性の実際の動作を確認できます。動画の再生が終了すると、自動的にアラートでメッセージが表示される仕組みです。

<!DOCTYPE HTML>
<html>
    <body>
        <video width = "300" height = "200" controls onended = "display()">
            <source src = "/html5/foo.ogg" type = "video/ogg" />
            お使いのブラウザはvideo要素に対応していません。
        </video>
        <script>
            function display() {
                alert ("Thank you for watching! Stay tuned!");
            }
        </script>
    </body>
</html>

ポイント解説

  • onended属性は、<audio>要素や<video>要素など、メディア系の要素に対して指定できます。
  • 属性値には、再生終了時に呼び出したいJavaScriptの関数名を記述します。
  • 上記の例では、再生が完了するとdisplay()関数が呼び出され、アラートダイアログでメッセージが表示されます。

このようにonended属性を使うことで、メディア再生の終了をトリガーとしたさまざまな処理（メッセージ表示、次の動画への切り替え、視聴履歴の記録など）を簡単に実装できます。

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

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

  2. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実