[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>については後日詳細)

本日のINDEX
  1. <video>要素だけで動画を組み込んでみよう(src属性で1コだけ)
  2. <source>でファイルを複数指定(<video>のsrc属性は使わないこと)
  3. <video>に未対応のブラウザのために代替コンテンツに<embed>を入れておこう
  4. おすすめの動画変換ソフト「Miro Video Converter」
  5. いわゆるコーデック問題について
  6. サーバの「 .htaccess ファイル」に type を追加する

<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>要素とほとんど同じです。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.