- Auto play/pause youtube videos & audio

alvarotrigo · alvarotrigo · commit 0460b69e22e6 · 2016-05-24T13:07:45.000+02:00
diff --git a/README.md b/README.md
@@ -34,6 +34,7 @@ Would you like to have a website using fullpage.js functionality but you don't k
   - [Creating smaller sections](https://github.com/alvarotrigo/fullPage.js#creating-smaller-sections)
   - [State classes added by fullpage.js](https://github.com/alvarotrigo/fullPage.js#state-classes-added-by-fullpagejs)
   - [Lazy loading](https://github.com/alvarotrigo/fullPage.js#lazy-loading)
+  - [Autoplay embedded media](https://github.com/alvarotrigo/fullPage.js#)
 - [Options](https://github.com/alvarotrigo/fullPage.js#options)
 - [Methods](https://github.com/alvarotrigo/fullPage.js#methods)
 - [Callbacks](https://github.com/alvarotrigo/fullPage.js#callbacks)
@@ -271,6 +272,27 @@ To enable lazy loading all you need to do is change your `src` attribute to `dat
 </video>
  ```
 
+###Auto play/pause embedded media
+
+#### Play on section/slide load:
+Using the attribute `autoplay` for videos or audio, or the param `autoplay=1` for youtube iframes will result in the media element playing on page load. 
+In order to play it on section/slide load use instead the attribute `data-autoplay`. For example:
+
+```html
+<audio data-autoplay>
+	<source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
+</audio>
+```
+
+#### Pause on leave
+Embedded HTML5 `<video>` / `<audio>`  and Youtube iframes are automatically paused when you navigate away from a section or slide. This can be disabled by using the attribute `data-keepplaying`. For example: 
+```html
+<audio data-keepplaying>
+	<source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
+</audio>
+```
+
+
 ## Options
 
 - `controlArrows`: (default `true`) Determines whether to use control arrows for the slides to move right or left.
diff --git a/jquery.fullPage.js b/jquery.fullPage.js
@@ -654,6 +654,9 @@
                 addVerticalNavigation();
             }
 
+            enableYoutubeAPI();
+            enableVidemoAPI();
+
             if(options.scrollOverflow){
                 if(document.readyState === 'complete'){
                     createSlimScrollingHandler();
@@ -838,6 +841,35 @@
             afterRenderActions();
         }
 
+        /*
+        * Enables the Youtube videos API so we can control their flow if necessary.
+        */
+        function enableYoutubeAPI(){
+            container.find('iframe[src*="youtube.com/embed/"]').each(function(){
+                var sign = getUrlParamSign($(this).attr('src'));
+                $(this).attr('src', $(this).attr('src') + sign + 'enablejsapi=1');
+            });
+        }
+
+        /*
+        * Enables the Vimeo videos API so we can control their flow if necessary.
+        */
+        function enableVidemoAPI(){
+            container.find('iframe[src*="player.vimeo.com/"]').each(function(){
+                var sign = getUrlParamSign($(this).attr('src'));
+                $(this).attr('src', $(this).attr('src') + sign + 'api=1');
+            });
+        }
+
+        /*
+        * Returns the prefix sign to use for a new parameter in an existen URL.
+        *
+        * @return {String}  ? | &
+        */
+        function getUrlParamSign(url){
+            return ( !/\?/.test( url ) ) ? '?' : '&';
+        }
+
         /**
         * Actions and callbacks to fire afterRender
         */
@@ -1534,10 +1566,19 @@
             destiny.find('video, audio').each(function(){
                 var element = $(this).get(0);
 
-                if( element.hasAttribute('autoplay') && typeof element.play === 'function' ) {
+                if( element.hasAttribute('data-autoplay') && typeof element.play === 'function' ) {
                     element.play();
                 }
             });
+
+            //youtube videos
+            destiny.find('iframe[src*="youtube.com/embed/"]').each(function(){
+                var element = $(this).get(0);
+
+                if( /youtube\.com\/embed\//.test($(this).attr('src')) && element.hasAttribute('data-autoplay')){
+                    element.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
+                }
+            });
         }
 
         /**
@@ -1550,10 +1591,19 @@
             destiny.find('video, audio').each(function(){
                 var element = $(this).get(0);
 
-                if( !element.hasAttribute('data-ignore') && typeof element.pause === 'function' ) {
+                if( !element.hasAttribute('data-keepplaying') && typeof element.pause === 'function' ) {
                     element.pause();
                 }
             });
+
+            //youtube videos
+            destiny.find('iframe[src*="youtube.com/embed/"]').each(function(){
+                var element = $(this).get(0);
+
+                if( /youtube\.com\/embed\//.test($(this).attr('src')) && !element.hasAttribute('data-keepplaying')){
+                    $(this).get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
+                }
+            });
         }
 
         /**
