ウェブサイトに透過動画を埋め込む方法 - ICS MEDIA
今ではサイト内に動画やアニメーションを利用することはそこまで特別なことではなくなりました。実はブラウザーや技術の進歩により最近は透明部分のある動画（アルファ付き動画）をサイト内に埋め込むことも可能になってきました。本記事では動画内容に応じた透過動画を、メリット・デメリットなどを交えながら、動画ファイルだけでなくさまざまな実装方法を紹介します。 記事前半では主に動画形式での実装方法を、後半ではアニメーション画像形式での実装方法を解説します。 サンプルを別ウインドウで開く コードを確認する ※デモの再生には通信量が多いため、モバイルデータ通信などを利用の方は注意ください。 コーデックとコンテナー まず、動画ファイルの仕組みである「コンテナー」と「コーデック」について簡単に説明します。 よく動画ファイルの拡張子に「.mp4」や「.mov」などを見たことがあると思います。これらはマルチメディアコン
無料で動画ファイルをブラウザ上で簡単にアニメーションWebPに変換できる「Video2WebP」
ウェブサイトのトラフィック量を軽減するためにGoogleが開発している画像フォーマット「WebP」は、非可逆圧縮のJPEGや可逆圧縮のGIF、PNGへの置き換えが意図されており、APNGと同様にアニメーションに対応しています。WebP形式のアニメーションを使うべく、動画ファイルからアニメーションWebPへの変換をブラウザ上で行えるウェブアプリが「Video2WebP」を、実際に使ってみました。 Video2WebP https://video2webp.mattj.io/ 今回は焼き肉を焼く様子を撮影したMP4形式のムービーをアニメーションWebPに変換してみます。ムービーのファイルサイズは4.59MB、フレームサイズは560×420ピクセル、ビットレートは約1.5Mbps、フレームレートは29.97fpsです。 Video2WebPの「Select and convert」で「ファイルを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
