iframe postmesssage api works with lazy loaded iframes
parent
bf6a426cf2
commit
af270a909c
62
js/reveal.js
62
js/reveal.js
|
@ -2910,29 +2910,42 @@
|
|||
}
|
||||
} );
|
||||
|
||||
// Lazy loading iframes
|
||||
toArray( slide.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( element ) {
|
||||
element.setAttribute( 'src', element.getAttribute( 'data-src' ) );
|
||||
// Normal iframes
|
||||
toArray( slide.querySelectorAll( 'iframe[src]' ) ).forEach( function( el ) {
|
||||
startEmbeddedIframe( { target: el } );
|
||||
} );
|
||||
|
||||
// Generic postMessage API for non-lazy loaded iframes
|
||||
toArray( slide.querySelectorAll( 'iframe' ) ).forEach( function( el ) {
|
||||
el.contentWindow.postMessage( 'slide:start', '*' );
|
||||
});
|
||||
|
||||
// YouTube postMessage API
|
||||
toArray( slide.querySelectorAll( 'iframe[src*="youtube.com/embed/"]' ) ).forEach( function( el ) {
|
||||
if( el.hasAttribute( 'data-autoplay' ) ) {
|
||||
el.contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', '*' );
|
||||
// Lazy loading iframes
|
||||
toArray( slide.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( el ) {
|
||||
if( el.getAttribute( 'src' ) !== el.getAttribute( 'data-src' ) ) {
|
||||
el.removeEventListener( 'load', startEmbeddedIframe ); // remove first to avoid dupes
|
||||
el.addEventListener( 'load', startEmbeddedIframe );
|
||||
el.setAttribute( 'src', el.getAttribute( 'data-src' ) );
|
||||
}
|
||||
});
|
||||
} );
|
||||
}
|
||||
|
||||
// Vimeo postMessage API
|
||||
toArray( slide.querySelectorAll( 'iframe[src*="player.vimeo.com/"]' ) ).forEach( function( el ) {
|
||||
if( el.hasAttribute( 'data-autoplay' ) ) {
|
||||
el.contentWindow.postMessage( '{"method":"play"}', '*' );
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* "Starts" the content of an embedded iframe using the
|
||||
* postmessage API.
|
||||
*/
|
||||
function startEmbeddedIframe( event ) {
|
||||
|
||||
var iframe = event.target;
|
||||
|
||||
// YouTube postMessage API
|
||||
if( /youtube\.com\/embed\//.test( iframe.getAttribute( 'src' ) ) && iframe.hasAttribute( 'data-autoplay' ) ) {
|
||||
iframe.contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', '*' );
|
||||
}
|
||||
// Vimeo postMessage API
|
||||
else if( /player\.vimeo\.com\//.test( iframe.getAttribute( 'src' ) ) && iframe.hasAttribute( 'data-autoplay' ) ) {
|
||||
iframe.contentWindow.postMessage( '{"method":"play"}', '*' );
|
||||
}
|
||||
// Generic postMessage API
|
||||
else {
|
||||
iframe.contentWindow.postMessage( 'slide:start', '*' );
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -2951,14 +2964,10 @@
|
|||
}
|
||||
} );
|
||||
|
||||
// Lazy loading iframes
|
||||
toArray( slide.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( element ) {
|
||||
element.removeAttribute( 'src' );
|
||||
} );
|
||||
|
||||
// Generic postMessage API for non-lazy loaded iframes
|
||||
toArray( slide.querySelectorAll( 'iframe' ) ).forEach( function( el ) {
|
||||
el.contentWindow.postMessage( 'slide:stop', '*' );
|
||||
el.removeEventListener( 'load', startEmbeddedIframe );
|
||||
});
|
||||
|
||||
// YouTube postMessage API
|
||||
|
@ -2974,6 +2983,11 @@
|
|||
el.contentWindow.postMessage( '{"method":"pause"}', '*' );
|
||||
}
|
||||
});
|
||||
|
||||
// Lazy loading iframes
|
||||
toArray( slide.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( el ) {
|
||||
el.removeAttribute( 'src' );
|
||||
} );
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue