videoタグ

videoタグについて調べましょう。

videoタグは単語の通りにビデオ（映像）を再生する時に使うタグです。
昔はウェブブラウザが動画を支援してなかったので色々アプリを別に設置してから使うことができましたが
HTML5が登場してから動画はビデオタグを利用して簡単に再生することが出来ました。

videoタグの使い方

<video src="動画の住所">
    ここでウェブブラウザがHTML5のビデオタグを支援しない場合出力する内容を書きます。
</video>

次はソースを確認して見ましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <video src="https://www.coreasur.com/material/video/disneyTour.mp4">
        このウェブブラウザがHTML5のビデオタグに対応してないです。
    </video>
</body>
</html>

結果を確認したら黒い画面しか見えないですね。実は色々のオプションが必要です。

上のコードの結果

では、videoタグに使うオプションについて説明します。

videoタグのオプション

controls : コントローラーの表示
autoplay : 自動再生
loop : リピート再生
width : widthの長さ
height : heightの長さ
muted : ミュート

では、controlsから使ってみましょう。

controlsの使い方

<video src="https://www.coreasur.com/material/video/disneyTour.mp4"　controls>
    ここでウェブブラウザがHTML5のビデオタグを支援しない場合出力する内容を書きます。
</video>

videoタグに　controlsを書くことだけです。　では、結果を確認しましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <video src="https://www.coreasur.com/material/video/disneyTour.mp4" controls>
        このウェブブラウザがHTML5のビデオタグに対応してないです。
    </video>
</body>
</html>

上のコードの結果

結果を確認するとコントローラーが見えます。
次はautoplayオプションを使ってみましょう。

autoplayの使い方

<video src="https://www.coreasur.com/material/video/disneyTour.mp4"　controls autoplay>
    ここでウェブブラウザがHTML5のビデオタグを支援しない場合出力する内容を書きます。
</video>

videoタグに　autoplayを書くことだけです。　では、結果を確認しましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <video src="https://www.coreasur.com/material/video/disneyTour.mp4" controls autoplay>
        このウェブブラウザがHTML5のビデオタグに対応してないです。
    </video>
</body>
</html>

videoが自動に流れますね。
次はwidthとheightを利用し大きさを調節しましょう。

widthとheightの使い方

<video src="https://www.coreasur.com/material/video/disneyTour.mp4"　controls autoplay　width=300 height=200 >
    ここでウェブブラウザがHTML5のビデオタグを支援しない場合出力する内容を書きます。
</video>

widthとheightの中で一つだけ使うとバランスに合わせて大きさが自動に調節されます。ではコードを利用し結果をみてみましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <video src="https://www.coreasur.com/material/video/disneyTour.mp4" controls autoplay width=300 height=200>
        このウェブブラウザがHTML5のビデオタグに対応してないです。
    </video>
</body>
</html>