[65] 動画をプラグイン無しで組み込もう video要素・source要素
最終更新日:2019年03月17日 (初回投稿日:2013年12月12日)
今回の <video>要素と、次回の <audio>要素は、
「メディア要素(Media Element)」と言われ、どちらもHTML5からの新要素です。
メディア要素には共通の属性 src, controls , autoplay, loop, muted, preload, mediagroupがあり、<video>要素には、poster, width, height属性もあります。
まず今回の<video>要素は、動画をプラグイン無しで再生させるための要素です。
<source>要素はメディア要素の子要素で、複数のメディアソースを指定します。
<video> <audio> 要素は、src属性で1つしかメディアファイルを指定できませんが、
<source>要素を併用して複数指定することもできます。
使用する要素 | <video> 〜 </video> <source>(空要素。終了タグは不可) |
---|
<video>の属性 (一覧はこちら) |
src | :組み込むファイルのURL |
---|---|---|
controls | :コントローラを表示 | |
width | :表示させる幅をピクセルで | |
height | :表示させる高さピクセルで | |
poster | :ロード中に表示するトップ画像のURL | |
autoplay | :自動再生する | |
loop | :ループ再生する | |
muted | :ミュート(消音)で再生する | |
preload | :プリロードするかどうか | |
mediagroup | :複数のメディアを同期させる | |
グローバル属性 |
<source>の属性 | src | :組み込むファイルのURL |
---|---|---|
type | :組み込むファイルのMIMEタイプ | |
media | :メディアタイプを指定。デフォルトはall | |
グローバル属性 |
また、<track>要素もメディア要素の子要素で、字幕を出したりできます。
(
<track>については後日詳細)
<video>要素だけで動画を組み込んでみよう
<video>要素の使い方はとてもシンプル。
src属性で動画ファイルのURLを指定し、
width と height属性で幅と高さのサイズを指定します。
controls属性をつければ、ブラウザがコントローラを表示してくれます。
poster属性は静止画像を指定できます。これがロード中の表示画面になり、src属性で指定したファイル形式をブラウザがサポートしない時は、そのまま代替画像になります。
<video>要素に対応していない古いブラウザでは、この↑代替画面すら表示されないので、古いブラウザ用に <video>〜</video>内に代替コンテンツを入れることができます。
代替コンテンツはテキストでも良いのですが、<embed>要素を入れるほうが親切かもしれません。
サンプルです。これは画像↓ クリックで別ウィンドウで開きます。
HTMLはこちら↓
<video src="uchiage.mp4" width="640" height="360" controls poster="img/vid_img.jpg" preload="auto">
<p>このブラウザは動画再生に対応していません</p>
</video>
<!--中に入れたテキストは video要素に対応していない古いブラウザ用です-->
<!--代替えコンテンツはテキストよりembedのほうが親切ですね-->
ブラウザ(のバージョンが古いもの)によっては、<video>要素に対応しているが、MP4は再生できないということもあります。
プラグイン無しで動画を再生するということは、ブラウサに依存するということですが、
ちょっと前までは、各ブラウザの開発元でイロイロあって、HTML5標準の動画形式を決められなかった(いわゆるコーデック問題。後述) んです。
ですが、<source>要素を使えば、複数のファイルを指定できるので、どのブラウザでも動画を再生できます。
(同じ動画を、複数の異なるファイル形式で保存しておく必要があるけどね)
<source>でファイルを複数指定すればOK
では、<video>要素内に <source>要素で複数のファイルを指定してみましょう。
例えば、MP4(IE, Chrome, Safari が先にサポート)形式と、WEBM(Chrome, Firefox, Opera が先にサポート)形式のファイルを指定しておけば、<video>要素に対応してるどのブラウザでも、ちゃんと再生できるようになります。(MP4とOGV(Chrome, Firefox, Opera がサポート)という組み合わせもアリ。詳細後述)
サンプルです。これは画像です↓
クリックで別ウィンドウで開きます。
HTMLはこちら↓
<video controls poster="img/vid_img.jpg" preload="auto" width="640" height="360">
<source src="uchiage.webm" type="video/webm">
<source src="uchiage.mp4" type="video/mp4">
<p>このブラウザは動画再生に対応していません</p>
</video>
<!--中に入れたテキストは video要素に対応していない古いブラウザ用です-->
<source>要素を使う時は、<video>要素にsrc属性を使っちゃダメ。
使うとエラーになります。src以外の属性(controls, poster など)はOK。
<source>要素では、src属性でファイルのURLを、type属性でMIMEタイプを指定。
ここまでで、たいていの最新ver.ブラウザで再生できます。
さらに、<source>要素の media属性で、メディアタイプを指定することもできます。
<video>に未対応のブラウザのために代替コンテンツに<embed>を
<video>内に入れる未対応ブラウザ向けの代替コンテンツを、テキストでなく <embed>要素にしてプラグインで動画を再生できるようにすれば、古いブラウザでも動画を見ることができます。
<video>に対応したブラウザでは、中の<embed>は無視されます。
サンプルはこちら。これは画像です↓ クリックで別ウィンドウで開きます。
HTMLはこちら。
<video controls poster="img/vid_img.jpg" preload="auto" width="640" height="360">
<source src="uchiage.webm" type="video/webm">
<source src="uchiage.mp4" type="video/mp4">
<embed src="uchiage.mp4" width="640" height="380" type="video/mp4" autoplay="false"
controller="true" pluginspage="http://www.apple.com/jp/quicktime/download/">
</video>
おすすめの動画変換ソフト「Miro Video Converter」
<source>要素で複数のファイルを指定する場合は、同じ動画内容でファイル形式が違うファイル(最低2コ)を、サーバに上げておくので、動画ファイルを違う形式に変換する必要があります。
そのとき使う動画変換ソフトでおすすめは、
「Miro Video Converter」
フリーソフトで、どんな形式の動画も MP4、WebM、Ogg Theora に変換できます。
サイズ(画面アスペクト比)も自由に指定できたり、Android、iPhone、iPad用に変換できます。使い方もとても簡単。見ればすぐわかります。
動画ファイルの形式と、いわゆるコーデック問題について
注:この項は、初回投稿は2013年12月でしたが、その後、Mozilla と Opera が MP4 を採用したので、若干書き直しています。(2019年1月記)
動画や音声ファイルには「コーデック」と呼ばれる方式があります。
動画や音声のエンコード・デコード(圧縮・解凍)方式が「コーデック」。
「コンテナ(音声と動画のファイルをセットにして格納するためのフォーマット)」も含めて「コーデック」と言ったり、種類によっていろいろみたいです。
動画のコーデックの代表的なものは、次の3つだそうです。
- H.264(エイチ ニーロクヨン)
- これは「MPEG-4 AVC」と同じモノ(AVCは、Advanced Video Coding の略)
いわゆるMPEG4、MP4と読んでるやつ。拡張子は「.mp4」ITU-T(国際電気通信連合(ITU)の電気通信標準化部門)で勧告されたビデオコーデック。
高画質で圧縮率が高いのが特徴で、高品質でも軽い。
デジタルビデオカメラやワンセグ放送もこのフォーマットだそうです。Flashのプラグインもこれを使っているとか。
ロイヤリティあり。 - Ogg Theora(オッグ シオラ)
-
いわゆるOGVってやつ。拡張子は「.ogv」(.oggは非推奨だって)
動画圧縮はTheora、コンテナフォーマットにOgg bitstream formatを使った動画形式。
同じコンテナで Vorbis、Speex、FLACなどがありますが、Theoraが HTML5標準の採用候補になったんだそうです(候補から外れたって噂もあるけど、ブラウザはサポートしてるし現状使える)。OggはXiph.Org Foundationによって規格化されたコンテナフォーマット。
Ogg Theora は、圧縮率で H.264 に劣る(ちょっと重い)のだそうです。オープンソース(ロイヤリティ無し) - WEBM(ウェブエム)
-
グーグルが開発した動画形式。ビデオコーデックにVP8、音声コーデックにVorbis、コンテナにMatroskaのサブセットを使った形式。拡張子は「.webm」
高品質でロイヤリティフリーの動画形式を目指してグーグルが作ったもの。
でも、「VP8」はグーグルが買収した会社のコーデックなんだけど、これに特許問題が起こったりしてちょっとモメてたとか(2013年3月に決着したそうです)。オープンソース(ロイヤリティ無し)
で、いわゆるコーデック問題なんですが、
最初、Microsoft と Apple が「H.264」をサポートすることにしたそうです。
Google も YouTube 買ったときに YouTube で「H.264」を採用したそうです。
でも「H.264」はロイヤリティが発生するので、お金のある Microsoft、Apple、Google はいいけど、オープンソースでやっている Mozilla Firefox はムリ。Opera も同じ。
なので Mozilla と Opera はオープンソースの「Ogg Theora」を採用したんだって。
ただ、「H.264」はネット動画配信ではライセンスは無料とかで、採用すれば必ずお金がかかるというわけでもないらしい。Mozilla と Opera はオープンソースじゃないのがイヤみたい。
で、Google は「H.264 はロイヤリティがかかる。Ogg Theora は圧縮率が少し悪い。ロイヤリティ無しで高品質なのを自分らで作ろう」ということで「WEBM」を開発。
Mozilla と Opera もこの考えに賛同して「WEBM」を採用したんだそうです。
その後、Mozilla と Opera が H.264をやっぱり採用することになり、今の 各ブラウザのサポート状況はこうなっているそうです。
(2018年6月時点。参考:audio及びvideoで対応しているメディア形式 | MDN)
H.264 (.mp4) | Ogg Theora (.ogv) | WEBM (.webm) | |
---|---|---|---|
IE | ○ | × | △ |
Safari | ○ | × | △ |
Chrome | ○ | ○ | ○ |
Firefox | ○ | ○ | ○ |
Opera | ○ | ○ | ○ |
サーバの「 .htaccess ファイル」に type を追加
これけっこう大事かも。
<source>要素で MP4 と WEBM を指定したのに「Firefoxで読めるはずのWEBMが読めない!」なんて時は、ファイルをアップしたサーバが、動画ファイルを認識してない可能性が大です。(私のサーバは、OGV、WEBMを認識していませんでした)
この場合は、サーバの .htaccess ファイルに AddType を追記してやります。
サーバのルート(第1階層)にある .htaccess ファイルを、FTPソフト上で編集するか、ダウンロードして編集します。
ダウンロードするなら、OSによっては、最初に「.(ピリオド)」のあるファイル名では不可視ファイルになるので、ダウンロードする前に「.」をFTPソフト上で取ってからダウンロードしよう。
編集後アップロードしたら、先頭に「.」を付け足しておくのを忘れずに!
以下のように、「AddType」に続けて、MIMEタイプとファイルの拡張子を、半角スペースで区切って記述します。1行に1つずつ、改行しながら複数指定します。
AddType video/ogg .ogv
AddType video/webm .webm
AddType video/mp4 .mp4
#この最終行の空きも重要だったりします
最後の行が、この .htaccess ファイルの最終行ならば、空白の1行を足しておこう。
.htaccess は、リターン(改行)で解釈される場合があるので、
最後の行が認識されないことを避けるために、こうしたほうが無難なのだそうです。
空白行でエラーになることは無いそうですので、入れておこう。
コメントを入れたい時は先頭に「#(ハッシュ)」をつけます。
先頭に#を付けた行がコメントになります。
# BEGIN video_type
AddType video/ogg .ogv
AddType video/webm .webm
AddType video/mp4 .mp4
# END video_type
mediagroup属性で同期させることも
メディア要素は、mediagroup属性で同じグループ名を付けた動画どうし、動画と音声、音声どうしがグループとして扱われ、同期再生などができます。
この属性、今のところ Chromeしか対応していないようです。
mediagroup属性に関しては、<audio>要素も関わってくるので、
次回の<audio>要素の次の、[67] で紹介します。
<video>の属性一覧
- src="URL"
- 組み込むファイルのURL。
<video>要素はsrcは1つしか指定できないので、複数指定する場合は、ここでは指定せず<source>要素で複数指定する。<video src="ex.mp4" controls width="640" height="380" poster="ex.jpg" autoplay loop preload="auto" ></video>
- controls(または「controls=""」「controls="controls"」 )
- コントローラーを表示。ユーザが再生・ポーズ・音量調整などを行える
。
<video src="ex.mp4" controls width="640" height="380" poster="ex.jpg" autoplay loop preload="auto" ></video>
- width="表示させる動画の幅" height="表示させる動画の高さ"
- 表示させる動画の幅、高さをピクセルで指定
。
<video src="ex.mp4" controls width="640" height="360" poster="ex.jpg" autoplay loop preload="auto" ></video>
- poster="画像のURL"
- 動画が再生可能になるまで表示させるトップ画像(静止画面)のURLを指定。
ブラウザが動画形式をサポートしていない場合は、この画像が代替画像になる。<video src="ex.mp4" controls width="640" height="380" poster="ex.jpg" autoplay loop preload="auto" ></video>
- autoplay(または「autoplay=""」「autoplay="autoplay"」 )
- ロード後すぐに自動再生する
。
<video src="ex.mp4" controls width="640" height="380" poster="ex.jpg" autoplay loop preload="auto" ></video>
- loop(または「loop=""」「loop="loop"」 )
- ループ再生する
。
<video src="ex.mp4" controls width="640" height="380" poster="ex.jpg" autoplay loop preload="auto" ></video>
- muted(または「muted=""」「muted="muted"」 )
- 消音再生する
。
<video src="ex.mp4" controls width="640" height="380" poster="ex.jpg" autoplay loop muted> </video>
- preload="none" または "metadata" または "auto"
- 3つの値のいずれかで、ブラウザにプリロードに関してのヒントを指定。
(実際にプリロードするかどうかはブラウザに依存するんだそうです)- none:必要になったら初めて読み込む
- metadata:メタ情報のみプリロード
- auto:ブラウザにおまかせ(プリロードしてもOK)
<video src="ex.mp4" controls width="640" height="380" poster="ex.jpg" autoplay loop preload="auto" ></video>
- mediagroup="グループの名前(任意)"
-
この属性で同じグループ名を付けた動画どうし、動画と音声、音声どうしがグループとして扱われ、同期再生などができる。
今のところChrome以外は「mediagroup.js」が必要。<video src="ex1.mp4" controls mediagroup="sample"></video> <video src="ex2.mp4" mediagroup="sample"></video>
mediagroup属性に関しては [67] でサンプルを紹介します。 - このほかグローバル属性も使います
- id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。
次回予告
次回は同じメディア要素の<audio>要素です。
<audio>要素は、音声をプラグイン無しで再生させるための要素です。
使い方は今回の<video>要素とほとんど同じです。
- 関連記事
-
- [69-4] Canvasに画像を描画しよう(トリミングやクリッピングも)
- [69-3] Canvasに曲線を描こう(線のスタイルも)
- [69-2] Canvasに基本的な図形を描こう
- [69-1] canvas要素でグラフィックスを表示する領域を作ろう
- [68] 動画や音声に字幕やキャプションを表示しよう track要素
- [67]「mediagroup属性」でメディア要素を同期させよう
- [66] 音声をプラグイン無しで組み込もう audio要素・source要素
- [65] 動画をプラグイン無しで組み込もう video要素・source要素
- [64] プラグインで再生されるコンテンツを組み込もう embed要素
- [63] インラインフレームで 他のHTMLファイルを組み込もう iframe要素
- [62] 外部コンテンツを組み込もう object要素・param要素
- [61] イメージマップ(リンク領域)を作ろう map要素・area要素
- (ちょっとメモ)属性の「引用符」や「値」の省略について
- (ちょっとメモ)HTML5 での 省略可能なタグについて
- [60] フォームを美しく整えよう(CSS使用)
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク