[65] 動画をプラグイン無しで組み込もう <video><source>

最終更新日:-0001年11月30日  (初回投稿日: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>要素を併用して複数指定することができます。

記事掲載時は、width か height属性のどちらか片方だけ指定すれば縦横比に従って表示すると
書いていましたが、これはPCの場合だけのようです。
タブレットで確認したところ、width属性と height属性の両方の指定が必要です。
本文とサンプルファイルを修正いたしました(2013年12月16日追記)

使用する要素 <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. おすすめの動画変換ソフト「Miro Video Converter」
  4. いわゆるコーデック問題について
  5. サーバの「 .htaccess ファイル」に type を追加する
  6. <video>に未対応のブラウザのために代替コンテンツに<embed>を入れておこう

<video>要素だけで動画を組み込んでみよう

<video>要素の使い方はとてもシンプル。
src属性で動画ファイルのURLを指定し、
width と height属性で幅と高さのサイズを指定します。
controls属性をつければ、ブラウザがコントローラを表示してくれます。
poster属性で指定した静止画像は、ロード中の表示画面になり、
src属性で指定したファイル形式をブラウザがサポートしない時は、そのまま代替画像になります。

<video>要素に対応していない古いブラウザでは、この代替画面すら表示されないので、
古いブラウザ用には、<video>〜</video>内に代替コンテンツを入れます。
代替コンテンツはテキストでも良いのですが、<embed>要素を入れるほうがベストです。

<video src="uchiage.mp4" width="640" height="360" controls poster="img/vid_img.jpg" preload="auto">
  <p>このブラウザは動画再生に対応していません</p>
</video>
<!--<p>は video要素に未対応の古いブラウザ用。<embed>を入れるほうがいいね-->

上のソースのサンプルはこちらです。
クリックで別ウィンドウで開きます。

*動画ファイルのサイズはMP4=約1.2MB、WEBM=約2MBです。

上のサンプル(MP4ファイル)を、Firefox、Opera で見ると再生されません。
でも、poster属性で指定した画像は表示されています。
これは、<video>要素に対応しているが、MP4は再生できない…ってこと。
Chrome、IE、Safari ではMP4をサポートしているので再生されます。(IE8以下は未対応)

このように、ブラウザによってサポートする動画形式が違うという問題があるんです。
プラグイン無しで動画を再生するということは、ブラウサに依存するということですが、
今はまだ各ブラウザの開発元でイロイロあって、HTML5標準の動画形式を決められないのだそうです。(いわゆるコーデック問題。後述

でも大丈夫。
<source>要素を使えば、複数のファイルを指定できるので、どのブラウザでも動画を再生できるようになります。(同じ動画を、複数の異なるファイル形式で保存しておく必要があるけどね)

<source>でファイルを複数指定すればOK

ではさっそく、<video>要素内に <source>要素で複数のファイルを指定してみましょう。

例えば、MP4(IE, Chrome, Safari がサポート)形式と、WEBM(Chrome, Firefox, Opera がサポート)形式の
ファイルを指定しておけば、<video>要素に対応してるどのブラウザでも、ちゃんと再生できるようになります。(MP4とOGV(Chrome, Firefox, Opera がサポート)という組み合わせもアリ。詳細後述

<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>

上のソースのサンプルはこちら。
クリックで別ウィンドウで開きます。
(先ほどのサンプルファイルの2番目のサンプルです)

<source>要素を使う時は、<video>要素にsrc属性を使っちゃダメ
使うとエラーになっちゃいました。src以外の属性(controls, poster など)はOK。

<source>要素では、src属性でファイルのURLを、type属性でMIMEタイプを指定。
ここまでで、たいていの最新ver.ブラウザで再生できます

さらに、<source>要素の media属性で、メディアタイプを指定することもできます。

また、<source>要素の src属性で、MIMEタイプのコーデックス(codecs)パラメータを、さらに詳しく指定することもできるんだそうです。例えば下記のように指定します。

<video controls poster="img/vid_img.jpg" preload="auto" width="640" height="360" >
  <source src='video.mp4' type='video/mp4; codecs="avc1.4D401F, mp4a.40.2"'>
  <source src='video.webm' type='video/webm; codecs="vp8, vorbis"'>
</video>

type属性の値は「' '(シングルクォート)」で全体を囲み、まずMIMEタイプを指定。「;(セミコロン)」のあと cordecs を指定。
この値は「" "(だぶるクォート)」で囲みます。
codecs の値は、動画の場合「,(カンマ)」で区切って、2つの値を書きます。前半が動画、後半が音声のプロファイル。
ファイル形式によって、書き方が決まっているようです。
上の例では、
1行目は、MP4(H.264)のメインプロファイルでレベル3.1。音声はAAC-LC
(これは、iPadやiPhone4以降で対応する1280x720以内の動画によく使われる形式だそうです)
2行目は、WEBMの VP8動画で、Vorbis音声。

MIMEタイプのコーデックス パラメータのサンプルがこちらにありますので(少し古いようですが…)ご覧ください。

おすすめの動画変換ソフト「Miro Video Converter」

<source>要素で複数のファイルを指定する場合は、
同じ動画内容でファイル形式が違うファイル(最低2コ)を、サーバに上げておくわけです。
なので、動画ファイルを違う形式に変換する必要があります。

そのとき使う動画変換ソフトでおすすめは、
「Miro Video Converter」
フリーソフトで、どんな形式の動画も MP4、WebM、Ogg Theora に変換できます。
サイズ(画面アスペクト比)も自由に指定できたり、Android、iPhone、iPad用に変換できたり、便利さに定評があるようです。
使い方もとても簡単。見ればすぐわかります。

動画ファイルの形式と、いわゆるコーデック問題について

動画や音声ファイルには「コーデック」と呼ばれる方式があります。
動画や音声のエンコード・デコード(圧縮・解凍)方式が「コーデック」。
「コンテナ(音声と動画のファイルをセットにして格納するためのフォーマット)」も含めて「コーデック」と言ったり、種類によっていろいろみたいです。

動画のコーデックの代表的なものは、次の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 Software ASA も同じ。
なので Mozilla と Opera はオープンソースの「Ogg Theora」を採用したんだって。
ただ、「H.264」はネット動画配信ではライセンスは無料とかで、採用すれば必ずお金がかかるというわけでもないそうな。
Mozilla と Opera はオープンソースじゃないのがイヤみたい。

で、Google は「H.264 はロイヤリティがかかる。Ogg Theora は圧縮率が少し悪い。ロイヤリティ無しで高品質なのを自分らで作ろう」ということで「WEBM」を開発。
Mozilla と Opera もこの考えに賛同して「WEBM」を採用したんだそうです。

というわけで、今のところ各ブラウザのサポート状況はこうなっています。

  H.264 (.mp4) Ogg Theora (.ogv) WEBM (.webm)
IE × ×
Safari × ×
Chrome
Firefox ×
Opera ×

その後、Mozilla が「H.264をやっぱり採用しよう」とか、
Google が「H.264のサポートをやめるかも」とか、いろいろあるようで、
どれか1つに決めることは無さそう?だとか。
それでも大昔の各ブラウザが勝手気ままをやってた頃と比べれば、足並みが揃ってるほうじゃないでしょうか。<source>要素もあるし、少なくとも2つのファイルの組み合わせで何とかなるからね。

サーバの「 .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

<video>に未対応のブラウザのために代替コンテンツに<embed>を

<video>と</video>の間に入れる未対応ブラウザ向けの代替コンテンツを、<embed>要素にして
プラグインで動画を再生できるようにすれば、古いブラウザでも動画を見ることができます。
<video>に対応したブラウザでは、中の<embed>は無視されます。

<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>

上のソースのサンプルはこちら。
クリックで別ウィンドウで開きます。
(先ほどのサンプルファイルの3番目のサンプルです)

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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 31 - - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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