Question

我正在开发一个使用Fancybox显示单个HTML5视频以及HTML5视频库的项目。

对于单个视频，我希望在Fancybox中打开视频后自动播放视频，然后在视频播放完毕后关闭Fancybox。

对于图库中的视频，我想在视频在Fancybox中打开时自动播放视频，在视频播放完毕后前进到下一个图库项目，并暂停当前视频/自动播放如果用户浏览图库，则下一个/上一个视频。

我在这里添加了一个codepen：http://codepen.io/ericjacksonwood/pen/kXKkaq/，其中包括我尝试使用Fancybox＆＃34; afterLoad＆＃34;功能：

// Attempt 01      
$(".fancybox-video").find('video').play();

// Attempt 02
$(".fancybox-video").find('video').attr('autoplay','autoplay');

// Attempt 03
var vid = document.getElementsByClassName("fancybox-video"); 
function playVid() { 
    vid.play(); 
}

任何帮助将不胜感激！感谢。

--------编辑--------

codepen已更新并且工作正常。

Answer 1

您可以使用html5的媒体methods和events。

我使用play方法在幻灯片放映动画完成后启动视频，并使用ended回调在视频结束后调用fancybox.next()功能。

以下是您可以查看的工作版本：

$(document).ready(function() {
  $(".fancybox").fancybox({
    afterShow: function() {
      // After the show-slide-animation has ended - play the vide in the current slide
      this.content.find('video').trigger('play')
      
      // Attach the ended callback to trigger the fancybox.next() once the video has ended.
      this.content.find('video').on('ended', function() {
        $.fancybox.next();
      });
    }
  });
});

.fancybox-video {
  display: none;
}

.fancybox-nav {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 40%;
}

/**** DEMO STUFF ****/
html, body {
  padding: 1em;
}

hr {
  border: none;
  height: 1px;
  background: #eee;
  display: block;
  clear: left;
  margin: 4em 0 2em 0;
}

.video-links {
  list-style: none;
  padding: 0;
}
.video-links li {
  float: left;
  margin-right: 10px;
}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>


<h4>01. Single Video</h4>
<ul>
  <li>Autoplay HTML5 video when Fancybox opens</li>
  <li>Close Fancybox after video is finished playing</li>
</ul>

<ul class="video-links">
  <li><a class="fancybox" href="#single-video">Video 01</a></li>
</ul>

<div id="single-video" class="fancybox-video">
  <video controls width="100%" height="auto">
    <source src="https://cache.wdcdn.net/asset/assetId/2508128/size/primary/ts/1471978675/type/library/client/WD-8KVJQ/Oikos_TheSpill.mp4?token=fc1b0717c&category=pres&action=view" type="video/mp4">   
  </video>
</div>

<hr/>

<h4>02. Video Gallery</h4>
<ul>
  <li>Autoplay HTML5 video when Fancybox opens</li>
  <li>Advance Fancybox to next video in gallery when video is finished playing</li>
  <li>Pause video if user navigates to next video in gallery (which fancybox seems to do already)</li>
  <li>Autplay next video if user navigates through the gallery</li>
  <li>Close Fancybox after last video is finished playing</li>
</ul>

<ul class="video-links">
  <li><a class="fancybox" rel="video-gallery" href="#video01">Video 01</a></li>
  <li><a class="fancybox" rel="video-gallery" href="#video02">Video 02</a></li>
  <li><a class="fancybox" rel="video-gallery" href="#video03">Video 03</a></li>
</ul>

<div id="video01" class="fancybox-video">
  <video controls width="100%" height="auto">
    <source src="https://cache.wdcdn.net/asset/assetId/2508128/size/primary/ts/1471978675/type/library/client/WD-8KVJQ/Oikos_TheSpill.mp4?token=fc1b0717c&category=pres&action=view" type="video/mp4">   
  </video>
</div>

<div id="video02" class="fancybox-video">
  <video controls width="100%" height="auto">
    <source src="https://cache.wdcdn.net/asset/assetId/2506071/size/primary/ts/1369681137/type/library/client/WD-8KVJQ/TaxAct_FreetoPee.mp4?token=fc1b0717c&category=pres&action=view" type="video/mp4">    
  </video>
</div>

<div id="video03" class="fancybox-video">
  <video controls width="100%" height="auto">
    <source src="https://cache.wdcdn.net/asset/assetId/2507394/size/primary/ts/1471978845/type/library/client/WD-8KVJQ/WalMart_Legs_15.mp4?token=fc1b0717c&category=pres&action=view" type="video/mp4">   
  </video>
</div>

在Fancybox中自动播放HTML5视频

1 个答案: