Audio & Video Tag

ここで学習するための、AudioファイルとVideoファイルをクリックしてダウンロードしてください。
WEBページへ入れる場合は容量の小さなものにしましょう。
もしVideoの容量が大きな場合はYoutubeなどを利用した方がよいかもしれません。

sound1.mp3(231KB)

movie2.mp4(779KB)


Audioファイルを入れる

用意するサウンドの形式はmp3

01　Audio　基本

audioタグを使用するには、<audio></audio>の中に音声ファイル名やその他の属性を記述
<audio src="sound1.mp3"></audio>
audioタグにcontrols属性を入れると、オーディオプレイヤーが表示され、再生・停止や音量調節などができるようになります。
※autoplay属性を指定すると、音声が自動再生されますが、あまりおススメできません。

HTML

<audio src="sound1.mp3" controls></audio>


02　Audio　音声を繰り返し再生するloop

loop属性を指定すると、音声が最後まで再生されると自動的に最初に戻って音声が再生されるようになります。

HTML

<audio src="sound1.mp3" controls loop></audio>





Videoファイルを入れる

❶iframeタグを使用する（youtubeなどの動画サイトから読み込む）
❷videoタグを使用する（動画ファイルをアップロードして読み込む）
という２つの方法があります。
ここでは「video」タグを使って動画を入れてみましょう。（pixabayからダウンロードできます）
用意する動画の形式はmp4

01　Video　基本

コードの書き方
<video src="movie2.mp4"></video>
しかし、これだけでは動画が再生されません。

コントロールパネルを表示するにはAudioと同じように「controls」を入れます。

HTML

<video src="movie2.mp4" controls></video>


02　Video　自動再生とループ

auto属性「autoplay」を指定することで動画を自動再生させることができます。
chromeやsafariではmuted属性で動画の音をでないように設定する必要があります。
また「loop」属性を入れることで再生が繰り返されます。
下記のコードは自動再生とループを入れています。

HTML

<video src="movie2.mp4" autoplay muted loop></video>


03　Video　スマホ対応させる

今のままではスマホで見た時に画面が切れてしまいます。
またスマホのsafariでwebサイトの動画に埋め込まれているを動画を再生しようとすると強制的に全画面表示になってしまうことがあります。
全画面表示をせずにその場で再生させることができるのがインライン再生です。

インライン再生を可能にするためにはautoplay、muted、playsinlineの３つの属性が必須です。
どれか１つでも欠けていると上手くインライン再生されないので注意

CSSに下記のコードを入れて、サイズなどは自分で調整してみてください。

CSS

div.vid_contents {
width: 100%; /*背景色を横幅いっぱいに広げる*/
text-align: center;
margin: 0 auto; /*Videoをセンターにする*/
padding: 20px 0; /*ここで動画の周りの余白を調整*/
}
video.vid_main {
width: 100%;
max-width: 700px; /*PC版での最大幅*/
}

HTML

<div class="vid_contents">
<video class="vid_main" src="movie2.mp4" autoplay muted loop playsinline></video>
</div>



04　Youtube　を入れる

GoogleマップやYoutube動画を入れる場合

CSS

.ggy {
position: relative;
width: 100%;
padding-top: 100%; /* = height ÷ width × 100 */
}
.ggy iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

このまま表示するには画面が大きすぎるのでggyを入れるボックスも作っておきましょう

CSS

.ggy-box{
max-width:500px;
margin: 0 auto;
}

HTML

<div class="ggy-box">
<div class="ggy">
  <iframe>～</iframe>　←コピーしたコード
</div>
</div>