X

【簡単】Webページ上に動画を公開する方法

この記事は約 3 分で読めます。

こんばんは。ウチダユウマです。開発中の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タグを使って色々と試してくださいね。