Autoplay HTML5 Videos in Fancybox

Question

I'm working on a project that uses Fancybox to display single HTML5 Videos, as well as HTML5 video galleries.

For the single videos, I'm looking to autoplay the video as soon as it's opened in Fancybox, and then close Fancybox when the video has finished playing.

For the videos in a gallery, I'd like to autoplay the video when it's opened in Fancybox, advance to the next gallery item when the video finishes playing, and pause the current video / autoplay the next/previous video if the user navigates through the gallery.

I've included a codepen here: http://codepen.io/ericjacksonwood/pen/kXKkaq/ that includes a couple of my attempts working with Fancybox's "afterLoad" function:

// 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(); 
}

Any help would be appreciated! Thanks.

-------- Edit --------

The codepen has been updated and is working correctly.

Answer 1

You can use html5's media methods and events for that.

I used the play method to start the video once the slide show animation is done, and the ended callback to call the fancybox.next() function once the video has ended.

Here is a working version you can check:

$(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>