html5

iPhone, Android(desire) ブラウザのhtml5対応状況

手元にあるスマートフォンのhtml5対応状況を、http://html5test.com/ で確認したのでメモ。 iphone4 (4.0.2): Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0_2 like Mac OS X; ja-jp) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A400 Safar…

iPhone Safariだとaudio/videoタグのautoplay, autobuffer属性が効かない

Resources - Safari - Apple Developer の User Control of Downloads Over Cellular Networks」の部分 In Safari on iPhone OS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, autobuffer…

html5 の File API を使って、ローカルのテキストファイルを読み込んでみる

とっても簡単です(Firefox 3.6 で動作を確認)。 html fileのアップロードフォームにonchangeを仕込んでおきます。あとは、読み込んだファイルの内容を表示するtextareaを用意。 <html> <head> <meta charset="utf-8"> </head> <body> <input type="file" onchange="read(this)" /> <hr /> <textarea id="text" cols="80" rows="20" wrap="off"></textarea> </body> </html>…

html5の File API を使って、アップロード無しで画像プレビュー

画像をプレビューするために、サーバへアップロードする必要がなくなります*1。 html fileのアップロードフォームにonchangeを仕込んでおきます。 あとは、プレビュー表示用の要素だけ準備。 <html> <head> <meta charset="utf-8"> </head> <body> <form> <input type="file" name="file" onchange="preview(this)" /> </form> <hr /> <b>preview:</b><br /> <div id="preview_field"></div></hr></body></html>

html5で複数ファイルアップロード&保存

とても簡単。 html <html> <head> <meta charset="utf-8"> </head> <body> <form action="save.cgi" method="POST" enctype="multipart/form-data"> <input type="file" name="files" multiple /> <input type="submit" value="submit" /> </form> </body> </html> input type="file" で multiple属性を追加するだけ。 save.…

canvasに描いた絵(画像)をサーバに保存

canvasに描かれたデータを取得するには、canvas.toDataURL() を使います。 toDataURL()で得られるのは、base64エンコードされた画像情報なので、 それをサーバに送って、base64デコードして保存という流れです。 toDataURL()して、そのデータをPOSTする部分…

canvasで簡単なお絵かきをしてみたメモ

タイトルのまんまです。 Firefox/Chromeあたりで動きます。デモページ html canvasを用意しとくだけです。 canvas内の座標を取るときに、layerX/Y で取りたいので、styleにposition:relativeを当てておきます。 (positionが当たってないと、layerX/Yは pageX…

html5で videoの任意のフレームをcanvasに描画するメモ

デブサミ2010のhtml5セッションで見たデモ(Movement tracker)*1 が、 衝撃的だったので video x canvas をちょっと勉強した。 1.videoの任意のフレームをそのままcanvasに描画させてみる htmlのbodyに書くにはこれだけ。 <video id="v" src="video.ogv" autobuffer controls></video> <canvas id="c"></canvas> <input type="button" value="copy frame" onclick="copyFrame()" /> copy frameボタン…