HTML個人講座8日目

こんにちはcairnです。

HTML個人講座8日目です。

本日は画像や動画の埋め込み方法です。

ひとまず埋め込みの際のタグを入力してみます。

<img src="img/○○○○.jpg">

↑このようになります。

まず最初の『img src』は『イメージサーチ』と理解します。

その後の『img/○○○○.jpg』は『ドキュメントフォルダ内』の『imgフォルダ内』の『○○○○.jpg』という画像という意味です。

このあとは応用編となります。

例えば先ほどの

<img src="img/○○○○.jpg">に

『alt="画像01"』を追加して

<img src="img/○○○○.jpg" alt="画像01">

↑このように入力すると

画像の代替えテキストとして『画像01』というファイル名の画像を表示することができます。

続きまして動画の埋め込め方法です。

基本的には画像埋め込みと同じ仕組みになります。

<video src="video/〇○○〇.mp4">です。

説明不要かと思いますが念のため説明すると

最初の『video src』は『ビデオサーチ』と理解してください。

その後の『video/○○○○.mp4』は『ドキュメントフォルダ内』の『videoフォルダ内』の『○○○○.mp4』という動画という意味です。

さらに動画を再生したり音量調節したりするためのコントロールバーを組み込む方法を説明します。

<video src="video/〇○○〇.mp4">の中に

『controls』を組み込むだけです。

<video src="video/〇○○〇.mp4" controls>

このようにする再生ボタンや停止ボタン、音量調節バーが表示されます。

さらにさらに

動画が再生される前の待機画像を埋め込むこともできます。

『poster="img/△△.jpg"』

↑これを

<video src="video/〇○○〇.mp4" controls poster="img/△△.jpg">

↑こうすると

再生するまでは画像が表示されるようになります。

これを入力しなければ動画の一コマ目が表示されます。

それでは本日はここまで( ´∀｀ )

明日は音声ファイルを組み込んでいきます。