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

【问题标题】：Hide Video After It Ends On SquareSpace在 SquareSpace 上结束后隐藏视频
【发布时间】：2016-07-14 19:16:36
【问题描述】：

我正在整理一个 Squarespace 网站，唯一的问题是我正在尝试将 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>

【问题讨论】：

它是 YouTube 视频吗？因为如果是这样，那么您可以使用 YouTube 的 API 来创建视频，然后跟踪它的完成 - stackoverflow.com/questions/25184549/…
其实是MP4...:(
好吧，在这种情况下，仍然非常简单且可行：stackoverflow.com/questions/2741493/…
您的视频标签是否如下所示：<video src="yourVideoURL" id="myVideo"></video>?
$('

标签： javascript video

【解决方案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
});

【讨论】：

谢谢阿吉特！我可以用什么来隐藏“//视频结束时做某事”的视频。会不会是 video.css ({display:'none',});？
@RobOrf 没问题，是的，你可以这样做。它将使用$video 而不仅仅是普通的video，因为.css 是一个jQuery 函数，您需要告诉程序video 是一个jQuery 对象。如果这是帮助您的正确答案，请将其标记为正确，以便其他人知道。
@RobOrf 你也可以$video.fadeOut('fast');
感谢 Adjit，请参阅上面的“答案”。出于某种原因，即使代码完全不同，它仍然没有做任何不同的事情。我真的很重视你的帮助，很荣幸知道这个社区有这么棒的人。

【解决方案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>

【讨论】：