Question

最近我们发现在iPhone上的Safari中只存在的错误，但我无法确定问题的根源。按下播放按钮时，视频似乎加载但随后立即关闭。

到目前为止我找到的所有答案都不是最近的和/或没有解决问题。在BrowserStack中测试给出了这个错误：来自Youtube提供的www-embed-player-sprite-mode-vfl9mHoaB.css文件中的Invalid CSS property declaration at: *。

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

代码：

#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并注入一个新实例if（对于任何罕见的边缘用例）屏幕调整为大小调整为移动并且用户想再次观看视频：

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);
    }
 }

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

1 个答案: