Last active
June 21, 2016 13:24
-
-
Save jramsahai/eb3693f1df2a0f8da711 to your computer and use it in GitHub Desktop.
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…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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