(Sample)

以下はビデオを再生するサンプルです。

ポイントは9行目でビデオタグを指定している点、10行目でソースを指定している点です。

9行目の属性について説明を加えます。

autoplay:自動で再生します。以下のmutedと組み合わせないと自動再生されません。（おそらくユーザーを戸惑わせないための処置）

loop :再生を繰り返します。

muted:無音にします。

controls:操作ボタンを表示します。

参考リンク

<!DOCTYPE html>
<html>
    <head>
        <title><!DOCTYPE html>
<html>
    <head>
        <title>video-play.html</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <video id="video" width="700" autoplay loop muted controls>
            <source src="sample.mp4">
        </video>
    </body>
</html></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <video id="video" width="700" autoplay loop muted controls>
            <source src="sample.mp4">
        </video>
    </body>
</html>

Webアプリケーション制作のための小ネタ集　目次に戻る