動画をブレイクポイントで使い分けたいが、iPhoneで表示されない

恐れ入りますがアドバイスいただけますようお願いいたします。

前提・実現したいこと

WordPressで制作中のサイトで、フルスクリーンの動画を表示しています。
当該ページを閲覧する際、スマートフォンのような縦長の画面の場合と、PCのような横長の画面の場合で表示する動画を使い分けたいと考えました。

なお、やりたいことはこちらの投稿と同じなので、大いに参考にさせていただきました。

発生している問題

iPhone（SE / iOS13.3）で動画が表示されません。動作としてはモバイル用動画＆PC用動画のどちらも表示されず、poster属性で指定した画像が表示されます。

なお、PCで見ると問題なくPC用の動画が表示されますので、ファイルパスは問題なさそうです。またGoogleChromeのデベロッパーツールでモバイル環境をエミュレートした場合も、問題なくモバイル用の動画が表示されます。
（利用環境）macOS 10.14.5 / GoogleChrome ver.79

該当のソースコード

PHP
1
2<!doctype html>
3<html dir="ltr" lang="ja">
4<head>
5<meta charset="UTF-8">
6<meta name="viewport" content="width=device-width,initial-scale=1">
7<title><?php if( !is_home() ){ wp_title('-', true, 'right'); } bloginfo('name'); ?></title>
8<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
9<?php 
10	wp_enqueue_script('video', get_template_directory_uri() . '/js/video.js');
11	wp_deregister_script('jquery');
12	wp_head(); 
13?>
14</head>
15<body>
16	<div class="fixed">
17		<video muted autoplay loop playsinline poster="<?php echo get_template_directory_uri(); ?>sample.jpg" class="routingByBreakpoint">
18			<source data-src="<?php echo get_template_directory_uri(); ?>pc.mp4" type="video/mp4" data-query="pc">
19			<source data-src="<?php echo get_template_directory_uri(); ?>sp.mp4" type="video/mp4" data-query="mobile">
20		</video>
21	</div>
22</body>
23</html>
24

HTML
1<!doctype html>
2<html dir="ltr" lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1">
6<title>タイトル</title>
7<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
8<script type='text/javascript' src='https://xxx.com/wp-content/themes/xxx/js/video.js'></script>
9</head>
10<body>
11	<div>
12		<video muted="" autoplay="" loop="" playsinline="" poster="https://xxx.com/wp-content/themes/xxx/sample.jpg" class="routingByBreakpoint">
13			<source data-src="https://xxx.com/wp-content/themes/xxx/pc.mp4" type="video/mp4" data-query="pc">
14			<source data-src="https://xxx.com/wp-content/themes/xxx/sp.mp4" type="video/mp4" data-query="mobile">
15<!-- 以下のsourceタグ部分がiphoneでは生成されません -->
16		<source src="https://xxx.com/wp-content/themes/xxx/sp.mp4"></video>
17	</div>
18</body>

JavaScript
1$(function() {
2	var defaultQueryList = {
3		mobile: matchMedia("(max-width: 1279px"),
4		pc: matchMedia("(min-width: 1280px)")
5	}
6	
7	function routingByBreakpoint(sourceList) {
8		for(var i = 0, l = sourceList.length; i < l; i++){
9			var source = sourceList[i];
10			
11			if(!(source.dataset.query && defaultQueryList[source.dataset.query] && source.dataset.src)) continue;
12			if(!(defaultQueryList[source.dataset.query].matches)) continue;
13			
14			var newSource = document.createElement("source");
15			newSource.src = source.dataset.src;
16
17			source.parentElement.appendChild(newSource);
18		}
19	}
20	
21	(function (){
22		var elemList = document.getElementsByClassName("routingByBreakpoint");
23
24		for(var i = 0, l = elemList.length; i < l; i++){
25			var sourceList = elemList[i].getElementsByTagName("source");
26
27			routingByBreakpoint(sourceList);
28		}
29	})();
30});

試したこと

videoタグを二つにしてそれぞれにクラスを用意し、cssのメディアクエリで出し分ける方法も考えましたが、ページ読み込み時に動画を二つとも読んでデータ量が無用に増えてしまうため、違う方法を採りたいと考えました。

なお（動画の出し分けにはなりませんが）検証のために、sourceタグを一つにし、data-srcをsrc属性に変更すると、iPhoneでも指定した動画が表示されたので、data-xx属性が問題になっているのでは…と推測を立てて調べましたが、javascriptに明るくなくこれ以上原因を突き止めることができませんでした。

