【レスポンシブ対応】videoタグで読み込む動画をブレイクポイント毎に切り替える
JavaScriptは、画面サイズに基づいてビデオソースを適切に切り替える役割を果たします。 DOMContentLoaded イベントは、ページが完全にロードされた後にスクリプトを実行するために使用されます。 updateVideoSource 関数は、与えられたビデオ要素のソースを更新します。画面サイズが768ピクセル以下の場合はモバイル用のビデオ（ _sp ）、それ以上の場合はPC用のビデオ（ _pc ）を読み込みます。ウィンドウの resize イベントリスナーは、画面サイズが変更されたときにビデオソースを再度更新するために使用されます。
注意点- ファイル命名の一貫性：ビデオファイルの命名は一貫性を持たせることが重要です。基本となるファイル名は変更せず、画面サイズに応じて接尾辞だけを変更します。
- パフォーマンスの最適化：ビデオファイルは比較的大きなリソースであるため、ページのロード時間に影響を与える可能性があります。特にモバイルデバイスでは、データ使用量とロード時間を考慮する必要があります。
- アクセシビリティの確保：すべてのユーザーがビデオコンテンツにアクセスできるようにするために、字幕や音声解説などのアクセシビリティ対応を行うことが望ましいです。
ウェブサイトにおけるビデオコンテンツは、異なるデバイスやブラウザで最適に表示されるべきです。これには、レスポンシブなデザインと複数のビデオフォーマット（特に mp4 と webm ）のサポートが必要です。
HTMLコードの構築HTMLの構造では、 タグを使用してビデオを表示し、 data-src 属性でビデオファイルのベースパスを指定します。
JavaScriptコードの適用 document.addEventListener("DOMContentLoaded", function () < const videos = document.querySelectorAll(".video"); function updateVideoSources(video, baseSrc) < const isMobile = window.innerWidth function createSourceElement(src, type) < const source = document.createElement("source"); source.setAttribute("src", src); source.setAttribute("type", type); return source; >videos.forEach((video) => < const baseSrc = video.getAttribute("data-src"); updateVideoSources(video, baseSrc); >); // ウィンドウの横幅が変更されたときにのみビデオソースを更新 window.addEventListener("resize", function () < const newSize = window.innerWidth; if (currentSize !== newSize) < currentSize = newSize; videos.forEach((video) =>< const baseSrc = video.getAttribute("data-src"); updateVideoSource(video, baseSrc); >); > >); >);このスクリプトでは、 createSourceElement 関数を使用して mp4 と webm フォーマットのソース要素を生成し、ビデオ要素に追加します。画面サイズに応じて適切なファイル（モバイル用またはPC用）を選択します。
注意点- ブラウザの互換性：異なるブラウザではビデオフォーマットのサポートが異なる場合があります。 webm は特にGoogle ChromeやFirefoxで好まれますが、全てのブラウザがこれをサポートしているわけではありません。そのため、 mp4 と webm の両方を提供することが重要です。
- ファイルサイズと読み込み時間：ビデオファイルは通常、ウェブページのサイズを大きくするため、特にモバイルデバイスでの読み込み時間に影響を与える可能性があります。ビデオの圧縮や適切なフォーマットの選択が重要です。
- レスポンシブデザイン：異なるデバイスでのビューを考慮して、ビデオプレーヤーが適切に表示されるようにするために、CSSを適切に設定することが重要です。
画像の webp 出し分け方法は以下の記事で解説しています。画像も適切に出し分けることで、さらにサイトのパフォーマンスが向上します。
【初心者向け】ブラウザに合わせて.webp画像を切り替える方法 .webpのメリットがわからない HTMLで.webpの切り替え方がわからない CSSで.webpの切り替え方がわからない このような悩みにお答えします。 コーディング案件で.webp対応.
まとめ
- レスポンシブなビデオ表示：JavaScriptを使用してビデオソースを動的に切り替えることで、異なるデバイスや画面サイズに最適なビデオを提供できます。これにより、ユーザーエクスペリエンスが向上し、特にモバイルデバイスでの閲覧が快適になります。
- 読み込み速度の最適化：ビデオの遅延読み込み（Lazy Loading）や事前読み込みの制御を通じて、ページの読み込み時間を短縮し、全体のパフォーマンスを向上させます。これは、特に大きなファイルサイズを持つビデオコンテンツにおいて重要です。
- 互換性とアクセシビリティの向上：異なるブラウザやデバイスに対応するために、複数のビデオフォーマット（mp4、webmなど）をサポートすることが可能になります。これにより、より多くのユーザーがビデオコンテンツにアクセスできるようになります。
- 保守性と拡張性の向上：コードの中央管理を通じて、将来的な更新や変更が容易になり、エラーのリスクを減少させることができます。これにより、開発者の作業負担が軽減されます。
この記事が気に入ったら いいね または フォローしてね！
URLをコピーしました！ URLをコピーしました！- 【エンティティ化】メールアドレスを安全に埋め込む方法
- 【JavaScript】実務でよく使うおすすめプラグイン一覧
関連記事
【コピぺOK】jQueryでスムーススクロールを実装する方法 Bootstrapの使い方は？導入から実装まで初心者にもわかりやすく解説 【jQuery】簡単！縦スクロールに合わせて要素を横に動かす方法 【CSS&jQuery】スクロール時にふわっと表示するアニメーション実装方法 【MicroModal】モーダルを簡単に実装できるJSプラグインを紹介 【JavaScript】let、const、varの違いと使い分けを徹底解説 2023.10.23 2025.10.13 jsはコード1行だけ！rellax.jsで簡単にパララックスを実装する方法 2023.02.18 2025.10.13 【初心者向け】ハンバーガーメニューの作り方【コピペOK】 2022.10.04 2025.10.13 web designer フリーランスのwebデザイナーです。 主なお仕事はコーディングが多いです。 学んだ知識などをこのブログでアウトプットしています。- エックスサーバーからロリポップにサーバーを変更した話 2025.10.29
- MacからWindowsにZIPを送るときに気をつけたいポイントと対策 2025.10.24
- SSGformを使ってみた感想と実装メモ 2025.10.22
- 自社サイトをまたリニューアルしました 2025.10.13
- 【2025年版】現在使っているWordPressプラグインまとめ 2025.10.13
詳しいサービス内容やご相談など、お気軽にお問い合わせください。
- ホーム
- コーディング
- JavaScript
- 【レスポンシブ対応】videoタグで読み込む動画をブレイクポイント毎に切り替える
© Web Note. All Rights Reserved.