jan/revproxy-presentation
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

add option to mute background videos

Browse source
This commit is contained in:
Razvan Caliman 2015-09-19 15:31:49 +01:00
parent a151df54be
commit 8bbc2971ac
2 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -445,8 +445,8 @@ Slides are contained within a limited portion of the screen by default to allow
<section data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat"> <section data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
<h2>This background image will be sized to 100px and repeated.</h2> <h2>This background image will be sized to 100px and repeated.</h2>
</section> </section>
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop> <section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop data-background-video-muted>
<h2>Video. Multiple sources can be defined using a comma separated list. Video will loop when the data-background-video-loop attribute is provided.</h2> <h2>Video. Multiple sources can be defined using a comma separated list. Video will loop when the data-background-video-loop attribute is provided and can be muted with the data-background-video-muted attribute.</h2>
</section> </section>
<section data-background-iframe="https://slides.com"> <section data-background-iframe="https://slides.com">
<h2>Embeds a web page as a background. Note that the page won't be interactive.</h2> <h2>Embeds a web page as a background. Note that the page won't be interactive.</h2>

5
js/reveal.js
View file

@ -2812,6 +2812,7 @@
var backgroundImage = slide.getAttribute( 'data-background-image' ), var backgroundImage = slide.getAttribute( 'data-background-image' ),
backgroundVideo = slide.getAttribute( 'data-background-video' ), backgroundVideo = slide.getAttribute( 'data-background-video' ),
backgroundVideoLoop = slide.hasAttribute( 'data-background-video-loop' ), backgroundVideoLoop = slide.hasAttribute( 'data-background-video-loop' ),
backgroundVideoMuted = slide.hasAttribute( 'data-background-video-muted' ),
backgroundIframe = slide.getAttribute( 'data-background-iframe' ); backgroundIframe = slide.getAttribute( 'data-background-iframe' );
// Images // Images
@ -2826,6 +2827,10 @@
video.setAttribute( 'loop', '' ); video.setAttribute( 'loop', '' );
} }
if( backgroundVideoMuted ) {
video.muted = true;
}
// Support comma separated lists of video sources // Support comma separated lists of video sources
backgroundVideo.split( ',' ).forEach( function( source ) { backgroundVideo.split( ',' ).forEach( function( source ) {
video.innerHTML += '<source src="'+ source +'">'; video.innerHTML += '<source src="'+ source +'">';