私は2018年に知人と会社を立ち上げ、現在は2名で会社をやっている。HPの更新などは基本、私が全てやっているのである。
ある日、いつも通り会社のHPを更新していた時の話である。
なんでも良さそうな動画を見つけたので、その動画を会社HPのトップで流したいというのである。
————–以下私とBOSSのやりとり—————-
nakattyさ、この動画を会社HPのトップ画面に持ってきたらカッコいいと思うんだよね。(有料サイトで購入済み)
BOSS
nakatty
いやいや、今のままで良いでしょ。てかトップ画像先週変えたばかりだし。これで5度目だし。
でもなんか、違うんだよね〜。ちょっとやってよ〜www
BOSS
nakatty
ちっ(舌打ち)。
というやり取りがあり、会社HPのTOPに動画が流れる様にしたので、その方法をまとめようと思う。
動画を埋め込むタグ
私の会社のHPはWordPressで作っています。
なのでHTMLに直接動画を埋め込んでしまえばバッチリ動画を流すことができます。
HTMLに動画を埋め込む場合<video>というタグを使えば簡単に↓みたいな感じで動画を埋め込むことができます。
<video>タグで使えるプロパティ
<video>では色々なプロパティが使えます。
以下のプロパティを組み合わせれば何かと便利になると思います。
プロパティ | 説明 |
---|---|
controls | 操作パネルを表示 |
width | 動画の横幅を指定 |
height | 動画の縦幅を指定 |
poster | 動画が表示できない時にパスを指定した画像を表示 |
autoplay | 動画の自動再生 |
loop | 動画の繰返し再生 |
muted | 動画の音を再生しない |
preload |
preload=”none” → 再生されるまで何もダウンロードしない preload=”metadata” → メタデータのみダウンロード preload=”auto” → 動画データを全部ダウンロード |
playsinline | iOSで動画をインライン再生 |
ちなみに↑の方で埋め込んでる動画は↓のような感じでHTMLに埋め込んでます。
1 2 3 |
<video controls loop playsinline poster="画像.jpg"> <source src="動画.mov"/> </video> |
controls…操作パネル
loop…繰返し
playsinline…iOSのインライン再生
poster…動画が再生できない時に表示する画像
こんな感じでHTMLに動画を埋め込むことができました。
controlsプロパティをつけると親切か不親切か動画のダウンロードボタンとかも付いてきちゃうので、動画をダウンロードされたく無い場合はつけな方が良さそうです。
まとめ
HTMLに動画を埋め込む方法をまとめました。
会社のHPに実装はしましたが、BOSSの気分でまた変わるかもしれません。
nakatty
BOSSが覚えてくれれば僕がやらずに済むんですけどね
仕事中に情報収集という名目でネットサーフィンばっかしてるみたいですね
のぶこ
nakatty
SNSばかりやってますよ、、、。