HTML初心者向けリファレンス『videoタグ』の基本!自動再生など応用編も!

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

今回の記事でサンプル動画として使用させていただいたのは、こちらのチャンネルです。

著作権フリーで使用可能な動画がいろいろありますので、サイト制作などでサンプル動画が必要になった時は、覗いてみてください。

 

 

 

Free HD videos -no copyright

まとめ

今回はサイト内に動画を埋め込むvideo要素について解説しました!video要素は

  • <video src=””の中に埋め込む動画のURLを記載し、</video>で閉じると使える
  • videoタグを使うときはsrc属性とcontrols属性をセットで使う
  • heightとwidth属性で動画の表示サイズをHTML内から設定できる

以上3点の要点を抑えることで、完璧に使いこなせます。ぜひ自分のサイト内に動画を埋め込んで、ユーザが閲覧できるようにしましょう。動画埋め込み時は、著作権や使用規約に十分留意してくださいね。

参考文献:MDN web docs <video>:動画埋め込み要素