Skip to content

Instantly share code, notes, and snippets.

@jramsahai

jramsahai/autoplay_next_video.html

Last active June 21, 2016 13:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jramsahai/eb3693f1df2a0f8da711 to your computer and use it in GitHub Desktop.
Save jramsahai/eb3693f1df2a0f8da711 to your computer and use it in GitHub Desktop.
Download ZIP
We get a lot of requests on how to achieve the design you see over at http://www.vidyard.com/tour. Try playing the first video, and you'll see what I mean. Admittedly, it's a pretty sweet effect that makes use of the Vidyard javascript player API and a third party script that handles the page scrolling. Here's a sample page that makes use of thi…
Raw
autoplay_next_video.html
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="tour_section" id="tour_section_1">
<script type="text/javascript" id="vidyard_embed_code_88eO52vbto7om8vPVV6lZw" src="//play.vidyard.com/88eO52vbto7om8vPVV6lZw.js?v=3.1&type=inline"></script>
</div>
.<br />
.<br />
.<br />
<div class="tour_section" id="tour_section_2">
<script type="text/javascript" id="vidyard_embed_code_TjgWaKiU9Ctd3RV-gpuA0Q" src="//play.vidyard.com/TjgWaKiU9Ctd3RV-gpuA0Q.js?v=3.1&type=inline"></script>
</div>
<script type='text/javascript' src='http://play.vidyard.com/v0/api.js'></script>
<script type='text/javascript' src='tour_autoplay.js'></script>
</body>
</html>
Raw
tour_autoplay.js
jQuery(document).ready(function($) {
var video_1 = new Vidyard.player("88eO52vbto7om8vPVV6lZw");
var video_2 = new Vidyard.player("TjgWaKiU9Ctd3RV-gpuA0Q");
video_1.on("playerComplete", function() {
$('html, body').animate({scrollTop: $("#tour_section_2").offset().top - 50}, 2000);
video_2.play();
console.log('video_1 completed');
});
video_2.on("playerComplete", function() {
$('html, body').animate({scrollTop: $("#tour_section_1").offset().top - 50}, 2000);
video_1.play();
console.log('video_2 completed');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment