継続は力なり＃１３

2020年3月11日 12:01

画像・動画・音声関連要素

画像

img要素

Webページに画像を組み込む

この要素は空要素であり、表示させたい画像の
URLを「src属性」で指定→画像が表示される
一般的には「PNG形式」「JPEG形式」
「GIF形式」「SVG形式」が使用

alt属性について

画像が正しくロードできない場合・画像の表示が
できない音声や点字などの環境で利用する

「画像の代わりのテキスト」を指定
ここでの指定は「画像の代わりとしてのテキスト」
なので「画像説明のテキストではない」のに注意

例として「検索」を意味する「虫眼鏡のテキスト」
を使用する場合、「alt属性」には「虫眼鏡」と
指定するのではなく「検索」と指定する
画像説明・補足情報は「title属性」を使用

img要素に指定できるもの

・src="画像のURL"　※必須
→表示させるURLの指定

・alt="代替テキスト"
画像の表示ができない場合、
その代わりとなるテキストの指定

・width="幅"
画像の幅をピクセル数で指定
（「幅」実際の幅ではなく表示させる幅）
（「ピクセル数」単位をつけない整数）

・height="高さ"
画像の高さをピクセル数で指定
（「高さ」実際の高さではなく表示させる高さ）
（「ピクセル数」単位をつけない整数）

例

<h1>
<ing src="logo.png" alt="株式会社サンプルサイト" width="300" height="69">
</h1>

※僕の場合

※結構こうゆう事あるので、試行錯誤して
出来たものと差別化して次に進んでいます
（今のところ
・background-image
・link
・image
が上手くいっていません...）
気を取り直して、次いきます！

動画と音声

video要素とaudio要素

動画を組み込む「video要素」
音声を組み込む「audio要素」
共通部分が多く、動画や音声のデータは、
「src属性」で指定する

「img要素」とは違い「video要素」「audio要素」
には要素内容を入れられる

要素内容はこれらの要素に対応したブラウザでは、
表示されずに、未対応の環境でのみ表示される仕様

要素内容を用意するのであれば、
「未対応の環境を利用しているユーザーへの伝言」
「動画・音声ファイルへのリンク」などを入れる

・video
動画を組み込む

・audio
音声を組み込む

・source
動画や音声の「他の形式のデータ」も指定する
場合に使用

video要素・audio要素に指定できる属性の中には、
「属性名="属性値"」ではなく「属性値」だけで指定
できるものもある
そのような属性のことを「論理属性」という

「論理属性」の値は
論理値「true」・「false」のどちらかで
属性を指定→「true」・指定なし→「false」　となる

ようは、「true」と「false」は「yes」と「no」で
「controls属性」を指定すればコントローラーが表示
「loop属性」を指定すればループ再生される
逆に指定さえしなければ、表示も再生もされない

論理属性は

・「controls属性」のように、
属性名だけで指定する形式

・「controls="controls"」のように
属性値に属性名をそのまま入れても有効

・「controls=""」のように
値を空にして指定できる

「video要素」に指定できる属性

・src="動画のURL"
表示される動画のURLを表示

・width="幅"
動画の幅をピクセル数で指定
（「幅」実際の幅ではなく表示させる幅）
（「ピクセル数」単位をつけない実数）

・height="高さ"
動画の高さをピクセル数で指定
（「高さ」実際の高さではなく表示させる高さ」）
（「ピクセル数」単位をつけない実数）」

・poster="画像のURL"
動画が再生できるまでの間に表示させる
画像のURLを指定

・controls
動画の再生・ポーズ・ボリューム調整などを行う
コントローラー部分を表示

・autoplay
途中で止まらずに再生を続けられる程度のデータを
読み込んだ段階で自動的に再生を開始

・loop
動画をループ再生

・muted
音を消した状態で再生

「audio要素」に指定できる属性

・src="音声データのURL"
音声データのURLを指定

・controls
音声データの再生・ポーズ・ボリューム調整などを行う
コントローラー部分を表示

・autoplay
途中で止まらずに再生を続けられる程度のデータを
読み込んだ段階で、自動的に再生を開始

・loop
音声データをループ再生

・muted
音を消した状態で再生

<video src="butterfly.mp4" controls width="640" height="360"</video>

※僕の場合

もしかして"butterfly.mp4"がない？
とりあえず次に行きます！

source要素

「video要素」・「audio要素」の「src属性」を使用し
データを指定する場合、1つのデータしか指定できない

予備として他のデータも指定する場合は、
「video要素」・「audio要素」の「src属性」を
使用せず、要素内容として「source要素」を組み込み
データを指定する

「source要素」はいくつでも指定でき、
より先に指定されているデータで再生可能なものが
再生される

「source要素」空要素でvideo要素・audio要素
のその他のコンテンツよりも前に配置する

source要素に指定できる属性

・src="データのURL"　　　※必須
再生するデータのURLを指定

・type="MIMEタイプ"
再生するデータのMIMLタイプを指定

例

<video controls>
   <source src="bear.mp4" type="video/mp4">
   <source src="bear.ogv" type="video/ogg">
  <p>HTML5に対応したブラウザでは動画が再生できます。</p>
</video>

※僕の場合

もしかして、ダウンロード出来なかったりしますか？
Twitterで「DM」「コメント」お待ちしています...