忍者ブログ
思ったことを思ったように書いていきます。どうでもいい話ばかりなので気楽に読んでください。
[41]  [40]  [39]  [38]  [37]  [36]  [35]  [34]  [33]  [32]  [31
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

ちょっと仕事で必要になりそうなので、videoタグの使い方を研究してみました。

基本
<video src="movie/hoge.mp4" tabindex="0"></video>
これだけ。

応用
<video src="movie/hoge.mp4" controls></video>
これでブラウザがコントローラーをつけてくれる。

さらに
<video src="movie/hoge.mp4" controls autoplay loop></video>
勝手に再生、勝手にループという迷惑極まりない動画。

videoに使えるプロパティの主なものはこんな感じ。
-------------------------------------
controls・・・コントローラーを表示。値は省略されてるけど、入れるならcontorols="contorols"。二度手間。
autoplay・・・勝手に再生。これも値省略可。
preload・・・画像の読み込みタイミング。値はnone(事前に読みこまない),metadata(メタデータのみ読み込む),auto(事前に読みこむ)。
loop・・・ループする。値省略可。
poster・・・Youtubeとかのサムネイルみたいに、画像を再生してない時に表示させる画像。値はファイルパス。
-------------------------------------
あと普通にwidth、heightも使えるけど、なくても画像に合った大きさになるみたい。 逆に、これが合ってないとコントローラと画像の位置がおかしくなったりしたので、特別な意図がなければ使わない方がいいかも。あった方が描画は速いんだろうけど。

現在video要素の標準規格ってのはまだ決まってないので、各ブラウザで使えるファイル形式が違う。 なので、クロスブラウザ対応しようと思ったらちょっと大変だけど数種類のファイルを用意しなくちゃいけません。
噂では.webmっていうのにまとめられようとしているとか? でも正式に発表されるまではどうなるか分からないので、現状に合わせておいた方が無難でしょう。

ちなみに現状の対応コーデック
-------------------------------------
Firefox(3.1~):.ogv、.webm
Chrome(3~):.mp4、.ogv、.webm
Safari(3.1~):.mp4
Opera(?).ogv、.webm
IE(9~):.mp4
-------------------------------------
Chrome最強杉ワロタwww
でもたしかGoogleはH.264のサポートやめるって言いだしたんだよね。 てことは、.mp4の地位は危ないですね。

複数形式のファイルを入れておくには以下のようにします。
<video>
    <source src="movie/hoge.ogv" type="video/ogg" />
    <source src="movie/hoge.mp4" type="video/mp4" />
    <source src="movie/hoge.webm" type="video/webm" />
    <p>このブラウザはvideo要素に対応していません。<a href="movie/hoge.mp4">こっから</a>ダウンロードしてくださいよっと。</p>
</video>

type属性はHTML5では全般的に省略できるようになったようなのでなくてもいいみたいです。sourceタグのスラッシュもサンプルによってあったりなかったり・・・。
ちなみに、.ogvのMIMEタイプはogvじゃなくてogg!これ間違えてた。
ここではpタグ入れてますが、こんな感じで未対応ブラウザにはFlash見せたり、ダウンロードリンク入れたり、静止画像(imgタグ)入れたり、色々できます。
まあいまだにIEなんか使ってるやつにはm9(^Д^)プギャーとでも表示させときゃいいと思いますがね。

とりあえず、試した中では.mp4はあまりよくない。ずっとmp4で挑戦してたけどChromeでもだめでした。.ogvにしたらFf、Chromeともできました。

昨日ずっと挑戦しててできなくて、今日になったら急にできたんだけど、一体何がだめだったんだろう? .ogvのMIMEタイプが違ったせいかなあ。

ソースは超シンプルなので、画像さえきちんとしてれば誰でもできます。 いやーありがたい。
js組み合わせるともっと色々出来るみたいですけど(ブラウザ依存のじゃない再生・停止ボタン作ったりとか)。
ちなみにvideoはインライン要素みたいです。

以上、昨日今日で学んだ件でした。忘れないうちにメモメモ。
走り書き失礼!
PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
HN:
ゆり
年齢:
37
性別:
女性
誕生日:
1986/05/31
職業:
web制作
趣味:
ゲーム、ショッピング、ダンス、などなど
自己紹介:
見かけによらず社会人なミニマムガール。151cmだけどオーラは大物・・・との噂。
ゲーマー歴20年で子供の頃からの夢は「ゲームを好きなだけ買いまくる」ことと「攻略本を作る」こと。
ほかにも色んな本読んだり、衝動買いしたり、モダンダンスやったりと、勝手気ままに生きてます。
カレンダー
04 2024/05 06
S M T W T F S
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
ブクログ
バーコード

忍者ブログ [PR]

Graphics by まぜわん。 / Designed by Addio.