IDEA * IDEAドットインストール代表のライフハックブログ
HTML5＋JavaScriptでビデオエフェクターに挑戦！ (1/6)
HTML5ビデオエフェクターのサンプル。左側の動画にリアルタイムでエフェクトを加えて再生する。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） HTML5で追加される新機能の中でも、特に華やかなものといえば「Video」と「Canvas」でしょう。本連載でも、HTML5 Videoを使った3D動画プレーヤーやCanvasを使ったペイントツールなどを作成してきましたが、今回はこの2つの機能を組み合わせて「ビデオエフェクター」作りに挑戦します。 ひとくちにビデオエフェクターといっても、アドビ システムズの「After Effects」のように事前にレンダリングしてムービーを作成するアプリケーションから、アップルの「Motion」のようにムービーを再生しながらエフェクトを処理するタイプ、さらにはVJ (Video Jockey/Visu
HTML5 videoとjQuery UIでパノラマ動画プレーヤー (1/3)
スライダーで視点を変えられる360度動画。画像クリックでサンプルページを表示します（Safari 4、Opera 10.50でのみ表示可能） Flash Playerなどのプラグインがなくても、ブラウザー上で動画を再生できるHTML5 video。前回の記事では、HTML5 videoで動画を表示・再生する方法を解説しました。今回は、360度動画が撮影できるカメラ「bloggie（ブロギー）」で撮ったパノラマ動画を素材に、スライダー操作で視点を切り替えられるパノラマ動画サイトを完成させましょう。 HTML5 videoをJavaScriptで制御する ブロギーで撮った360度動画は、以下のような横長の1枚の動画になっています。 パノラマ動画サイトのサンプルは、360度ぐるりと見渡せる動画にするため、この横長の動画を2つ、水平に並べます（同じ内容のvideo要素を2つ用意する）。2つのvid
JavaScript処理をバックグラウンドで実行する方法 | エンタープライズ | マイコミジャーナル
Robert’s talk Robert Nyman氏がUsing HTML5 Web Workers to have background computational power - Robert's talkにおいて、Web Workersの実装例を紹介している。短くてわかりやすいサンプルコードが掲載されておりWeb Workersを試してみたい場合の最初の取っ掛かりとして取り組みやすい。 Web WorkersはHTML5とともに策定が進められているJavaScript API。JavaScriptファイルをダイナミックに読み込みバックグラウンドで処理を実施する。UIとは別のスレッドで動作する。特徴的な動作や仕組みまとめると次のとおり。 Web Workersの特徴 JavaScriptファイルを読み込んでバックグラウンドで処理を実行する。 別スレッドで動作するため、マルチコアの性能
Webブラウザで動画編集！ - Yanagi Entertainment
html5で videoの任意のフレームをcanvasに描画するメモ - 超自己満足プログラミング http://d.hatena.ne.jp/favril/20100225/1267099197 昨日この記事を見て、これはすごい！ すごいすごい！ ってなって、これができるんならWebブラウザだけで動画編集できるんじゃね？ と思ったりしたので、ざっくり作ってみました。 http://yanagiatool.appspot.com/jsvideo/player.html （MacのSafari4で動作確認。QuickTime + ChromeならWindowsでもいけるかも？） あそびかた 「動画を読み込む」ボタンを押すと、テキストボックスに入ってるurlの動画を読み込みます。「state」って書いてあるところが「stand by」になったら「再生 / 停止」ボタンを押してください。 あとは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
