HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
超カンタン！HTML5 で GIF アニメを作る方法
Posted: August 2, 2013 / Last updated: August 2, 2013 知っている人は知っている方法だと思いますが、実際にやってみたのでメモ。 ※ デモの画像はこちらからお借りしました。特にライセンスが記述されていなかったのですが、問題があれば差し替えます。 ライブラリは jsgif というのを使わせて頂きました。 手順はライブラリを読み込み、画像をひとコマ分ずつ canvas にロード、ライブラリに追加。終わったらバイナリから gif ファイルを生成、という感じ。 もう少し詳しい解説は以下。 LZWEncoder.js NeuQuant.js GIFEncoder.js を読み込む 適切なサイズの canvas を用意 GIFEncoder からエンコーダを作るvar encoder = new GIFEncoder(); アニメーションの時間間隔など
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ショック！ Twitterがサポートを始めたGIFアニメはGIFではなかった―しかしうまい考え | TechCrunch Japan
