Question

我正在收拾一个Squarespace网站，唯一的问题是我试图在标题中添加一个MP4，我能够找到一些代码，但问题是视频保持循环，即使我添加了loop = ＆＃34; false＆＃34; ...无论如何都要结束循环，一旦结束，就显示：无＆＃34;通过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

调整，这是你的建议，但我的视频继续循环，并且在播放后不会结束。见：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>

在SquareSpace上结束后隐藏视频

2 个答案: