[Javascript] audio,videoタグの読み込みはonloadではなく、onloadedmetadataを使う

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

HTML5が主流になってきたので、ビデオや音楽再生を柔軟に行うWEBサイトが増えてきました。
 

ここ最近、システムで利用するデータのアップロードライブラリを作っていて、その扱いに四苦八苦していましたが、今回はaudioアップロード時に音楽再生して内容確認を行うシステムを構築していた時に、メディアタグに対してonloadを使ってもイベントが発動しないことに気がついたので、そのかわりに「onloadedmediadata」というイベントを使わなくてはいけないという、これまで知らなかったイベントだったので、備忘録としてブログに書き残しておきます。

videoタグとaudioタグのメリット・デメリット

HTML5の醍醐味とも言える、動画や音楽データの扱いが極めて簡単に行えるvideoタグとaudioタグを使うと、フロントエンジニアの人でも、難しいプログラムを必要とせず、WEBページに簡単にメディア・コンテンツを設置することができるようになります。
 

 

たったこれだけの記述で簡単にWEBページ上に動画プレイヤーや音楽プレイヤーを表示でき、ユーザーがコントロールできるようになります。
 

属性パラメータをセットするだけで、自動再生や、ループ再生なども可能なので、トップページの動画バナーとして使っているケースもよく見かけますね。
 

ただ・・・・こんな便利なコンテンツタグですが、実はブラウザによって、見え方がまるで違っています。
 

# Mac-GoogleChrome
 

 

# Mac-Firefox
 

 

# Mac-Opera
 

 

# Mac-Safari
 

 

# iPhone-Safari
 

 

# iPhone-Chrome
 

 

サイズを小さめに指定しているので、コンテンツ情報が表示されていませんが、同じ見え方のブラウザもあれば、概ね違っている事が確認できます。
 

UIを気にする人であれば、こういう見え方がブラウザによってここまで違っているのであれば、自らプレイヤーをデザインして表示を固定化させるというのも頷けます。

独自プレイヤーを作りたいと思ったら・・・

固定化されたデザインメディアプレイヤーを使用する場合、もはやjavascriptでプログラミングするしかありません。
 

でも、そんなに敷居の高いプログラムを組まなくても、結構簡単にプレイヤーコーディングはできるようなので、下記サイトを参考にすれば比較的ラクに構築できるでしょう。
 

https://www.agent-grow.com/self20percent/2018/07/30/html5-javascript-video-player/
 

ただ、仕事でもたま〜に、プレイヤー作成をすることがありますが、その都度作っていて比較的めんどくさく感じていたので、そのうち自分用のライブラリを、いつものように作っておくことにします。

onloadとonloadedmediadataの違い

独自プレイヤーをコーディングしている時に、mp3のID3タグ情報を取得したり、再生コントロールをイベントを元に行いたい場合があります。
 

そんなときは、ブラウザのFileAPIを利用して、データ読み込み完了後に、関数をセットするというイベントセットの流れで、画像タグであれば、”onload”イベントで行えますが、動画や音楽データはonloadイベントでは発火しません。
 

この場合、”onloadedmediadata”イベントを使うのですが、imgタグとの違いは、HTML5バージョンのタグだからその仕様なのでしょう。
※勝手に自分でそのように解釈しています・・・
 

“onload”と”onloadedmediadata”イベントは、命令こそ違いますが、扱いは全く同じなので、タグによって扱いが違うということだけ覚えておけば問題ないでしょう。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です