SPAで動画を使って大ヤケドした話 - Qiita
tl;dr 気軽に removeChild するもんじゃない。 フレームワーク（Riot.js）は悪くない 概要 動画メインの小規模サイト（厳密にはSPAと言わないかも） スペック 動画は YouTube IFrame API と一部に video要素 を使用 フロントのフレームワークは Riot.js URL制御はRiot.jsのルータを使う バックエンドはSinatra（この記事には関係ない） YouTube IFrame APIで起こった問題 iframeをDOMツリーから切り離すとYouTubeのエラー頻発 <youtube> <iframe if={ page == 'hoge' } id="player" src="~" /> <script> routing (path) { this.page = path } riot.route(this.routing) onRead
iPhone Safariで動画をインライン再生する方法 - Qiita
iPhone SafariのVideoタグの制限 iPhone SafariのVideoタグには大きく2つ制限がある。 ユーザインタラクション（タップ）なしに再生できない 初期再生時必ずフルスクリーン再生になる 特に2がクセモノで、これのせいでモバイルブラウザに動画広告はほぼ無いし、モバイルブラウザゲームには動画演出がない（MotionJPEGみたいにjpegを数百枚数千枚差し替えるとか涙ぐましいことをしている例はある）。 制限は超えられる この制限が超えられないものかと調べてみると、やはり同じようなことを訊いている人が居た。 inline html5 video on iphone - Stack Overflow http://stackoverflow.com/questions/30855662/inline-html5-video-on-iphone で、そのベストアンサーが I
スマブラ(スマートフォンのブラウザ)上で動画をインライン再生させる方法① - Qiita
最初に 最近仕事で動画ものを扱うことが頻繁にあります。(変な意味ではありません) HTML5ではvideoタグを使えば、Webブラウザ上で動画を再生させるのがとても簡単になりました。 しかし対象のデバイスがスマートフォンの場合はそうは簡単にはいきません。 例えばvideoタグを使って動画をiPhoneで再生しようとすると、動画をページに埋め込むような形式で再生することができません。 ※以下、「動画をページに埋め込む形式」のことを「インライン」と呼びます。 (業務に使うかは置いといて) スマートフォンでもインライン再生させたい思いを胸に抱きつつ、 実現できそうな方法を調べていたら、とてもシンプルで使いやすいやつを見つけたのでメモ。 こいつです。 Frame Player http://vagnervjs.github.io/frame-player/ おそらく"スマートフォン 動画 インライ
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
JavaScript版 idleencoder
idleencoderとは idleencoderはGUI版のffmpegです。ffmpegは、オープンソースの動画変換ソフトです。 JavaScriptのffmpegは、videoconverter.jsをベースにffmpegのバージョンをアップしています。 コーデックをcopyとすることで無劣化に形式を変換することも可能です。 圧縮してHDDの容量を節約したり、ビットレートを制限してアップロードしたりする用途にも使えます。 インストール不要でパソコンのHDDを盗み見られたり、破壊されたりの心配がありません。 他のオンラインコンバータと異なり変換する動画がインターネットの外に出ません。 「簡易編集機能」では無劣化に動画形式(拡張子)を変換することもできます。 必要条件 Edge 25、FireFox 45、Google Chrome 50 他のブラウザでも動作するかもしれません。 Int
HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」:phpspot開発日誌
HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 2011年03月10日- Popcorn.js | The HTML5 Video Framework HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 例えば、ビデオ映像の位置を別のブロック要素でGoogle地図で表せたり、ビデオの内容にあわせてTwitterのタイムラインを流したりと、将来的に色々なところでこういった見せ方が見られるのでは？というもので一見の価値はあります。 独自のブラウザベースのオーサリングツールによって、映像と連動要素の組み立ても簡単。 TwitterやFlickr、Google地図に既に対応していますが、プラグインベースなので今後も拡張していくみたい。 映像の位置を地図で別ブロックに表示する例 ビデオ
JavaScriptから簡単に使えるFlashビデオプレイヤー「Flowplayer」:phpspot開発日誌
Flowplayer - Flash Video Player for the Web JavaScriptから簡単に使えるFlashビデオプレイヤー「Flowplayer」。 FlashビデオプレイヤーをJavaScriptから再生、停止させたりすることが簡単にできちゃいます。 使い方は無茶苦茶簡単です。 // id="player" の div に動画を埋め込みます。"my-video.flv"を再生します $f("player", "flowplayer.swf", "my-video.flv"); // プレイヤーのバージョンを得ることもできます $f("player").getVersion(); // 再生の制御をすることもできます $f(0).play(); // 停止の制御をすることも可能 $f().stop(); FlowPlayerのAPIリファレンス 動画をとって f
Shibuya.es カンファレンス - 中継のご案内
中継のご案内 2007年3月23日(金)開催のShibuya.esカンファレンスについて、i-revo によるネット中継を行います。 イベント当日になりましたら本ページに「視聴」のためのリンクを掲載します。 リンクをクリックすることでプレーヤーが起動し、再生が始まります。 配信はWindows Media Technologiesを用います。Windows Media Player 9以降の利用をお勧めします。 中継は終了しました。 録画アーカイブ amachangさん: JSer のための AS3 ！[動画] abuiさん: Cycal - オンラインスプレッドシート[動画] cho34さん: えへへ、うふふ E4X[動画] sendさん: Firebug[動画] omoさん: はじめての ABC[動画] Yu Kobayashiさん: Narcissus - ナルシスト、自分を愛した美
Adobe Labs | Previews, prereleases and beta software from Adobe
Thank you for participating in the Flash Player beta program. As Flash Player approaches its scheduled end of life, we are transitioning beta customers to the secure release build of Flash Player. No action is required on your part, the update process is automatic. For customers that would like to remove Flash Player from their systems, please see our easy to follow instructions for uninstalling o
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA