add option to mute background videos (updated)
This commit is contained in:
		@@ -448,8 +448,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>
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -2873,6 +2873,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
 | 
				
			||||||
@@ -2887,6 +2888,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 +'">';
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user