视频横幅图像的结尾

时间:2016-05-16 13:41:18

标签: javascript jquery

使用以下代码在Squarespace上的横幅中运行视频。希望这样当视频结束横幅加载横幅图像时。似乎无法让它发挥作用。任何帮助将不胜感激。顺便说一下,对脚本来说是全新的。

谢谢!

<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 = "VIDEOHERE";
          banner.hide();
          $('<video class="bannerVideo" autoplay="" 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>

1 个答案:

答案 0 :(得分:0)

插入视频后,您可以附加onended事件监听器。

var video = querySelector('.bannerVideo');
video.onended = function() {
  // Display Image
  adjustBanner($('.bannerVideo'), banner);
}