javascript - 嵌入式 Youtube 视频无法在移动 iOS Safari 中播放

Question

最近我们发现一个错误，仅存在于 iPhone 上的 Safari 浏览器中，但我无法查明问题的根源。按下播放按钮时，视频似乎正在加载，但随后立即关闭。

到目前为止我找到的所有答案都不是最近的和/或不能解决问题。在 BrowserStack 中进行测试时出现以下错误: Invalid CSS property statements at: * from the www-embed-player-sprite-mode-vfl9mHoaB.css file from Youtube.

我也愿意接受处理嵌入视频的可选方法以避免此问题。

代码:

#set($showVideo = $request.getParameter("showVideo"))
#set($howItWorksID = $placeholder.getAttributeValueGroup().getAttributeValue('product_howitworks', $sesShoppingCart.getLocale()))
#set($embeddedURL = "https://www.youtube.com/embed/" + $howItWorksID + "?rel=0")
#set($hasVideoID = false)
#if( $howItWorksID && $howItWorksID != "" )
    #set( $hasVideoID = true )
#end

<div id="howItWorksModal" class="modal-howItWorks modal fade">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <button type="button" class="close js-modalClose close--howItWorks" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
            <span class="sr-only">close</span>
        </button>
        <div>
            <div class="prose howItWorks-embedVideoWrapper">
              <div class="iframe-container">    
                <iframe id="howItWorks-ModalVersion" class="howItWorks js-howItWorks-iframe" width="100%" src="" frameborder="0" allowfullscreen preload></iframe>
              </div>
           </div>
        </div>
     </div>
  </div>
</div>

    jQueryReady(function() {

            var videoURL = "$embeddedURL";

            // Load destination video and autoplay when modal opens
            $("#howItWorksModal").on('shown.bs.modal', function(ev) {
                ev.preventDefault();
                $("#howItWorks-ModalVersion").attr("src", videoURL + "&autoplay=1");
                console.log('clicked on');
            });

            // Kill video when modal is closed
            $('#howItWorksModal').on('hidden.bs.modal', function (e) {
                $('.js-howItWorks-iframe').each( function(){
                    $(this).attr('src', '');
                });
            });

            // Kill mobile video if playing while window is resized
            function mobileVideoSource(){
                var mobileBlock = $('#BuyNow-mobileBlock'),
                    howToVid_mobile = $('#howItWorks-MobileVersion');

                if (mobileBlock.is(":hidden")) {
                    // if mobile block is hidden remove it's source
                    howToVid_mobile.attr('src', '');
                } else {
                    // if mobile block is displayed add a source
                    howToVid_mobile.attr('src', videoURL);
                }
            }

            sdi.window.on('resize', mobileVideoSource);
        })

Answer 1

视频打开时，

mobileVideoSource() 被调用并删除 src。我没有调查为什么会发生这种情况，但是我重组了脚本以完全删除 iframe 而不是 src 并注入(inject)一个新实例(如果(对于任何罕见的边缘用例)屏幕大小调整回来)转到移动设备，用户想要再次观看视频:

function mobileVideoSource() {
  var mobileBlock  = $('#BuyNow-mobileBlock'),
  currentVid     = $('#howItWorks-MobileVersion'),
  videoContainer = $('.iframe-container')
  new_iframe     = $('<iframe id="howItWorks-MobileVersion" class="howItWorks" width="560" height="315" src="$embeddedURL" frameborder="0" allowfullscreen></iframe>');

    if (mobileBlock.is(":hidden")) {
      currentVid.remove();
    } else {
      videoContainer.append(new_iframe);
    }
 }