また、本項執筆時点ではHTML5は残念ながらストリーミング再生には対応していないようです。
| コーデック | 概要 | Chrome | Fire Fox | Opera | Safari | iPhone /iPad | IE |
| Ogg Theora Ogg Vorbis | Xiph.org Foundationが開発したオープンソースのビデオ・音声コーデック。 | ○ | ○ | ○ | × | × | × |
| MP4(H.264, AAC) | 携帯電話からHDTV等の高品質再生まで対応した共通規格。 | × | × | × | ○ | ○ | ○ |
下にビデオ要素を使った例を示します。動画ファイルをGoogle Docに置いてるので、ビデオが見られない場合があるかもしれません。（Google Docはアクセスが集中するとアクセス制限がかかるようです。）
以下に、HTMLを示します。
poster属性とsrc属性は下の例では長くなっていますが（Googleのサービスを利用するため、長いURLになっています。）、サーバー等に配置する場合は、もっと短いURLで記述できるはずです。
<video controls="controls" height="300" poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrN7GoVUmc8GWwlCrypw4f2ZMFCMZCQJvAKGxFIa9wOqK_ECXHs-Zo2sI5otcUc07B6PTudt60HymlNn6UJeHVh9M1wyagAzFO3fjpphPCDWsapTAxssPY5rBUuYHNwIV2fVcAlmcCTAQR/s1600/_Sunflower.gif" preload="auto" src="https://docs.google.com/uc?id=0B_-pW_pm0gmnOTQxMDlkYzUtNjk0OS00OGM3LWI4ODAtZWM3Y2Y5YzZkMTYx&export=download&hl=en_US" width="400">再生できません。
</video>
それぞれのパラメータは以下の意味になります。
| 属性 | 内容 |
| src | 動画ファイル名 |
| autoplay | 自動で再生を行うか指定。 |
| controls | 再生・停止などのコントローラを表示する指定。 |
| preload | 自動読み込みを行うか指定。 auto:自動読み込み有効 metadata:メタデータのみ none:自動読み込み無効 |
| loop | 繰り返し再生を指定。 |
| poster | 動画が再生されるまでの間に表示される画像を指定 |
どのブラウザでも再生できるようにするには、以下のようにsource属性でブラウザに対応したファイルの指定を行います。
<object>〜</object>まではHTML5に対応していないブラウザでもFlashを使って再生できるようにするタグです。
sourceの「type」は基本的に不要ですが、動画データによっては複数のタイプを含んでいてブラウザがどのタイプを選べば良いか判断できない場合があるようなので、その場合に備えて一応指定しておきます。
当然ですが、動画ファイルはそれぞれ用意する必要があります。
| type | 内容 |
| video/mp4; codecs='avc1.42E01E,mp4a.40.2' | MP4コンテナ。シンプルベースラインH.264動画とAAC音声 |
| video/mp4; codecs='mp4v.20.8,mp4a.40.2' | MP4コンテナ。シンプルプロファイルレベル0動画とAAC音声 |
| audio/ogg; codecs='vorbis' | OGGコンテナ。vorbis音声コーデック |
下の例では、sourceに「OGG用ファイルのURL.ogg」「フラッシュ用ファイルのURL.swf」と指定していますが、この例では実在しないファイルなので再生されません。動画ファイルの変換が面倒くさいのでしてないだけです。（汗）
<video controls="controls" height="300" poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrN7GoVUmc8GWwlCrypw4f2ZMFCMZCQJvAKGxFIa9wOqK_ECXHs-Zo2sI5otcUc07B6PTudt60HymlNn6UJeHVh9M1wyagAzFO3fjpphPCDWsapTAxssPY5rBUuYHNwIV2fVcAlmcCTAQR/s1600/_Sunflower.gif" preload="auto" width="400">再生できません。
<source src="https://docs.google.com/uc?id=0B_-pW_pm0gmnOTQxMDlkYzUtNjk0OS00OGM3LWI4ODAtZWM3Y2Y5YzZkMTYx&export=download&hl=en_US" type="video/mp4; codecs='avc1.42E01E,mp4a.40.2'"></source>
<source src="OGG用ファイルのURL.ogg" type="video/ogg; codecs='theora, vorbis'"></source>
</video>
<object data="player.swf" type="application/x-shockwave-flash"> <param name="movie" value="フラッシュ用ファイルのURL.swf">
</object>
0 件のコメント:
コメントを投稿