あっくんブログ Written by Akihiro Tsuji

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

JavaScript プログラミング

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

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

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

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

Image from Gyazo
<!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)

読んでいただいてありがとうございました!

JavaScript完全入門、網羅的に解説されいてわかりやすいです。