動画を埋め込む方法：html step13

動画を埋め込む方法：html step13

前回は、画像を配置する方法をサンプルソースコードと共に記載いたしました。

iphoneの登場以来、リティナディスプレイの影響で、ウェブの制作現場では以前であれば、画像サイズを2倍で作成をおこなうなど、色々と影響を受けた経験を記憶しております。
しかしながら、前回記載いたしました内容をしっかりと理解していれば、パソコンとスマートフォンで画像を振り分けることも、比較的簡単におこなえるようになる事と思います。

コレからウェブ制作にかかわるのであれば、なおさらしっかりと理解度を深めておくことをお進めいたします。

という事で、それでは今回はッ、

上記について記載していこうと思います…。

動画を埋め込む方法

HTML文書内に動画を埋め込むには、video要素を使用します。controls属性を指定すると、コントローラー（再生・停止や音量調整が可能なユーザーインターフェイス）が表示されます。
幅と高さについては、動画の実際のサイズには関わらず、ここで指定した幅と高さで表示させることができます。

video要素には、要素内容としてこの要素に未対応のブラウザ向けの内容（動画をダウンロードするためのリンクなど）を入れることができます。
video要素に対応したブラウザでは要素内容は表示されません。

音声を埋め込む方法

HTML文書内に音声データを埋め込むには、audio要素を使用します。
controls属性を指定すると、コントローラー（再生・停止や音量調整などが可能なユーザーインターフェイス）が表示されます。

audio要素には、要素内容としてこの要素に未対応のブラウザ向けの内容（音声データをダウンロードするためのリンクなど）を入れることができます。audio要素に対応したブラウザでは要素内容は表示されません。

形式の異なる複数の動画・音声を埋め込む方法

さまざまな環境で再生できるようにするために、形式の異なる複数の動画や音声データを埋め込むことも可能です。
その場合、video要素またはaudio要素側のsrc属性を指定せずに、要素内容として入れたsource要素のsrc属性でデータのURLを指定します。
source要素は必要なだけを入れることができ、その中から再生可能な最初のデータが使用されます。

なお、source要素を使用する際でも、video要素またはaudio要素の要素内容として、未対応のブラウザ向けのリンクを入れておくことができます。
ただし、source要素はそのようなコンテンツよりも前に配置する必要がある点に注意が必要になります。

という事で今回は、動画や音声の埋め込み方法について記載してみました。

ウェブページの作製をおこなう際、実際にはあまり使用することはないことと思いますが、
実際にウェブページ内で、説明などを表記しなければ場合は、動画などを使用すると、ユーザーには比較的簡単に説明内容を伝えることが可能なことと思います。

HTMLの記載方法も上記に記載しましたとおり簡単な記載方法になります。

今回の場合は、完璧に覚える必要はない事ともいますが、ひととおり理解しておくことをお進めします。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。