2021/04/28 (更新日: 2022/10/08)

HTML5とJavaScriptを使ったマルチメディア処理

こんにちは、あっくんです。今日は、すごい困った事があって悩んでいました。職業の面談の日に予定があり変更したいと考えていました。誰かと話をして、日程を変更調整しなければならない状態です。そんなときにさっと声をかけてくれた人がいました。「よかったら、日程私とかわりましょうか？」と。結果、その人と調整はできませんでしたが、相手のことを考えて行動できる人はやっぱりすごいし、心がきれいに感じます。ホンマにありがたいことですね。

今回は、HTML5とJavaScriptを使ったマルチメディア処理についてやっていきましょう！

HTML5にはさまざまなマルチメディア機能があります。画像や動画、音声ファイルなどを読み込み、Webページ上で表示したり操作したりできます。画像はimgタグで読み込んだり、描画はcanvasタグで作成した領域にJavaScriptで処理ができます。動画はvideoタグ、音声はaudioタグをつかいます。

例、videoを操作します。
.play()メソッドは動画を再生します。
.pouse()メソッドは動画を一時停止します。
timeupdate イベントは、currentTime 属性で示される時刻が更新されたときに発生します。
.currentTimeプロパティは現在時間を得られます。
.durationプロパティは全体時間を得られます。
ended イベントは、メディアの終わりに達したため、またはそれ以上利用できるデータがないために再生またはストリーミングが停止したときに発生します。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
</head>

<body>
    <video id="video" width="400" height="300">
      <source src="Waterfall.mp4" />
    </video>
    <div>
        <button id="play">再生</button>
        <button id="pause">一時停止</button>
    </div>
    <div>現在/全体 秒 : <span id="time"></span></div>
    <div id="status"></div>

    <script>
        // windowにDOMContentLoadedの処理を登録
        window.addEventListener("DOMContentLoaded", (e) => {
            // video養素と、情報出力用養素を選択
            const elVideo = document.querySelector("#video");
            const elTm = document.querySelector("#time");
            const elStatus = document.querySelector("#status");

            // 再生ボタンをクリックした時の処理
            document.querySelector("#play").addEventListener("click", (e) => {
                elVideo.play();
                elStatus.innerText = "再生中";
            });

            // 一時停止ボタンをクリックした時の処理
            document.querySelector("#pause").addEventListener("click", (e) => {
                elVideo.pause();
                elStatus.innerText = "一時停止中";
            });

            // 現在/全体時間の表示
            elVideo.addEventListener("timeupdate", (e) => {
                elTm.innerText = elVideo.currentTime + "/" + elVideo.duration;
            });

            // 再生完了
            elVideo.addEventListener("ended", (e) => {
                elStatus.innerText = "再生終了";
            });
        });
    </script>
</body>

</html>
Code language: HTML, XML (xml)