ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
概要
WebM(ウェブエム)は、Google が 2010 年 5 月に発表したWeb 向け動画コンテナフォーマットです。設計目標は明快で、「特許に縛られず、ブラウザで自由に再生・配布できる動画形式」を作ることでした。当時 Web 動画の主流だった H.264/AAC が MPEG-LA の特許プールに属しており、商用利用やオープンソース実装での扱いに法的リスクがあったことへの対抗策として企画されました。
WebM は三つの構成要素から成ります。第一にコンテナは Matroska(MKV)を Web 向けに簡素化したもの、第二に映像コーデックは Google が買収した On2 Technologies の VP8(後に VP9、AV1)、第三に音声コーデックは Vorbis(後に Opus)です。すべてのコンポーネントが特許プールから独立しており、ライセンス料なしに使用・実装・配布できます。
Web での扱いは HTML5 <video> タグでネイティブに再生でき、<video src="movie.webm"></video> という最小コードで動画が動きます。Chrome・Firefox・Edge・Opera は標準で WebM をサポートし、Safari は macOS 11 以降と iOS 14.5 以降で VP8/VP9 WebM を再生できます(過去は対応していませんでした)。
内部構造
WebM コンテナは EBML(Extensible Binary Meta Language)という、XML のバイナリ版とでも呼ぶべきフォーマットを採用しています。これは Matroska(MKV)と同じ仕組みで、要素ごとに ID とサイズとデータが並ぶ階層構造です。
主要な要素:
- EBML Header:ファイル種別(doctype =
webm)とバージョン情報 - Segment:動画本体を包含するトップレベル要素
- SeekHead:各要素へのオフセット索引(高速シーク用)
- Info:タイムスケール・継続時間などのメタ情報
- Tracks:映像・音声・字幕の各トラック定義
- Cluster:実際の映像・音声フレームを束ねたブロック
- Cues:キーフレームのインデックス。シーク高速化に必須
WebM は Matroska の機能から、Web で不要な機能(多すぎる字幕形式、暗号化のバリエーション等)を削ぎ落としていますが、本質的には MKV のサブセットです。実際 ffmpeg などでは matroska,webm として同じデマクサが扱います。
映像コーデックは VP8(初期、H.264 と同等品質)、VP9(H.265 と同等、YouTube の HD/4K 配信で広く使用)、AV1(H.265 を凌駕、Netflix / YouTube が積極導入中)と進化してきました。音声は Vorbis(初期)から Opus(現在の推奨、低ビットレートで非常に高音質)が主流です。
主な用途
- YouTube:アップロードされた動画を VP9 WebM にトランスコードして配信(Chrome 系での主な配信形式)
- HTML5 動画:
<video>タグでブラウザに直接配信 - WebRTC:ブラウザ間ビデオ通話で VP8/VP9 が主要コーデック
- Twitch のクリップ、Discord の埋め込み動画:WebM を採用
- オープンソース動画配信:PeerTube、Odysee などフリーソフト陣営での標準
- 動くスタンプ・短いアニメーション:WhatsApp のステッカー、Telegram のアニメ絵文字
- Wikipedia の動画素材:特許フリーなので Wikimedia Commons が WebM を採用
関連形式との比較
vs MP4:MP4 は H.264/H.265/AAC など特許コーデックが主流で互換性は最高、WebM は特許フリーで Web 配信向き。実運用では同じ動画を MP4 と WebM の両方で配信し、ブラウザ側で <source> から選ばせる構成(progressive enhancement)も一般的です。
vs MKV:WebM は MKV のサブセット。MKV は何でも入る汎用コンテナ、WebM は Web 配信専用に絞ったものという関係です。
vs GIF:WebM は短いアニメーションを格段に小さく高画質で配信できるため、近年は GIF の置き換えとしても使われます(Imgur、Reddit、Discord など)。
vs HEIF / AVIF:AVIF は AV1 で圧縮した静止画形式で、WebM(AV1)の静止画版に近い関係です。
編集・再生ツール
エンコード:ffmpeg(ffmpeg -i in.mp4 -c:v libvpx-vp9 -c:a libopus out.webm)、HandBrake(VP9 + Opus 対応)、Shotcut、DaVinci Resolve(出力時に WebM 選択可)、Adobe Media Encoder(プラグイン経由)。
再生:Chrome / Firefox / Edge / Opera(ネイティブ)、Safari(macOS 11+ / iOS 14.5+)、VLC、mpv、MPC-HC、PotPlayer。Android はネイティブ対応、iOS は Safari 経由で対応。
編集:DaVinci Resolve、Shotcut、Kdenlive、OpenShot などフリーソフトでも編集可能。プロ用ソフトでも書き出し対応は広がっています。
注意点
iOS / Safari の対応:iOS 14.5 / macOS Big Sur 以前の Safari は WebM を再生できません。互換性最優先のサイトでは MP4(H.264)を主、WebM を副として併存配信するのが安全です。
エンコード速度:VP9 や AV1 は H.264 と比べてエンコードが非常に遅い(AV1 は数倍〜数十倍)。リアルタイム配信では H.264/H.265 が選ばれることが多い理由です。
ハードウェアエンコード対応:VP9・AV1 のハードウェアエンコーダ搭載 GPU は H.264 ほど普及していません。最新世代の NVIDIA RTX 40 系、Intel Arc、Apple Silicon M3 などが対応しています。
編集ソフトの対応にばらつき:WebM の編集はフリーソフトに強いものの、Adobe Premiere や Final Cut では標準サポートが限定的で、いったん MP4 や ProRes に変換してから編集するワークフローが一般的です。
HTML5 video の例:<video controls><source src="movie.webm" type="video/webm"><source src="movie.mp4" type="video/mp4"></video> のように複数 <source> を並べると、ブラウザが対応する形式を自動選択します。
関連リンク
- 音声・動画形式(親カテゴリ)
- ファイル拡張子とは
- MP4(.mp4 / .m4v)
- MOV(.mov)
- MKV(.mkv)
- M3U8 / HLS(.m3u8)
- Opus(.opus)
- アニメーション コンテンツでの動画フォーマットの使用
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- IPv6とは|128bitアドレス・コロン16進表記/::省略・リンクローカル・SLAAC・デュアルスタック NEW 2026-06-22 12:34:44
- MAC アドレスフィルタリングの仕組みと限界 | ネットワーク入門 NEW 2026-06-22 12:19:10
- VPNとは|暗号トンネル・サイト間/リモートアクセス・IPsec/SSL-VPN/WireGuardを解説 NEW 2026-06-22 12:19:10
- Web通信プロトコル入門 HTTP/2・HTTP/3・WebSocket・gRPC・WebRTC | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/2 とは 多重化・HPACK・バイナリフレーム | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/3 (QUIC) とは UDP ベースの低遅延 Web 通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebRTC とは ブラウザ間 P2P の音声・映像・データ通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- gRPC とは HTTP/2 + Protocol Buffers の高速 RPC | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebSocket とは 全二重リアルタイム通信 ws/wss | ネットワーク入門 NEW 2026-06-22 12:17:25
- HAProxy とは frontend/backend と設定例 | ネットワーク入門 NEW 2026-06-22 12:17:24
- TLS/SSLの仕組み|ハンドシェイク・暗号スイート・前方秘匿性・証明書検証をわかりやすく解説 NEW 2026-06-22 12:17:24
- CDN とは エッジキャッシュ・TTL・Cloudflare/CloudFront | ネットワーク入門 NEW 2026-06-22 12:17:24
- iptables/nftablesとは|テーブル・チェーン・ルール例・永続化をLinux視点で解説 NEW 2026-06-22 12:17:24
- ファイアウォールとは|パケットフィルタ・ステートフル・DMZ・次世代FW(L4/L7)を解説 NEW 2026-06-22 12:17:24
- 証明書と認証局(CA)とは|X.509・信頼チェーン・DV/OV/EV・失効(CRL/OCSP)を解説 NEW 2026-06-22 12:17:24
コメントを削除してもよろしいでしょうか?