audioタグについて調べましょう。
audioタグは単語の通りにオディオ(音)を再生する時に使うタグです。
昔はウェブブラウザが動画を支援してなかったので色々アプリを別に設置してから使うことができましたが
HTML5が登場してから動画はオデオタグを利用して簡単に再生することが出来ました。
次はソースを確認して見ましょう。
<!doctype html> <html> <head> <meta charset="utf-8" /> </head> <body> <audio src="https://www.tomodevel.jp/material/audio/disneyTour.m4a"> このウェブブラウザがHTML5のオデオタグに対応してないです。 </audio> </body> </html>
結果を確認したら黒い画面しか見えないですね。実は色々のオプションが必要です。
では、videoタグに使うオプションについて説明します。
では、controlsから使ってみましょう。
videoタグに controlsを書くことだけです。 では、結果を確認しましょう。
<!doctype html> <html> <head> <meta charset="utf-8" /> </head> <body> <video src="https://www.tomodevel.jp/material/video/disneyTour.mp4" controls> このウェブブラウザがHTML5のビデオタグに対応してないです。 </video> </body> </html>
結果を確認するとコントローラーが見えます。
次はautoplayオプションを使ってみましょう。
videoタグに autoplayを書くことだけです。 では、結果を確認しましょう。
<!doctype html> <html> <head> <meta charset="utf-8" /> </head> <body> <video src="https://www.tomodevel.jp/material/video/disneyTour.mp4" controls autoplay> このウェブブラウザがHTML5のビデオタグに対応してないです。 </video> </body> </html>
videoが自動に流れますね。
次はwidthとheightを利用し大きさを調節しましょう。
widthとheightの中で一つだけ使うとバランスに合わせて大きさが自動に調節されます。ではコードを利用し結果をみてみましょう。
<!doctype html> <html> <head> <meta charset="utf-8" /> </head> <body> <video src="https://www.tomodevel.jp/material/video/disneyTour.mp4" controls autoplay width=300 height=200> このウェブブラウザがHTML5のビデオタグに対応してないです。 </video> </body> </html>