dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

add option to mute background videos

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

22
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>
@ -499,15 +499,15 @@ You can also use different in and out transitions for the same slide:
```html ```html
<section data-transition="slide"> <section data-transition="slide">
The train goes on … The train goes on …
</section> </section>
<section data-transition="slide"> <section data-transition="slide">
and on … and on …
</section> </section>
<section data-transition="slide-in fade-out"> <section data-transition="slide-in fade-out">
and stops. and stops.
</section> </section>
<section data-transition="fade-in slide-out"> <section data-transition="fade-in slide-out">
(Passengers entering and leaving) (Passengers entering and leaving)
</section> </section>
<section data-transition="slide"> <section data-transition="slide">
@ -813,7 +813,7 @@ The multiplex plugin needs the following 3 things to operate:
More details: More details:
#### Master presentation #### Master presentation
Served from a static file server accessible (preferably) only to the presenter. This need only be on your (the presenter's) computer. (It's safer to run the master presentation from your own computer, so if the venue's Internet goes down it doesn't stop the show.) An example would be to execute the following commands in the directory of your master presentation: Served from a static file server accessible (preferably) only to the presenter. This need only be on your (the presenter's) computer. (It's safer to run the master presentation from your own computer, so if the venue's Internet goes down it doesn't stop the show.) An example would be to execute the following commands in the directory of your master presentation:
1. ```npm install node-static``` 1. ```npm install node-static```
2. ```static``` 2. ```static```
@ -886,7 +886,7 @@ You are very welcome to point your presentations at the Socket.io server running
##### socket.io server as file static server ##### socket.io server as file static server
The socket.io server can play the role of static file server for your client presentation, as in the example at [http://revealjs.jit.su](http://revealjs.jit.su). (Open [http://revealjs.jit.su](http://revealjs.jit.su) in two browsers. Navigate through the slides on one, and the other will update to match.) The socket.io server can play the role of static file server for your client presentation, as in the example at [http://revealjs.jit.su](http://revealjs.jit.su). (Open [http://revealjs.jit.su](http://revealjs.jit.su) in two browsers. Navigate through the slides on one, and the other will update to match.)
Example configuration: Example configuration:
```javascript ```javascript
@ -938,7 +938,7 @@ Reveal.initialize({
If you want to display math equations in your presentation you can easily do so by including this plugin. The plugin is a very thin wrapper around the [MathJax](http://www.mathjax.org/) library. To use it you'll need to include it as a reveal.js dependency, [find our more about dependencies here](#dependencies). If you want to display math equations in your presentation you can easily do so by including this plugin. The plugin is a very thin wrapper around the [MathJax](http://www.mathjax.org/) library. To use it you'll need to include it as a reveal.js dependency, [find our more about dependencies here](#dependencies).
The plugin defaults to using [LaTeX](http://en.wikipedia.org/wiki/LaTeX) but that can be adjusted through the ```math``` configuration object. Note that MathJax is loaded from a remote server. If you want to use it offline you'll need to download a copy of the library and adjust the ```mathjax``` configuration value. The plugin defaults to using [LaTeX](http://en.wikipedia.org/wiki/LaTeX) but that can be adjusted through the ```math``` configuration object. Note that MathJax is loaded from a remote server. If you want to use it offline you'll need to download a copy of the library and adjust the ```mathjax``` configuration value.
Below is an example of how the plugin can be configured. If you don't intend to change these values you do not need to include the ```math``` config object at all. Below is an example of how the plugin can be configured. If you don't intend to change these values you do not need to include the ```math``` config object at all.
@ -951,7 +951,7 @@ Reveal.initialize({
mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js', mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html
}, },
dependencies: [ dependencies: [
{ src: 'plugin/math/math.js', async: true } { src: 'plugin/math/math.js', async: true }
] ]

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 +'">';