2013/01/25

HTML5のvideoタグのプロパティ

HTML5で力が入っているのは、やはりメディアAPIではないでしょうか? Ardor(@ArdorOnline)です。 その中でもvideoタグに注目しています。videoタグについて少し見て行きたいと思います。

動画の共有

今でもYoutubeなどの動画サイトでは埋め込みURLを発行していて、埋め込みURLを張り付ければ動画を見ることができます。 これは、iframeなどを利用して動画ページを読み込んで再生しています。 ですから、動画を再生するコントロールバーなどは発行しているサイトのものが表示されます。 この方法で気になるのは、一度サイトへアップロードして、共有するといった点です。 ではサイトにアップロードせずに動画を再生する方法はないのでしょうか? それを解決する方法が、videoタグです。

videoタグ

videoタグは、ブラウザの機能で再生が可能になります。 ブラウザによって対応している動画形式が異なりますが、徐々に再生できる形式が増えてきているようです。 videoタグを利用すれば、ファイルをHPやブログが参照できる場所にアップロードすれば直接再生することが可能です。

videoタグ固有プロパティ

videoタグ固有のプロパティは次のものがあります。

プロパティ 説明
width 動画を表示する領域の幅(ピクセル)
height 動画を表示する領域の高さ(ピクセル)
videoWidth 動画の元々の幅
videoHeight 動画の元々の高さ
poster 表示できる動画フレームがダウンロードされるまで、代わりに表示する画像のURL

固有タグの他に共通でメディアAPIがあります。 ちょっと量が多くて整理できていませんが、整理できたら記事にしようと考えています。

最後に

これからのWebは、videoを始めとするメディア系への対応が増えてくると思います。
ブログも動画チャンネルになるかもしれないですね。

最後までお読み頂き、ありがとうございます。

0 件のコメント:

コメントを投稿