Shortcodes Ultimate の Lightbox で、URLにmp4をした際、iPhoneで動画が再生できない対応

12月 30, 2023

iOSのwebviewに問題があるようで、音声ファイルと認識されているためのようです。

Shortcodes Ultimate の Lightbox の動画サポートは、YouTube等の３サイトのみであり、本来はmp4の直接指定は、サポート対象外と思われます。

よって、Shortcodes Ultimateプラグインを直接修正して、iOS (iPhone)でも動画が再生できるようにしました。

目次

Shortcodes Ultimateプラグインの修正

Shortcodes Ultimateが、Lightboxの実装として使用している。jQueryプラグインのMagnific Popupに対して、対応コードを加えます。

URLに指定したmp4が、iframeのsrcに設定されますが、このままですとブラウザがiframeを表示する際のデフォルトスタイルになります。このデフォルトスタイルが、iOS (webview)では問題があるため、動的にhtmlを作成してその中でmp4を表示するようにします。

// Lightbox
$('.su-lightbox').each(function () {
    $(this).on('click', function (e) {
        // ...
        if ($(this).parent().attr('id') === 'su-generator-preview') // ...
        else {
            // ...
            $(this).magnificPopup({
                // ...
                callbacks: {
                    open: function() {
                        var elem = document.getElementsByClassName('mfp-iframe');
                        if (elem.length > 0) {
                            console.log(elem[0].src);
                            if (elem[0].src.match(/\.mp4$/i)) {
                                elem[0].srcdoc = '<html><head><meta name="viewport" content="width=device-width"></head><body><video controls="" autoplay="" width="100%" name="media"><source src=\"' + elem[0].src + '\" type="video/mp4"></video></body></html>';
                            }
                        }
                    }
                }
            }).magnificPopup('open');
        }
    });
});

Shortcodes Ultimate

https://plugins.trac.wordpress.org/browser/shortcodes-ultimate/trunk/readme.txt

https://plugins.svn.wordpress.org/shortcodes-ultimate/

Magnific Popup

https://github.com/dimsemenov/Magnific-Popup/blob/master/src/js/iframe.js

その他

AWS Device Farm

iPhoneなど手元に実機がない場合のテストに使えます。

Xdebug Installation Wizard

Xdebugでデバッグ環境を整える際に、phpinfo()の結果から状況を診断できます。

サンプルコード

  • https://codepen.io/dimsemenov/pen/AqraWJ
  • https://codepen.io/dimsemenov/pen/DjMrmL
  • https://codepen.io/dimsemenov/pen/DdpJeN

覚書

今回の問題に関連しそうな投稿

今回の問題に関連しそうなネタ

  • Magnific Popup を使ってみる
    https://www.webdesignleaves.com/wp/jquery/626/
  • Magnific Popupで作るjQueryのモーダルウィンドウ
    https://gimmicklog.com/jquery/180/
  • iframeの内容を動的に読み込む場合
    https://so-zou.jp/web-app/tech/programming/javascript/dom/node/element/html/iframe/#onload
  • Inline popup
    https://codepen.io/dimsemenov/pen/DdpJeN
  • ブラウザのconsoleからは要素を取得できるのに、scriptから取得するとnullになるときは、iframeの要素かもしれないというお話
    https://qiita.com/turara/items/3769c614da3317402c30
  • JavaScriptでブラウザとOSを判定する2つの方法
    https://qiita.com/TD12734/items/671064e8fce75faea98d

