【Vanilla JS】PC/SPでvideoのsource要素のsrcを切り替える(window.matchMedia使用)

[ ID : 7616 ]
シルバー
【Vanilla JS】PC/SPでvideoのsource要素のsrcを切り替える(window.matchMedia使用)

概要

PC/SPでvideo動画が異なる場合に、JavaScriptを使用してvideoのsource要素のsrcを切り替える方法を紹介。

用途・要件

  • CSSメディアクエリを使用してdisplay: none;でPC/SPのvideo要素の表示/非表示を切り替えても両方の動画が読み込まれてしまうため、JavaScriptを使用してvideoのsource要素のsrc属性をPC/SPで切り替える。
  • 読み込み時だけでなく、画面幅を変更してPCからSP、SPからPCに切り替わった際もsrc属性を切り替える。(window.matchMediaを使用)
  • videoのsource要素にdata-src-pc属性、data-src-sp属性を付与する。
  • source要素は複数設置可能。
  • video要素は同一ページに複数設置可能。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)
  • IE11

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

関連記事

全ての記事を見る

KONOCODEのメリット 無料会員登録