在SquareSpace上结束视频后隐藏视频

Question

我正在包装一个 Squarespace 网站，唯一的问题是我试图将 MP4 添加到标题中，我能够找到一些代码，但问题是视频不断循环，即使我添加了 loop="false"...有没有办法结束循环，一旦结束，通过css"显示：无"？

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>