FC2ブログ

HTML videoタグの使い方

HTML videoタグの使い方

videoタグの書式は

<video src="動画のURL" controls>

画像に似てるけど
フォーマット関係により
ブラウザーで再生できないことがある

このため
videoタグの内側に異なるフォーマットの動画ファイルを指定して対処する

この場合の書式は
<video controls>
<source src="動画のURL.3gp"/>
<source src="動画のURL.mp4" />
</video>


videoタグの属性は
src
ファイルのURLの指定

loop
ループ再生の指定

controls
再生のためのインターフェースを表示

poster
動画の再生準備が整うまでの間に表示しておく画像のURL

autoplay
自動で再生開始

preload
autoを指定すれば、ファイルの先読みこみをする

たた、スマートフォンの場合たと
autoplayとpreloadは無効化されるので注意

あと、注意すべきところは
Webサーバーでの
MIME Typeの指定

Webサーバーによっては
動画のMIME Typeが指定されていないため
動画再生できないことがある

このため
.htaccessで
MIME typeを指定する

以下はその例

#MIME Type指定
AddType video/mp4 .mp4

ちなみに、スマートフォンでの対応フォーマットは
iOSは
MPEG4/H.264

Androidは
MPEG4/H.264
OGG/Theora/WebM/VP8

このため、スマートフォン対応させるなら
MPEG4/H.264形式を入れておく

スマートフォンでの注意すべきところはまだあり
動画をゲームに使うときには
videoタグで動画再生しようとすると
全画面で動画再生になるので
画面の一部へ動画を埋め込んだり
Javascriptで細かい制御かできないということ
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック