• HOME > 
  • JavaScript > 
  • JSでビデオやピクチャが現在どのソース要素を表示しているか取...

JSでビデオやピクチャが現在どのソース要素を表示しているか取得する【currentSrc】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2024年11月07日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

表示中のsource要素のファイルパスをJSで取得したい

picture要素(video)要素とsource要素を使って画像(動画)を表示させている時に、JavaScriptで表示中のファイルを取得するにはgetAttributeではなく「currentSrc」を使わないといけないということがわかったので備忘録として残しておきます。

source要素の役割

HTMLのsource要素は、video要素やpicture要素の子要素として複数のメディアソースを指定したいときに使う要素です。

source要素を使えばHTMLだけで「レスポンシブデザイン」や「様々な画像(動画)フォーマット」に対応することができます。

video要素とsource要素の使い方について詳しくはこちらのページにまとめています。

currentSrcとは?

JavaScriptで、HTMLのpicture要素やvideo要素に対して、現在表示(再生)されているメディアファイルのURLを取得するための属性です。

画像や動画の表示内容を動的に取得できるようになるので、それらに紐づいた機能を実装する際に役に立ちます。

currentSrcの使い方

currentSrcの使い方はいたってシンプルで、以下のように記述するだけです。

currentSrcの使い方

ただしpicture要素とvideo要素では少しだけ取得方法が異なるので注意が必要です。

video要素で表示中のファイルを取得する

下の例では、source要素を使ってウィンドウサイズ別に表示するファイルを切り替えています。

currentSrcを用いれば現在どちらのファイルが表示されているか確認することができます。

HTML

<video id="myVideo" width="100%" autoplay muted playsinline loop>
    <source media="(min-width:600px)" src="sample1.mp4" type="video/mp4">
    <source src="sample1-sp.mp4" type="video/mp4">
</video> 

JavaScript

var myVideo = document.getElementById("myVideo");
var res = myVideo.currentSrc;
console.log(res);

2行目ウィンドウサイズが600pxを下回っている時は「sample1-sp.mp4」、それ以外の時は「sample1.mp4」が取得されます。

picture要素で表示中のファイルを取得する

picture要素の場合は少しだけ使い方が変わります。

実際に表示する役割を担っているのはpicture要素ではなく、子要素であるimg要素なので、それに対してcurrentSrcを使うと現在表示中が取得出来ます。

このimg要素にgetAttributeを使っても、常にsrc属性に書かれているファイル名が返ってくるだけなので、現在表示中のファイルを取得するには「currentSrc」を使うしかありません。

HTML

<picture id="myPicture">
    <source media="(min-width:600px)" srcset="sample2.jpg">
    <img src="sample2-sp.jpg" alt="this is sample image.">
</picture>

JavaScript

var myPicture = document.getElementById("myPicture");
var myPicImg = myPicture.querySelector("img");
var res = myPicImg.currentSrc;
console.log(res);

2行目pictureの子要素のimgをセレクタに指定しています。

3行目ウィンドウサイズが600pxを下回っている時は「sample2-sp.jpg」、それ以外の時は「sample2.jpg」が取得されます。

まとめ

以上が、currentSrcを利用してJSでvideoやpictureが現在どのsource要素を表示しているか取得する方法です。

広告
広告

関連する記事

サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]