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

投稿日:2024年11月07日

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

表示中の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の使い方はいたってシンプルで、以下のように記述するだけです。

ただし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要素を表示しているか取得する方法です。