position: absolute;

選択されているタグ : html5

タグを絞り込む : book javascript video

動作確認!検証環境を考える


この記事は(HTML5 Advent Calendar 2013)[http://www.adventar.org/calendars/125]の13日目になります。

「HTML5やJavaScript APIに関する話題であれば、Web標準からかけ離れた話題でなければ、なんでもOKです!」というテーマで、かけ離れてはいないけど微妙に離れているかもしれない感じになってしまいました。すいません!でも、必要かなあということで。

このAdvent Calendarを見てもわかるように、近年HTML5まわりは実装や新規格など激しい動きを見せています。そういった中で制作したものがちゃんと動くのか?動かないものに対しての代替手段はちゃんと機能しているのか?といったことが課題になるのはみなさんも実感しているでしょう。というわけで今回はIEとスマーフォンなどに関しての検証環境について書いてみたいと思います!


スマートフォン向けのフォームを作成する際に参考になる書籍


2013年の4月13日にCSS Niteビギナーズ:HTML5+CSS3というセミナー・イベントにHTML5でのフォームについて登壇してお話する予定です。

その中で自分の経験や記憶だけで話すというのは流石に偏ってしまわないか不安になるので、最終的なシナリオの組み立てのために手元にあった書籍(上の写真のもの)をざっと再度確認しました。

どれも参考になりますし、流石に押さえるべき点はどの本も押さえていますが、その中でも「スマートフォン向けのフォーム作成」に関して特におすすめできるんじゃないかというのが2冊ほどありましたので紹介します。


HTML5のvideoとcanvasで動画のキャプチャを取る


このエントリーはGraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012の19日のエントリーになります。

先日CSS Nite LP, Disk 25:Webデザイン行く年来る年(Shift6)に参加しました。その時にこのAdvent Calendarを起こしたoyamadaさんにもう「ひとつエントリー書いて」と言われましたので、ちょっと小ネタですが19日めとして登録しておきます。

動画のキャプチャを取る方法は様々ありますけど、HTML5でも手軽な方法でできますよということで。

サンプル
※動画はW3Cのサイトで利用されていたものを拝借しました。

「snapshot」というボタンを押すと再生中の動画のキャプチャを撮ってHTML内に挿入します。imgタグで入ってますので大抵の環境であれば右クリックで保存できます。

コードの解説ですが

canvasContext.drawImage(videoElement,0,0);
// 座標関係はとりあえず0,0で

以上!これでcanvasに再生中のvideoのキャプチャが取り込まれます。
ちなみにimgタグにcanvasのデーターを反映させる方法ですが、

imageElement.src = canvasElement.toDataURL('image/png');
// 'image/png'は出力する形式に合わせてください

というわけでJavaScriptのサンプルはこちらです。はい、小ネタでした!