お力をお借りできますと幸いです。何卒よろしくお願いいたします。

＞追記
2点追記いたします。

A.
コメントでアドバイスをいただき、コードを追加・変更しました。
1.当該ページを表示するためのPHPを記載しました。
2.javascriptで生成後のHTMLを記載しました。なお、chromeのデベロッパーツールで確認したコードのため、iphoneで表示しているHTMLとは異なるかもしれません。（iphoneで生成後のHTMLを確認する方法がわからず…アプリ等調べて、わかりましたら改めて追記させていいただきます。）

B.
動画自体に問題があるケースもあるようですが、CSSのメディアクエリで動画の出し分けを試したところi-phoneで問題なく再生されたので、動画自体には問題はなさそうです。

＞追記2

iphoneをMacにつないでWEBインスペクタを使う方法を知り、当該ページのHTMLを確認したところ<source src="https://xxx.com/wp-content/themes/xxx/sp.mp4">が生成されていないことがわかりました。
これでおそらく原因はjavascriptにあると思いますが、勉強不足でどこに問題があるのかがわからず…引き続きアドバイスをいただけますと幸いです。よろしくお願いいたします。

x_x

2019/12/23 01:47

コードはそのままですか？どこかで jQuery が読み込まれるのであれば、生成された後のコードを書いたほうがいいでしょう。

atsushi_m

2019/12/23 06:02

x_x様投稿をご覧いただき、またコメントをいただきありがとうございます。わかる範囲で、になってしまいましたがアドバイスいただいて点について追記いたしました。ご都合の良い時にご覧いただけますと幸いです。どうぞよろしくお願いいたします。

atsushi_m

2019/12/23 07:17

x_x様進捗がありましたので報告です。 iphoneで生成されたHTMLの確認ができたので追記しました。当該箇所のsourceタグが生成されていなかったため、おそらくjavascript内に問題があるのではと思いますが、原因まではわからず…。もしよろしければ引き続きご覧いただけますと幸いです。

x_x

2019/12/23 07:17

インスペクタが開けるのであれば、適当なところにブレイクポイントを置いてどこで失敗しているのかわかるのではないでしょうか？

atsushi_m

2019/12/23 08:13

x_x様改めてのコメント、ありがとうございます。インスペクタのブレイクポイントの使い方がわからなかったのですが、おかげさまで調べてだいたい把握できました。当方の都合ですぐに確認できませんが、後ほど調べてみます。取り急ぎお礼と報告をさせていただきます。

atsushi_m

2019/12/24 03:12

x_x様時間がかかってしまいましたが、先ほど無事に解決いたしました。その後インスペクタのブレイクポイントについて仕組みは把握できたもののイマイチうまく活用する方法がわからなかったため、コンソールログをコード内に埋めまくったところうまく機能していない箇所がわかり、それを糸口にして単純なコードの間違い（閉じ括弧が抜けておりました）に気づきました…。ただ、おかげさまでいろいろ新たな機能を知ることができました、アドバイスいただきありがとうございました！

行動規範の内容に同意します

回答1件

自己解決

変数defaultQueryListの値mobileについて、閉じ括弧が抜けておりました。
修正後のコードを掲載しておきます、どなたかのお役に立つことがあれば幸いです。

javascript
1$(function() {
2    var defaultQueryList = {
3        mobile: matchMedia("(max-width: 1279px)"),
4        pc: matchMedia("(min-width: 1280px)")
5    }
6
7    function routingByBreakpoint(sourceList) {
8        for(var i = 0, l = sourceList.length; i < l; i++){
9            var source = sourceList[i];
10
11            if(!(source.dataset.query && defaultQueryList[source.dataset.query] && source.dataset.src)) continue;
12            if(!(defaultQueryList[source.dataset.query].matches)) continue;
13
14            var newSource = document.createElement("source");
15            newSource.src = source.dataset.src;
16
17            source.parentElement.appendChild(newSource);
18        }
19    }
20
21    (function (){
22        var elemList = document.getElementsByClassName("routingByBreakpoint");
23
24        for(var i = 0, l = elemList.length; i < l; i++){
25            var sourceList = elemList[i].getElementsByTagName("source");
26
27            routingByBreakpoint(sourceList);
28        }
29    })();
30});