Squarewayで終了したビデオを隠す

Question

私はSquarespaceのWebサイトをラッピングしていますが、唯一の問題はヘッダーにMP4を追加しようとしていることです。コードを見つけることができましたが、私はloop = "false"を追加したにもかかわらず...ループを終了するためにとにかく、そして終わったら、CSSを使って "display：none"するのですか？

https://marina-toybina.squarespace.com

<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 = $('#page-thumb img').first(); 
     var url = "/s/Countdown-Intro_06.mp4"; 
     banner.hide(); 
     $('<video class="bannerVideo" autoplay="" loop="false" 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' 
     }); 
    } 
    }); 
</script> 

Answer 1

あなたはすでにそれだけで、それに固執する方が簡単かもしれjQueryのを使用しているので...ここに私の提案です -

var $video = $('<video class="bannerVideo" autoplay="" loop="false" preload><source src="' + url + '" type="video/mp4"></video>'); 

$video.insertAfter(banner); 

$video.on('ended', function(){ 
    //do something when video ends 
}); 

Answer 2

Adjit、これは、あなたが示唆したものです私のビデオは引き続きループし、再生後に終了しません。こちらをご覧ください：marina-toybina.squarespace.com

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
<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 = $('#page-thumb img').first(); 
    var url = "/s/Countdown-Intro_06.mp4"; 
    banner.hide(); 
var $video = $('<video class="bannerVideo" autoplay="" loop="false" preload><source src="' + url + '" type="video/mp4"></video>'); 

$video.insertAfter(banner); 

$video.on('ended', function(){ 
$video.fadeOut('fast'); 
});  
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' 
    }); 
} 
}); 
</script>