video要素とアスペクト比
動画を埋め込み、正しいアスペクト比を維持します
「video要素とアスペクト比」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
video要素
<video>要素は、動画をネイティブに埋め込みます。
<video controls width="800" height="450" src="tutorial.mp4">
Your browser does not support video.
</video>必須属性
重要な動画属性：
<video
src="demo.mp4"
controls <!-- show player UI -->
width="1280" <!-- intrinsic width -->
height="720" <!-- intrinsic height -->
poster="preview.jpg" <!-- thumbnail before play -->
preload="metadata" <!-- preload only metadata -->
>
Your browser does not support video.
</video>poster属性
poster属性は、動画の再生前に表示するサムネイルを設定します。
<video controls poster="/thumbnails/episode-42.jpg" width="800" height="450">
<source src="episode-42.mp4" type="video/mp4">
</video>
<!-- Without poster: browser shows a black frame
or the first frame of the video (browser-dependent) -->アスペクト比のための幅と高さ
レイアウトシフトを防ぐため、幅と高さは必ず指定します。
<video controls width="1280" height="720" src="video.mp4"></video>
<!-- Browser reserves correct space before video loads -->
<!-- Prevents CLS (Cumulative Layout Shift) -->
<!-- Make responsive with CSS:
video { width: 100%; height: auto; }
-->レスポンシブ動画のCSS
CSSで動画をレスポンシブにします。
video {
width: 100%;
height: auto;
max-width: 1280px;
display: block;
margin: 0 auto;
}
/* Aspect ratio box: */
.video-wrapper {
position: relative;
padding-top: 56.25%; /* 16:9 aspect ratio: 9/16 = 0.5625 */
}
.video-wrapper video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}CSSのaspect-ratioプロパティ
CSSのaspect-ratioを使用する最新の方法：
video {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
}
/* Other common ratios: */
/* 4:3 → aspect-ratio: 4 / 3 */
/* 21:9 → aspect-ratio: 21 / 9 */
/* 1:1 → aspect-ratio: 1 */JSによる動画再生コントロール
JavaScriptによる動画の制御：
const video = document.getElementById('my-video');
video.play();
video.pause();
video.currentTime = 60; // jump to 1 minute
video.playbackRate = 1.5; // 1.5x speed
video.volume = 0.7;
video.muted = true;
video.requestFullscreen();
console.log(video.duration); // total length
console.log(video.paused); // is it paused?動画イベント
動画イベントを監視します。
video.addEventListener('play', () => updatePlayButton());
video.addEventListener('pause', () => updatePlayButton());
video.addEventListener('ended', () => showNextVideo());
video.addEventListener('timeupdate', () => updateProgressBar());
video.addEventListener('loadedmetadata', () => {
console.log('Duration:', video.duration);
console.log('Dimensions:', video.videoWidth, 'x', video.videoHeight);
});Fullscreen API
プログラムから全画面表示に入り、終了します。
const btn = document.getElementById('fullscreen-btn');
const video = document.getElementById('player');
btn.addEventListener('click', () => {
if (!document.fullscreenElement) {
video.requestFullscreen();
} else {
document.exitFullscreen();
}
});
document.addEventListener('fullscreenchange', () => {
btn.textContent = document.fullscreenElement ? 'Exit Fullscreen' : 'Fullscreen';
});動画の自動再生ポリシー
動画に関するブラウザーの自動再生ルール：
- ミュートされた動画 → 最新のすべてのブラウザーで自動再生できます
- ミュートされていない動画 → ユーザーがページを操作していない限りブロックされます
- Google's Media Engagement Index → 頻繁に訪問するユーザーには自動再生が許可される場合があります
- フォールバックとして、必ず再生ボタンを用意します
動画のアクセシビリティ
動画のアクセシビリティ要件：
- すべての会話と重要な音にキャプションを付けます
- 聴覚障害者や難聴者のためにトランスクリプトを用意します
- 視覚障害者のために音声解説を用意します（映像だけで伝わる情報を説明します）
- キーボード操作が機能することを確認します（ネイティブコントロールでは機能します）
クイックチェック
動画の再生前に静止画像を表示する動画属性はどれですか。
まとめ：video要素
video要素の必須事項：
controls— プレーヤーUIを表示しますwidthとheight— レイアウトシフトを防ぎますposter— 再生前に表示するサムネイルですpreload="metadata"— パフォーマンスに適したデフォルト設定です- レスポンシブ対応：
width: 100%; height: auto;またはaspect-ratio: 16/9 - ミュートされた動画は自動再生できますが、ほとんどのブラウザーではミュートされていない動画は自動再生できません
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「video要素とアスペクト比」レッスンは無料ですか？
はい。「video要素とアスペクト比」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「video要素とアスペクト比」で何を学びますか？
動画を埋め込み、正しいアスペクト比を維持します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「video要素とアスペクト比」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。