HTMLで動画を埋め込む技術があるのをご存じですか？今回ご紹介するのは、ページ内に直接動画を埋め込む『videoタグ』！
videoタグを使って読者に動画を視聴させるには？
今回は、videoタグの
・基本的な使い方
・videoタグと類似タグ『audioタグ』との違い
・属性を使用したvideoタグの応用的な使い方
について説明します。videoタグの基本的な使い方はもちろん、動画を自動再生させたり、動画の再生位置を指定したり、詳細な属性の使い方も！動画を埋め込んで、より使いやすく見栄えの良いページを作成しましょう。
目次
videoタグとは
videoタグの読み方
videoタグは『ビデオタグ』と読みます。
videoタグの説明
videoタグは<video src=”埋め込む動画のURL”></video>と使用することで、ネット上に公開されている動画を、直接ページ内に埋め込むことができます。
動画を埋め込むことで、ユーザはページを遷移することなく動画を試聴できるので、よりストレスフリーなサイトを作成できるのです。
videoタグで利用できる属性
videoタグでは以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| autoplay属性 | 再生可能状態で即座にコンテンツの再生を開始する |
| buffered属性 | メディアのバッファリング時間を読み取る |
| controls属性 | 各種機能を制御するコントロールを表示（再生・音量・シーク・ポーズなど） |
| corssorigin属性 | 関連画像取得にCORSを使用するかを示す MEMO ※CORSーオリジン間リソース共有「現在のページのサーバとは、別サーバへの接続を許可するシステム」 |
| anonymous属性 | 資格情報なくオリジン間リクエストを実行する |
| use-credentials属性 | クレデンシャル（IDやパスワードなどユーザ認証に使う情報の総称）を使用しながらオリジン間要求を実行する |
| currentTime属性 | メディアの現在の再生時間を秒単位で返す |
| duration属性 | タイムライン上でのメディアの再生時間を秒単位で示す |
| height属性 | メディアを表示する高さをピクセル値で指定 |
| widtch属性 | メディアを表示する横幅をピクセル値で指定 |
| loop属性 | 再生終了後に先頭に自動的に戻る |
| muted属性 | 初めて映像を再生するときの消音設定 |
| playsinline属性 | インライン再生を許可する |
| poster属性 | ダウンロード中に表示される画像のURL |
| preload属性 | 映像再生に関してユーザにヒントを与える ・noen:映像を事前に読み込むことを非推奨とする ・metadata:映像のメタデータを読み込む ・auto:ファイル全体のダウンロードを許可する |
| src属性属性 | 埋め込むコンテンツのURL |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome3 | 3 |
| Edge | 12 |
| Firefox | 3.5 |
| nternet Explorer | 9 |
| Opera | 10.5 |
| Safari | 3.1 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 4 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
videoタグの基本的な使い方
videoタグの使い方
videoタグは<videoの後にsrc属性とcontrols属性を指定して、セットで使用します。まずはこの基本の使い方を覚えましょう。
See the Pen
OJXEPOK by rabbittyu (@rabbittyu)
on CodePen.
videoタグと類似する要素との違い
videoタグとよく似た使い方をするタグに『audioタグ』があります。これは音声ファイルを直接埋め込むタグで、使用できる属性などもvideoタグによく似ています。
音声ファイルを直接埋め込みたい時はaudioタグを使用しますが、動画投稿サイトに音声ファイルが動画として投稿されている場合はvideoタグを使用し、動画として音声を試聴してもらうようにしましょう。
videoタグの応用的な使い方
動画をミュート状態で自動再生させる：muted属性・autoplay属性
まずはユーザがページ内の動画の部分にたどり着いたとき、自動的に動画が再生されるようにautoplay属性をつけましょう。ユーザのことを考え、動画再生開始時にはミュートになるようにmuted属性も、セットで設定しています。
また動画のサイズの縦横もheight属性、width属性で設定し、初期状態では大きすぎた動画表示を調整しました。
See the Pen
LYZrErJ by rabbittyu (@rabbittyu)
on CodePen.
再生終了時に先頭に戻す：loop属性
ここでは動画が最後まで再生されたときに、自動的に先頭に戻るようにloop属性を付けています。
See the Pen
RwRJNyd by rabbittyu (@rabbittyu)
on CodePen.
(例外）動画をアップロードすることなく埋め込む：iframe要素
ここでvideo要素とiframe要素について紹介します。video要素は事前に自分でアップロードした動画を直接埋め込む要素ですが、iframe要素はYouTubeなど、他の動画投稿サイトにアップロードされた動画を間接的に自分のサイトに埋め込むことができます。
iframe要素の場合は、自分で動画をアップロードする手間が省けますので、場合によって使い分けるようにすると良いでしょう。
See the Pen
Pozawvw by rabbittyu (@rabbittyu)
on CodePen.
Free HD videos -no copyright
今回の記事でサンプル動画として使用させていただいたのは、こちらのチャンネルです。
著作権フリーで使用可能な動画がいろいろありますので、サイト制作などでサンプル動画が必要になった時は、覗いてみてください。
まとめ
今回はサイト内に動画を埋め込むvideo要素について解説しました！video要素は
- <video src=””の中に埋め込む動画のURLを記載し、</video>で閉じると使える
- videoタグを使うときはsrc属性とcontrols属性をセットで使う
- heightとwidth属性で動画の表示サイズをHTML内から設定できる
以上3点の要点を抑えることで、完璧に使いこなせます。ぜひ自分のサイト内に動画を埋め込んで、ユーザが閲覧できるようにしましょう。動画埋め込み時は、著作権や使用規約に十分留意してくださいね。
参考文献：MDN web docs <video>:動画埋め込み要素
