audio-video-geolocation

audio/video/Geolocation
やること
・audio/video
・デモ
・使い方
・プロパティ/メソッド一覧
・応用例紹介
・Geolocation
・デモ
・使い方
・プロパティ/メソッド一覧
・GoogleMapsとの連携
audio/video
デモ
HTML5 ROCKS
http://playground.html5rocks.com/#audio_tag
http://playground.html5rocks.com/#video_tag
audio - 使い方
<audio src=“音声ファイルのURL”
preload=“自動で読み込むか(auto/metadata/none)”
autoplay=“自動で再生するか
loop=“繰り返し再生するか”
controls=“プレーヤーを表示するか”
>
ここに非対応場合の表示
</audio>
iPhoneでは、autoplay属性とpreload属性が無効
→勝手に通信して通信費取られるといけないので、ユーザの明確な
操作がない限りデータ取得を始めない
各ブラウザへの対応
<audio>
<source src=“sample.mp3” />
<source src=“sample.ogg” />
</audio>
HTMLの上から順に読み込み可能な形式かチェックしていく
■対応状況の参考
主要ブラウザのHTML5 audioタグで使えるファイル形式の再生対応状
況を調べてみた：■ 音楽方丈記 ■
http://sothis.blog.so-net.ne.jp/2010-10-27
video - 使い方
<video poster=“サムネイル画像のURL”
src=“動画ファイルのURL”
preload=“自動で読み込むか(auto/metadata/none)”
autoplay=“自動で再生するか
loop=“繰り返し再生するか”
controls=“プレーヤーを表示するか”
>
<source src=“動画ファイルのURL” type=“MIMEタイプ” />
<source src=“動画ファイルのURL” type=“MIMEタイプ” />
ここに非対応場合の表示
</video>
Audioと同様に、iPhoneではautoplay属性とpreload属性が無効
→poster属性に、ビデオが再生できない時に表示する画像を設定できる
プロパティ/メソッド/イベント一覧
HTML5のvideo/audio＋JavaScript APIテクニック - ＠IT
http://www.atmarkit.co.jp/fwcr/design/benkyo/html5appli11/01.html
応用例
html5で videoの任意のフレームをcanvasに描画するメモ
- 超自己満足プログラミング
http://d.hatena.ne.jp/favril/20100225/1267099197
HTML5 Video Destruction
http://www.craftymind.com/factory/html5video/CanvasVideo.ht
ml
Geolocation
デモ
HTML5 ROCKS
http://playground.html5rocks.com/#get_current
_position
参考書を写したサンプル
http://www11.atpages.jp/u1fukui/html5/geotest.html
書き方と
プロパティ/メソッド一覧
個人的なwikiにまとめました
http://u1fukui.com/dokuwiki/doku.php?id=language:html5:geol
ocation
GoogleMapsとの連携
指定した位置にマークを付ける
http://www11.atpages.jp/u1fukui/html5/gmap-test.html
クリックした位置にマークを付ける
http://www11.atpages.jp/u1fukui/html5/gmap-test2.html
GoogleMap APIの学習
Google Maps JavaScript API V3
- Google Maps JavaScript API V3 - Google Code
http://code.google.com/intl/ja/apis/maps/documentation/javas
cript/
→スタートガイドを読みながら学習
Google Maps入門(Google Maps JavaScript API V3)
http://www.ajaxtower.jp/googlemaps/
→はてブ数が多いし参考になりそう
参考
書籍：
『スマートフォンのための
HTML5アプリケーション開発』

Download Report