このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

HTML だけで動画,オーディオを再生するための基本知識

このエントリーをはてなブックマークに追加
イメージ


こんにちは、さち です。

以前、音声(オーディオ),動画(ビデオ)を
このブログに設置したことがありました。

かなり前の話なので、その時は Flash を使いましたが
HTML5 が普及した今は、Flash なんていりません。
HTML だけで設置できます。

ただ、情報としては知ってはいても
HTML でオーディオ,動画を設置した経験が一度もありません。
勉強してみたいと思います。




オーディオを設置する <audio> タグ

実際に、<audio> タグを使って設置したプレイヤーがこちら。


HTML はこんな感じ。
<audio src="sample.mp3" controls>
このウェブブラウザは audio タグ未対応です
</audio>

CSS はこんな感じ。
<img> のようにタグに直接「width="450"」と書いても効きません。
幅を変えるには、CSS として width を指定する必要があります。
audio {
width: 450px;
max-width: 100%;/* スマホ表示でのはみ出し対策 */
}

<audio> タグで使用できる主な属性は下記のとおり。
(ウェブブラウザによって既定値が異なる場合があります)
表

各ウェブブラウザの標準プレイヤーのデザインは次のとおり。
サンプル

主流コーデックである「MP3」「AAC」は
どのウェブブラウザでも再生できるので安心して使用できます。




動画を設置する <video> タグ

実際に、<video> タグを使って設置したプレイヤーがこちら(音声なし動画です)。


HTML はこんな感じ。
<video src="sample.mp4" poster="image.jpg" controls playsinline>
このウェブブラウザは video タグ未対応です
</video>

CSS はこんな感じ。
「width」「height」片方だけの記述でも、アスペクト比が維持されます。
<img> のようにタグに直接「width="450"」と書いても効きます。
video {
width: 450px;
max-width: 100%;/* スマホ表示でのはみ出し対策 */
}

<video> タグで使用できる主な属性は下記のとおり。
(ウェブブラウザによって既定値が異なる場合があります)
「width」「height」はタグに直接記述しなくても、「CSS」から指定できます。
表

各ウェブブラウザの標準プレイヤーのデザインは次のとおり。
サンプル

主流コーデックである「H.264」は
どのウェブブラザでも再生できるので安心して使用できます。




JavaScript での操作

HTML5 のプレイヤーは JavaScript からも操作ができます。
JavaScript を使うことでプレイヤーのデザインを自作できるため
ウェブブラウザ毎の UI の違いを無くしたい場合などに役立ちます。
(視聴できれば良いだけなら JavaScript での操作は不要です)

<audio><video> 要素を取得し
用意されたプロパティ,メソッドを使うことで、様々な操作ができます。
<video id ="player" src="sample.mp4" controls>
このウェブブラウザは video タグ未対応です
</video>

var player = document.getElementById('player');

player.play();// 再生する
player.pause();// 一時停止する
player.volume = 0.5;// ボリュームを50%にする
player.playbackRate = 2;// 再生速度を2倍に
player.loop = true;// ループ再生を有効にする

他にも色々なことができます。詳細は下記リンク先を参照して下さい。

   → video要素、audio要素をJavaScriptから操作する - HTMLクイックリファレンス


また、JavaScript の MediaSource.isTypeSupported() を使うことで
指定した「MIMEタイプ」をウェブブラウザがサポートしているか確認できます。
(サポートしていれば「true」、していなければ「false」が返ってくる)
ウェブブラウザの開発ツール(コンソール)で入力すると簡単です。
var bool = MediaSource.isTypeSupported('video/webm; codecs="vp9"');
console.log(bool);// true(Firefox 61 の場合)




以前は、Flash のプレイヤーを使っていたので
詳しくない人にとってはハードルが高かったのですが
HTML5 ではすごく簡単になりましたね。
(プレイヤーを自分で用意しなくて良いのが楽)

HTML5 なら、PC だけでなくスマートフォンでも再生可能ですし
今の時代、Flash を使う理由はほとんどないですね。

記事内で使わせて頂いたオーディオ,動画はこちらです。
ありがとうございました。

   → FM音源風BGM2【ループ対応】/作者:おとうふ 様 - ニコニ・コモンズ
   → 猫です。(立ち去ります)/作者:ES... 様 - ニコニ・コモンズ




このエントリーをはてなブックマークに追加




管理人だけが読めるコメントにする(返信はしません)
【お知らせ】
  • コメントは承認制です。反映に時間がかかります。
  • スパムコメント防止のため一部ホストを規制中です。
  • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
  • 記事に直接関係ない個人のトラブルにはお答えできません。
  • Android は使用経験がないので質問を頂いても答えられません。
  • その他詳細はこちら





記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

2008-2019 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

ブログパーツ