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

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

こんばんは。ウチダユウマです。開発中のWebサービスで動画を載せることになり、簡単にできる方法を見つけたのでシェアしたいと思います。

videoタグを使おう

HTML5から追加されたタグです。

従来ならば、Webページ上で動画を再生するのは大変だったのですが、Videoタグのおかげでシンプルに実装できるようになりました。

しかも、.MOV形式の動画も再生できるので、スマートフォンで撮影した動画も再生可能です。

例えば、movieフォルダにあるexample.movを再生したかったら

videoタグの設定

videoタグでWebページ上に動画を置いても制御ボタンがなければ、迷惑なページとなってしまいますね。

だから以下では、videoタグのオプションを紹介していきます。

制御ボタン

といったように動画ファイルの場所を指定した後、半角スペースを挟み、controlsを入れることによって、再生や音量の調整ができるコントロールパネルが出現します。

ループ設定

このように記載すると、ループ再生が行われます。

動画サイズの決定

cssのように高さと幅を指定する事ができます。

snapchatが流行しているように、Web業界では動画がメインストリームになってきていると感じています。

背景に動画を用いたWebページもあるので、videoタグを使って色々と試してくださいね。

LINE@

この記事をシェアする