恐れ入りますがアドバイスいただけますようお願いいたします。
前提・実現したいこと
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にあると思いますが、勉強不足でどこに問題があるのかがわからず…引き続きアドバイスをいただけますと幸いです。よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー