KENスクールブログ | パソコン教室・パソコン講座なら個別指導のKENスクール

BLOGKENスクールブログ

  1. KENスクール TOP >
  2. KENスクールブログ > Web・DTPデザイン > HTMLを始めよう! その6

Web・DTPデザイン

HTMLを始めよう! その6

KENスクールの動画配信サービス「KEN×ONLINE」

久しぶりのブログ更新となりました。
前回は、「section要素」と「article要素」についてお話ししました。

今回は、HTML5から追加された要素をご案内します。

video要素とaudio要素

1.video要素

ウェブページに動画を埋め込む要素です。
以前は、YouTubuに動画をアップしてリンクを張り表示させることもありましたが、要素で埋め込めることが可能になりCSSやJavaScriptなどの連携が可能となりました。

src属性で動画データへのパス指定。controls属性で再生コントロールを表示します。

 

video要素

 

その他、autoplay属性で自動再生、loop属性でループ再生、muted属性でボリューム0を指定します。

動画データの各ブラウザサポートは、MP4は主要ブラウザは対応しています。
WebMとOggは、Internet Explore以外対応しています。

 

2.audio要素

ウェブページにオーディオプレーヤーを表示させる要素です。

src属性で動画データへのパス指定。controls属性で再生コントロールを表示します。

 

 

その他、autoplay属性で自動再生、loop属性でループ再生、muted属性でボリューム0を指定します。
再生コントロールを表示させるとユーザーによって再生の動作ができます。なしであればバックグラウンドミュージックで使用できます。

 

video要素とaudio要素は、Google Chromeは4.0~、Internet Explore/Edgeは9.0~、Firefoxは3.5~、Safariは4.0~、Operaは10.5~で対応しています。

 

音声データの各ブラウザサポートは、MP3は主要ブラウザは対応しています。
WavはInternet Explore以外対応しています。OggはInternet ExploreとSafari以外対応しています。

 

※主要ブラウザとは、Google Chrome、Internet Explore/Edge、Firefox、Safari、Opera

 

動画データであればMP4、音声データであればmp3は主要ブラウザに対応していますが、複数のデータを指定する際は、source要素を使用し指定します。

 

 

今回は、video要素とaudio要素をご紹介しました。また次回は他の新要素をご紹介します。

 

この記事に関連する講座

初心者の方にもわかりやすくHTML5の要素を学習できます

詳しくはこちら