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