デバッグ環境関連

  • VSCodeを使ったPHPのデバッグ環境をWindows10に構築する方法(1/2)
    https://n-archives.net/articles/vscode/php-debug-with-xampp-xdebug-vscode/
  • VSCodeを使ったPHPのデバッグ環境をWindows10に構築する方法(2/2)
    https://n-archives.net/articles/vscode/php-debug-with-xampp-xdebug-vscode/2-vscode.html
  • Visual Studio CodeでPHPのデバッグ環境（Windows7）を作ってみた
    http://kazuki-room.com/i_have_created_a_php_debugging_environment_with_visual_studio_code/
  • WordPressローカルデバッグ環境作成①Windows編：VSCODE+Xdebug+XAMPP
    https://na2-factory.com/wp-tips-2/
  • XAMPPのPHPをXDebugでデバッグできるようにする
    https://qiita.com/hitotch/items/7b2895f9822ded3fa7db
  • Chrome for iOSにWebサイトデバッグツールが追加
    https://softantenna.com/blog/chrome-for-ios-inspect/
  • 【2021年最新】実機iOSでSafariのwebページをデバッグしよう
    https://kakke.site/2021/07/10/%E3%80%902021%E5%B9%B4%E6%9C%80%E6%96%B0%E3%80%91%E5%AE%9F%E6%A9%9Fios%E3%81%A7safari%E3%81%AEweb%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%81%97%E3%82%88%E3%81%86/ （2023/6/29 リンク切れ）
  • safariのレスポンシブ・デザイン・モードを活用する
    https://zenn.dev/ymmt1089/articles/20220727_safari_dev_tools
  • SafariのデベロッパーツールとiOS SimulatorでWebサイトやアプリをデバッグ
    https://blanche-toile.com/web/web-devtools-ios-simulator

JavaScript関連

  • インラインフレーム要素
    https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe#attr-srcdoc
  • インラインフレームの内容を属性値として記述する
    https://www.tagindex.com/html/embed/iframe_srcdoc.html
  • jQueryを使ってiframe要素の中身にアクセスする
    https://bashalog.c-brains.jp/10/09/25-020332.php
  • iframe body要素へのアクセス
    https://so-zou.jp/web-app/tech/programming/javascript/dom/node/element/html/iframe/#no3
  • frameまたはiframe要素内のdocumentオブジェクトを取得
    https://shanabrian.com/web/javascript/element-contentdocument.php
  • querySelector()とは？超便利なquerySelector()メソッドを使ってみる
    https://programmer-life.work/javascript/queryselector-queryselectorall-javascript
  • frameでロードごとにiframeで今表示しているurlを取得する
    https://qiita.com/sachiko-kame/items/420df8f5cf47dedf88d6
  • JavaScriptでiframe内のDOM要素を取得したり操作する
    https://designsupply-web.com/media/programming/4823/
  • Document.getElementsByClassName()
  • Document.querySelector()
  • HTMLIFrameElement.srcdoc
  • HTMLコレクション (HTMLCollection)
    https://js.studio-kingdom.com/javascript/html_collection/
  • JavaScript input type=fileの拡張子を判定する
    https://zukucode.com/2017/12/javascript-input-file-ext.html
  • JavaScriptでアップロードするファイルの拡張子をチェックするサンプル
    https://blog.ver001.com/javascript-get-extension/
  • JavaScript正規表現
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions
  • 【JavaScript】let、const、varの違いと使い分け方法を徹底解説
    https://techplay.jp/column/1619
  • JavaScriptのsetTimeoutとsetIntervalを理解しマスターする
    https://techplay.jp/column/548

一般的な動画再生に関する問題と解決方法

  • HTMLで動画の埋め込みが簡単に？videoとiframeの使い方を【徹底解説！】
    https://web-camp.io/magazine/archives/78301
  • videoタグで自動再生させるときの注意点！iOSはplaysinlineが必要
    https://take-cast.com/archives/10163/
  • iPhone等のスマホでvideoタグの動画が表示されない場合の対処法
    https://www.web-jozu.com/web/trouble/iphone-video/
  • 【徹底解説】HTMLを使って動画を埋め込む方法
    https://mteam.jp/column/10229/#iframe
  • HTMLで動画の埋め込みが簡単に？videoとiframeの使い方を【徹底解説！】
    https://web-camp.io/magazine/archives/78301
  • 動的に生成したvideoタグを自動再生するときはmuted属性ではなくプロパティを変更する
    https://blog.kimizuka.org/entry/2020/11/14/234915
  • 動画埋め込み要素
    https://developer.mozilla.org/ja/docs/Web/HTML/Element/video
  • 解決！スマホで動画が自動再生されない時はココをチェック
    https://mightyace.co.jp/2021/03/08/column2855/

他

WordPress,プログラム開発

Posted by iwadjp