Question

我已经很好地在我的squarespace网站上运行了这个代码，它利用视频作为背景图像。唯一的问题是我创建了一个自定义导航菜单，并在其他地方添加了一些jquery，只要将视频设置为背景横幅图像，这似乎就停止在Safari中工作。

我尝试将Safari添加到使用者列表中，但自然也影响了Chrome，视频也无法播放。

有人能告诉我如何定位Safari桌面浏览器以忽略脚本而不影响Chrome吗？

<script type="text/javascript">
  $(window).bind("load", function() {
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) 
    {
      } else {
      var banner = $('#pageWrapper img').first();
      if (banner.length === 0)
        banner = $('.banner-thumbnail-wrapper > #thumbnail > img').first();
      if (banner.length === 0)
        banner = $('#parallax-images img').first();
      if (banner.length === 0)
        banner = $('.has-main-image img').first();
      if (banner.length === 0)
          banner = $('.primary-image img').first();
     if (banner.length === 0)
          banner = $('#page-thumb img').first();
      var url = "https://max-fedorov-pzor.squarespace.com/s/Frog-eggs.mp4";
      banner.hide();
      $('<video class="bannerVideo" autoplay="" loop="" preload><source src="' + url + '" type="video/mp4"></video>').insertAfter(banner);
      adjustBanner($('.bannerVideo'), banner);
      setTimeout(function() {
        adjustBanner($('.bannerVideo'), banner);
      }, 2000);
      $(window, banner).resize(function() {
        adjustBanner($('.bannerVideo'), banner);
        setTimeout(function() {
          adjustBanner($('.bannerVideo'), banner);
        }, 200);
      });
    }
    function adjustBanner (video, banner) {
      video.css({
        height: banner.css('height'),
        width: banner.css('width'),
        top: banner.css('top'),
        left: banner.css('left'),
        position: 'relative',
        'object-fit': 'inherit'
      });
    }
  });

非常感谢。

Answer 1

这是一个检查野生动物园的黑客。我还没有对它进行测试，但据推测它适用于检测所有版本的safari。

var isSafari = /constructor/i.test(window.HTMLElement);

还有更多选择;有一些特定于＆lt; = v5或v6。我在http://browserhacks.com/上找到了＃safari＆＃39;

还有一个理想情况下只能在chrome window.chrome中定义的对象，因此您可以检查它是否未定义以消除chrome。

另一种选择 - 在这种情况下可能不相关，但如果您知道需要使用的确切功能，并且不介意使用库：https://modernizr.com/

在Javascript中仅定位Safari

1 个答案: