ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
HTML5 video / audio 要素
2012 年に HTML5 で標準化された / 要素により、Flash Player などプラグイン不要で動画・音声を再生できるようになりました。現代の Web の動画再生はほぼすべてこの仕組みを土台にしています。
video 要素の基本
主な属性
| 属性 | 意味 | 注意 |
|---|---|---|
src | メディアファイルの URL | を使う場合は省略 |
controls | ブラウザ標準コントロール表示 | UI カスタマイズ時は外す |
autoplay | 自動再生 | 多くのブラウザで muted 必須 |
muted | 初期ミュート | autoplay とセット |
loop | ループ再生 | BGM 用途 |
preload | 事前読み込み戦略 | none/metadata/auto |
poster | サムネイル画像 | 再生前に表示 |
playsinline | iOS でインライン再生 | iOS Safari 必須 |
width / height | サイズ (CLS 防止) | CSS で上書き可 |
crossorigin | CORS 設定 | JS 解析用 |
disablepictureinpicture | PiP 無効化 | 映像配信で利用 |
source 要素で複数フォーマット
ブラウザは を上から評価し、対応するフォーマットを再生します。順番が大事 (新しいフォーマットを先に書く)。
| フォーマット | MIME | コーデック | 対応 |
|---|---|---|---|
| WebM | video/webm | VP9 / VP8 / AV1 + Vorbis/Opus | Chrome/Firefox/Edge |
| MP4 (H.264) | video/mp4 | H.264 + AAC | 全ブラウザ (★最も安全) |
| MP4 (HEVC/H.265) | video/mp4 | H.265 + AAC | Safari / Edge / 一部のみ |
| MP4 (AV1) | video/mp4 | AV1 | Chrome 70+/Firefox/Edge |
| Ogg Theora | video/ogg | Theora + Vorbis | レガシー、現在ほぼ不要 |
実用上は MP4 (H.264) を最低 1 つ用意すれば全ブラウザで再生できます。帯域節約のため WebM (VP9/AV1) を先に置く構成が王道。
track 要素で字幕
WebVTT (.vtt) 形式のテキストファイルを で関連付けます。
# ja.vtt の中身例
WEBVTT
00:00:00.000 --> 00:00:03.500
こんにちは、私の名前は田中です。
00:00:03.500 --> 00:00:07.000
今日はテンプレートエンジンの話をします。
00:00:07.000 --> 00:00:12.000 line:90% align:center
BGM 開始
kind の種類: subtitles (字幕) / captions (聴覚障害者向け CC) / descriptions (視覚障害者向け音声説明) / chapters (チャプター) / metadata。
audio 要素
| フォーマット | MIME | 用途 |
|---|---|---|
| MP3 | audio/mpeg | 万能、最も互換 |
| AAC (.m4a) | audio/aac | iOS/macOS 標準 |
| Opus (in OGG/WebM) | audio/ogg; codecs=opus | 音質/サイズで最強 |
| FLAC | audio/flac | ロスレス、大サイズ |
| WAV | audio/wav | 無圧縮、大サイズ |
JavaScript API での制御
const v = document.querySelector('video');
// 再生 / 一時停止
v.play(); // Promise を返す (autoplay 制限で reject される場合あり)
v.pause();
// 状態取得
v.paused; // true/false
v.duration; // 総時間 (秒)
v.currentTime; // 現在の再生位置 (秒)
v.volume; // 0.0-1.0
v.muted; // ミュート状態
v.playbackRate; // 1.0=等倍, 2.0=倍速
v.ended; // 再生終了か
// 操作
v.currentTime = 30; // 30 秒地点へジャンプ
v.volume = 0.5; // 音量 50%
v.playbackRate = 1.5; // 1.5 倍速
// イベント
v.addEventListener('loadedmetadata', () => {
console.log('長さ:', v.duration);
});
v.addEventListener('timeupdate', () => {
// 再生中、頻繁に呼ばれる
});
v.addEventListener('ended', () => {
console.log('再生終了');
});
v.addEventListener('error', (e) => {
console.error('再生エラー', v.error);
});
// フルスクリーン
v.requestFullscreen();
// Picture-in-Picture (PiP)
await v.requestPictureInPicture();
autoplay の制限
2018 年以降、Chrome / Safari / Firefox は音声付き自動再生をブロックします。理由は広告の音声暴発防止。回避するには:
muted属性を必ず付ける- ユーザー操作 (クリック / タップ) 後にプログラムから
play()呼び出し - サイトの Media Engagement Index が高ければ Chrome は解禁する
// Promise の reject に対処
v.play()
.then(() => {
// 再生開始
})
.catch(err => {
if (err.name === 'NotAllowedError') {
// autoplay ブロック → ミュートして再試行
v.muted = true;
v.play();
}
});
ストリーミング: HLS / MPEG-DASH
長尺動画や帯域に応じた品質切替 (ABR = Adaptive Bitrate) には、ファイルをチャンク (例: 6 秒) に分割したストリーミングプロトコルを使います。
| プロトコル | マニフェスト | ネイティブ対応 |
|---|---|---|
| HLS (HTTP Live Streaming, Apple 由来) | .m3u8 | Safari ネイティブ、他は hls.js |
| MPEG-DASH (ISO 標準) | .mpd | 主要ブラウザは MSE 経由 (dash.js) |
| CMAF | HLS/DASH 共通フォーマット | 両対応サーバの主流に |
MSE (Media Source Extensions)
JavaScript からビデオバッファを直接操作する低レベル API。HLS/DASH ライブラリの基盤。
const video = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', async () => {
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
const data = await fetch('chunk.mp4').then(r => r.arrayBuffer());
sourceBuffer.appendBuffer(data);
});
WebRTC (ライブ通信)
ブラウザ間 P2P の双方向リアルタイム通信。ビデオ会議 (Zoom Web 版、Google Meet、Discord 等) で使用。
- 音声 / 映像 / データチャネルをサポート
- レイテンシ 100ms 以下
- STUN / TURN サーバ経由で NAT 越え
- SFU (Selective Forwarding Unit) で多人数会議
picture 要素との比較
| 要素 | 用途 | typical |
|---|---|---|
| 単純画像 | JPEG/PNG/WebP/AVIF |
| レスポンシブ画像 (フォーマット切替) | AVIF→WebP→JPEG |
| 動画 (動く絵) | MP4/WebM |
| 音声のみ | MP3/AAC/Opus |
FAQ
Q: YouTube/Vimeo の埋め込みと自前 video、どちらが良い?
A: トラフィック / ストレージ / トランスコード / プレイヤー UI を YouTube に任せられるので、埋め込みが圧倒的に楽。完全に自社で制御したい (DRM、課金、データ取得) 場合は自前。
Q: 動画の自動再生で音を出したい
A: 不可能 (ユーザー保護のため)。ミュート autoplay にしておき、ユーザーが音量ボタンを押した瞬間に音量上げる UX が一般的。
Q: モバイルで全画面にならない (iOS)
A: iOS Safari は playsinline 属性が無いと自動でフルスクリーンになります。逆にインライン再生したい場合は必ず playsinline を付ける。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子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アノテーションとは
最近更新/作成されたページ
- UE5 で鏡を作る方法 (Planar Reflection / Scene Capture / SSR / マテリアル) 2026-06-11 04:04:53
- Oracle CKPT (Checkpoint Process) の役割とパラメータ (リカバリ時間短縮) 2026-06-11 04:04:53
- Java プログラムの全体構造 (package / import / class / main / module / Maven) 2026-06-11 04:04:53
- UE5 Data Asset と Data Table の違い (使い分け / Asset Manager / CSV 連携) 2026-06-11 04:04:53
- Java 比較演算子の使い方 (== / equals / compareTo / Objects.equals) 2026-06-11 04:04:53
- Linux への scikit-learn インストール (pip / venv / Conda / 依存パッケージ) 2026-06-11 04:04:53
- Scratch でスプライトを追加する 5 つの方法 (ライブラリ / 自分で描く / アップロード / カメラ / サプライズ) 2026-06-11 04:04:53
- JavaScript の "" と '' の違い (仕様上は等価 / テンプレートリテラル / JSON / Lint) 2026-06-11 04:04:53
- Laravel マイグレーションファイルの作成 (make:migration / Schema::create / down 実装) 2026-06-11 04:04:53
- Unity 「3 Skyboxes」アセットの使い方と Skybox の基礎 (Material / Lighting / HDR) 2026-06-11 04:04:53
- Linux で IP アドレスを確認するコマンド完全ガイド(ip / ifconfig / hostname) 2026-06-11 04:04:52
- Docker イメージ操作完全ガイド(search / pull / images / rmi / multi-arch) 2026-06-11 04:04:52
- SQL の組み込み関数まとめ(集計 / 文字列 / 日時 / 数値 / 条件 / ユーザー定義) 2026-06-11 04:04:52
- Laravel Query Builder の DELETE 完全ガイド(Eloquent / Soft Delete / 一括削除) 2026-06-11 04:04:52
- HTML <wbr> 要素の使い方と <code>word-break</code> / ­ との違い 2026-06-11 04:04:52
コメントを削除してもよろしいでしょうか?