Last active
March 19, 2020 15:37
-
-
Save jramsahai/c253bcc5711d1304eaa4 to your computer and use it in GitHub Desktop.
Autoplaying a video when it enters the browser viewport is all the rage these days. I decided to take a shot at it with a fairly simple example of the base use case with the Vidyard player. There's some tweaking that will be required to handle certain situations (What if there are two players in view? What if the user pauses a video?) but it wor…
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> | |
| <script> | |
| function isElementInViewport (el) { | |
| //special bonus for those using jQuery | |
| if (typeof jQuery === "function" && el instanceof jQuery) { | |
| el = el[0]; | |
| } | |
| var rect = el.getBoundingClientRect(); | |
| return ( | |
| rect.top >= 0 && | |
| rect.left >= 0 && | |
| rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ | |
| rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ | |
| ); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Scroll down</h1> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| <h2>Keep going...</h2> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| <div id="video01"> | |
| <script type='text/javascript' id='vidyard_embed_code_rpKqmPqiVn59TdU9RxRH7g' src='//play.vidyard.com/rpKqmPqiVn59TdU9RxRH7g.js?v=3.1.1&type=inline'></script> | |
| </div> | |
| <h2>Wow! It plays! Ok keep scrolling...</h2> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| <h2>Oooooh it stopped! Continue scrolling please.</h2> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| <h2>Ooh another player. Let's see what happens.</h2> | |
| .<br/> | |
| <div id="video02"> | |
| <script type='text/javascript' id='vidyard_embed_code_bvVEQbps7tbSUzN8l3GOkQ' src='//play.vidyard.com/bvVEQbps7tbSUzN8l3GOkQ.js?v=3.1.1&type=inline'></script> | |
| </div> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| <h2>Yeah that one stopped too.</h2> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| .<br/> | |
| <h2>That's all I have for you. Have a good day.</h2> | |
| <script src="//play.vidyard.com/v0/api.js"></script> | |
| <script type="text/javascript"> | |
| var videos = new Vidyard.players(); | |
| var playing01=0; | |
| var playing02=0; | |
| $(window).on('scroll', function() { | |
| if(isElementInViewport($("#video01")) && (playing01==0)) { | |
| videos["rpKqmPqiVn59TdU9RxRH7g"].play(); | |
| playing01=1; | |
| } else if (!isElementInViewport($("#video01")) && (playing01==1)) { | |
| videos["rpKqmPqiVn59TdU9RxRH7g"].pause(); | |
| playing01=0; | |
| } else if (isElementInViewport($("#video02")) && (playing02==0)) { | |
| videos["bvVEQbps7tbSUzN8l3GOkQ"].play(); | |
| playing02=1; | |
| } else if (!isElementInViewport($("#video02")) && (playing02==1)) { | |
| videos["bvVEQbps7tbSUzN8l3GOkQ"].pause(); | |
| playing02=0; | |
| } | |
| }); | |
| </script> | |
| <script> | |
| // This is some event based handling I was trying to get working, but never got as far as making it support multiple videos. | |
| // var videos = new Vidyard.players(); | |
| // var playing=0; | |
| // function onVisibilityChange (el,pl) { | |
| // return function () { | |
| // if(isElementInViewport(el) && (playing==0)) { | |
| // videos[pl].play(); | |
| // playing=1; | |
| // } else if (!isElementInViewport(el) && (playing==1)) { | |
| // videos[pl].pause(); | |
| // playing=0; | |
| // } | |
| // } | |
| // } | |
| // var handler = onVisibilityChange($("#video01"),"rpKqmPqiVn59TdU9RxRH7g"); | |
| //jQuery | |
| // $(window).on('load resize scroll', handler); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment