1
0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-01-16 21:08:28 +01:00

autoplay muted background videos in speaker view #1037

This commit is contained in:
Hakim El Hattab 2024-10-21 14:27:51 +02:00
parent 8d7b03c886
commit 95946b4ec6
5 changed files with 36 additions and 25 deletions

2
dist/reveal.esm.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
dist/reveal.js vendored

File diff suppressed because one or more lines are too long

2
dist/reveal.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -119,14 +119,14 @@ export default class SlideContent {
}
}
// Videos
else if ( backgroundVideo && !this.Reveal.isSpeakerNotes() ) {
else if ( backgroundVideo ) {
let video = document.createElement( 'video' );
if( backgroundVideoLoop ) {
video.setAttribute( 'loop', '' );
}
if( backgroundVideoMuted ) {
if( backgroundVideoMuted || this.Reveal.isSpeakerNotes() ) {
video.muted = true;
}
@ -280,7 +280,9 @@ export default class SlideContent {
*/
startEmbeddedContent( element ) {
if( element && !this.Reveal.isSpeakerNotes() ) {
if( element ) {
const isSpeakerNotesWindow = this.Reveal.isSpeakerNotes();
// Restart GIFs
queryAll( element, 'img[src$=".gif"]' ).forEach( el => {
@ -306,6 +308,9 @@ export default class SlideContent {
if( autoplay && typeof el.play === 'function' ) {
// In teh speaker view we only auto-play muted media
if( isSpeakerNotesWindow && !el.muted ) return;
// If the media is ready, start playback
if( el.readyState > 1 ) {
this.startEmbeddedMedia( { target: el } );
@ -337,27 +342,33 @@ export default class SlideContent {
}
} );
// Normal iframes
queryAll( element, 'iframe[src]' ).forEach( el => {
if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
return;
}
// Don't play iframe content in the speaker view since we can't
// guarantee that it's muted
if( !isSpeakerNotesWindow ) {
this.startEmbeddedIframe( { target: el } );
} );
// Normal iframes
queryAll( element, 'iframe[src]' ).forEach( el => {
if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
return;
}
// Lazy loading iframes
queryAll( element, 'iframe[data-src]' ).forEach( el => {
if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
return;
}
this.startEmbeddedIframe( { target: el } );
} );
if( el.getAttribute( 'src' ) !== el.getAttribute( 'data-src' ) ) {
el.removeEventListener( 'load', this.startEmbeddedIframe ); // remove first to avoid dupes
el.addEventListener( 'load', this.startEmbeddedIframe );
el.setAttribute( 'src', el.getAttribute( 'data-src' ) );
}
} );
// Lazy loading iframes
queryAll( element, 'iframe[data-src]' ).forEach( el => {
if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
return;
}
if( el.getAttribute( 'src' ) !== el.getAttribute( 'data-src' ) ) {
el.removeEventListener( 'load', this.startEmbeddedIframe ); // remove first to avoid dupes
el.addEventListener( 'load', this.startEmbeddedIframe );
el.setAttribute( 'src', el.getAttribute( 'data-src' ) );
}
} );
}
}