こんばんは。ウチダユウマです。開発中のWebサービスで動画を載せることになり、簡単にできる方法を見つけたのでシェアしたいと思います。
videoタグを使おう
HTML5から追加されたタグです。
従来ならば、Webページ上で動画を再生するのは大変だったのですが、Videoタグのおかげでシンプルに実装できるようになりました。
しかも、.MOV形式の動画も再生できるので、スマートフォンで撮影した動画も再生可能です。
例えば、movieフォルダにあるexample.movを再生したかったら
|
1 |
<video src="/movie/example.mov" width="300" height="150"></video> |
videoタグの設定
videoタグでWebページ上に動画を置いても制御ボタンがなければ、迷惑なページとなってしまいますね。
だから以下では、videoタグのオプションを紹介していきます。
制御ボタン
|
1 |
<video src="/movie/example.mov" controls="controls" width="300" height="150"></video> |
ループ設定
|
1 |
<video src="/movie/example.mov" loop="loop" width="300" height="150"></video> |
動画サイズの決定
|
1 |
<video src="/movie/example.mov" width="320" height="480"></video> |
snapchatが流行しているように、Web業界では動画がメインストリームになってきていると感じています。
背景に動画を用いたWebページもあるので、videoタグを使って色々と試してくださいね。
