start work on video backgrounds #751

This commit is contained in:
Hakim El Hattab 2014-03-26 15:48:28 +01:00
parent ccbeaf4c32
commit 1de159c4f4
4 changed files with 40 additions and 6 deletions

View File

@ -1344,6 +1344,17 @@ body {
visibility: visible !important; visibility: visible !important;
} }
/* Video backgrounds */
.reveal .slide-background video {
position: absolute;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
top: 0;
left: 0;
}
/* Immediate transition style */ /* Immediate transition style */
.reveal[data-background-transition=none]>.backgrounds .slide-background, .reveal[data-background-transition=none]>.backgrounds .slide-background,
.reveal>.backgrounds .slide-background[data-background-transition=none] { .reveal>.backgrounds .slide-background[data-background-transition=none] {

2
css/reveal.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -488,6 +488,7 @@ var Reveal = (function(){
background: slide.getAttribute( 'data-background' ), background: slide.getAttribute( 'data-background' ),
backgroundSize: slide.getAttribute( 'data-background-size' ), backgroundSize: slide.getAttribute( 'data-background-size' ),
backgroundImage: slide.getAttribute( 'data-background-image' ), backgroundImage: slide.getAttribute( 'data-background-image' ),
backgroundVideo: slide.getAttribute( 'data-background-video' ),
backgroundColor: slide.getAttribute( 'data-background-color' ), backgroundColor: slide.getAttribute( 'data-background-color' ),
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ), backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
backgroundPosition: slide.getAttribute( 'data-background-position' ), backgroundPosition: slide.getAttribute( 'data-background-position' ),
@ -507,8 +508,18 @@ var Reveal = (function(){
} }
} }
if( data.background || data.backgroundColor || data.backgroundImage ) { // Create a hash for this combination of background settings.
element.setAttribute( 'data-background-hash', data.background + data.backgroundSize + data.backgroundImage + data.backgroundColor + data.backgroundRepeat + data.backgroundPosition + data.backgroundTransition ); // This is used to determine when two slide backgrounds are
// the same.
if( data.background || data.backgroundColor || data.backgroundImage || data.backgroundVideo ) {
element.setAttribute( 'data-background-hash', data.background +
data.backgroundSize +
data.backgroundImage +
data.backgroundVideo +
data.backgroundColor +
data.backgroundRepeat +
data.backgroundPosition +
data.backgroundTransition );
} }
// Additional and optional background properties // Additional and optional background properties
@ -519,6 +530,18 @@ var Reveal = (function(){
if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition; if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition ); if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
// Create video background element
if( data.backgroundVideo ) {
var video = document.createElement( 'video' );
// Support comma separated lists of video sources
data.backgroundVideo.split( ',' ).forEach( function( source ) {
video.innerHTML += '<source src="'+ source +'">';
} );
element.appendChild( video );
}
container.appendChild( element ); container.appendChild( element );
return element; return element;

6
js/reveal.min.js vendored

File diff suppressed because one or more lines are too long