Только целевое Safari в Javascript

Question

У меня этот код работает на моем сайте квадратов очень красиво, что использует видео в качестве фонового изображения. Единственная проблема заключается в том, что я создал пользовательское меню навигации и добавил некоторые jquery в другом месте, что, похоже, перестает работать в Safari всякий раз, когда видео устанавливается как фоновое изображение баннера.

Я попытался добавить Safari в список useragents, но, естественно, это затронуло и хром, и видео не будет воспроизводиться.

Может ли кто-нибудь сказать мне, как настроить таргетинг на браузер браузера сафари, чтобы игнорировать сценарий, не затрагивая 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

Вот хак для проверки сафари. Я не тестировал его, но, предположительно, он работает для обнаружения всех версий сафари.

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

Есть еще несколько вариантов; Есть некоторые, которые относятся к < = v5 или v6. Я нашел их на http://browserhacks.com/ в поисках 'safari'

Существует также объект, который в идеале должен быть определен только в chrome window.chrome, чтобы вы могли проверить, не определено ли исключить хром.

Другой вариант - не может быть уместным в данном случае, но если вы знаете точную функцию вам необходимо использовать, и вы не возражаете против использования библиотеки: https://modernizr.com/