xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gifs now restart when their slide container is shown

Browse Source
This commit is contained in:
Hakim El Hattab 2015-01-30 10:52:28 +01:00
parent 621e8d7176
commit 49f462e6ce
2 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -201,6 +201,9 @@
<pre><code style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre> <pre><code style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
</div> </div>
</section> </section>
<section data-background="http://i.giphy.com/90F8aUepslB84.gif">
<h2>... and GIFs!</h2>
</section>
</section> </section>
<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom"> <section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">

16
js/reveal.js
View File

@ -2580,6 +2580,15 @@
currentVideo.play(); currentVideo.play();
} }
var backgroundImageURL = currentBackground.style.backgroundImage || '';
// Restart GIFs (doesn't work in Firefox)
if( /\.gif/i.test( backgroundImageURL ) ) {
currentBackground.style.backgroundImage = '';
window.getComputedStyle( currentBackground ).opacity;
currentBackground.style.backgroundImage = backgroundImageURL;
}
// Don't transition between identical backgrounds. This // Don't transition between identical backgrounds. This
// prevents unwanted flicker. // prevents unwanted flicker.
var previousBackgroundHash = previousBackground ? previousBackground.getAttribute( 'data-background-hash' ) : null; var previousBackgroundHash = previousBackground ? previousBackground.getAttribute( 'data-background-hash' ) : null;
@ -2826,6 +2835,13 @@
function startEmbeddedContent( slide ) { function startEmbeddedContent( slide ) {
if( slide && !isSpeakerNotes() ) { if( slide && !isSpeakerNotes() ) {
// Restart GIFs
toArray( slide.querySelectorAll( 'img[src$=".gif"]' ) ).forEach( function( el ) {
// Setting the same unchanged source like this was confirmed
// to work in Chrome, FF & Safari
el.setAttribute( 'src', el.getAttribute( 'src' ) );
} );
// HTML5 media elements // HTML5 media elements
toArray( slide.querySelectorAll( 'video, audio' ) ).forEach( function( el ) { toArray( slide.querySelectorAll( 'video, audio' ) ).forEach( function( el ) {
if( el.hasAttribute( 'data-autoplay' ) ) { if( el.hasAttribute( 'data-autoplay' ) ) {