ウェブサイトに透過動画を埋め込む方法 - ICS MEDIA

今ではサイト内に動画やアニメーションを利用することはそこまで特別なことではなくなりました。実はブラウザーや技術の進歩により最近は透明部分のある動画（アルファ付き動画）をサイト内に埋め込むことも可能になってきました。本記事では動画内容に応じた透過動画を、メリット・デメリットなどを交えながら、動画ファイルだけでなくさまざまな実装方法を紹介します。 記事前半では主に動画形式での実装方法を、後半ではアニメーション画像形式での実装方法を解説します。 サンプルを別ウインドウで開く コードを確認する ※デモの再生には通信量が多いため、モバイルデータ通信などを利用の方は注意ください。 コーデックとコンテナー まず、動画ファイルの仕組みである「コンテナー」と「コーデック」について簡単に説明します。 よく動画ファイルの拡張子に「.mp4」や「.mov」などを見たことがあると思います。これらはマルチメディアコン

[naratas]

今のところ互換性問題が大きくて実用性に乏しいのと、容量面でも大きな優位性がないので、今はまだAppleのサイトみたいな連番PNGを使った方が良い。いつか動画貼り付けるだけで済むようになったらお手軽で良いな。

[lli]

WebMは再生負荷が高いな

[yasu-log]

連番PNG(スプライトシート方式)は記事で触れているように、容量が比例的に大きくなる。動画形式だと空間圧縮に加えて時間圧縮が使えるため容量を小さくできる。動画のデメリットはiOSの省電力モードで自動再生NGなこと

[syou430]

アルファ付きの動画って重くないですか？

[Shinwiki]

やめれ

[kvx]

へー。