Merge

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## CHANGE LOG
 
+### Vegas 2.0.4 2015-03-12
+
+* New video options mute and loop
+
 ### Vegas 2.0.3 2015-03-06
 
 * Restore missing overlays

dist/vegas.css

@@ -1,586 +0,0 @@
-.vegas-wrapper,
-.vegas-overlay,
-.vegas-timer,
-.vegas-slide,
-.vegas-slide-inner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    overflow: hidden;
-    border: none;
-    padding: 0;
-    margin: 0;
-}
-
-.vegas-overlay {
-    opacity: .5;
-    background: transparent url(overlays/02.png) center center repeat;
-}
-
-.vegas-timer {
-    top: auto;
-    bottom: 0;
-    height: 2px;
-}
-    .vegas-timer-progress {
-        width: 0%;
-        height: 100%;
-        background: yellowgreen;
-        -webkit-transition: width ease-out;
-                transition: width ease-out;
-    }
-        .vegas-timer-running .vegas-timer-progress {
-            width: 100%;
-        }
-
-.vegas-slide,
-.vegas-slide-inner {
-    margin: 0;
-    padding: 0;
-    background: transparent center center no-repeat;
-    -webkit-transform: translateZ(0);
-            transform: translateZ(0);
-}
-
-body .vegas-container {
-    overflow: hidden !important;
-    position: relative;
-}
-    
-.vegas-video {
-    min-width: 100%; 
-    min-height: 100%;
-    width: auto; 
-    height: auto;
-}
-
-body.vegas-container {
-    overflow: auto;
-    position: static;
-    z-index: -2;
-}
-    body.vegas-container > .vegas-timer,
-    body.vegas-container > .vegas-overlay,
-    body.vegas-container > .vegas-slide {
-        position: fixed;
-        z-index: -1;
-    }
-
-    /* Target Safari IOS7+ in order to add 76px */
-    _::full-page-media, _:future, 
-    :root body.vegas-container > .vegas-slide,
-    :root body.vegas-container > .vegas-overlay {
-        bottom: -76px;
-    }
-
-/*************************
-    Transitions
- *************************/
-
-/* fade */
-.vegas-transition-fade,
-.vegas-transition-fade2 {
-    opacity: 0;
-}
-
-.vegas-transition-fade-in,
-.vegas-transition-fade2-in {
-    opacity: 1;
-}
-
-.vegas-transition-fade2-out {
-    opacity: 0;
-}
-
-/* blur */
-.vegas-transition-blur,
-.vegas-transition-blur2 {
-    opacity: 0;
-    -webkit-filter: blur(32px);
-            filter: blur(32px);
-}
-
-.vegas-transition-blur-in,
-.vegas-transition-blur2-in {
-    opacity: 1;
-    -webkit-filter: blur(0px);
-            filter: blur(0px);
-}
-
-.vegas-transition-blur2-out {
-    opacity: 0;
-}
-
-/* flash */
-.vegas-transition-flash,
-.vegas-transition-flash2 {
-    opacity: 0;
-    -webkit-filter: brightness(25);
-            filter: brightness(25);
-}
-
-.vegas-transition-flash-in,
-.vegas-transition-flash2-in {
-    opacity: 1;
-    -webkit-filter: brightness(1);
-            filter: brightness(1);
-}
-
-.vegas-transition-flash2-out {
-    opacity: 0;
-    -webkit-filter: brightness(25);
-            filter: brightness(25);
-}
-
-/* negative */
-.vegas-transition-negative,
-.vegas-transition-negative2 {
-    opacity: 0;
-    -webkit-filter: invert(100%);
-            filter: invert(100%);
-}
-
-.vegas-transition-negative-in,
-.vegas-transition-negative2-in {
-    opacity: 1;
-    -webkit-filter: invert(0);
-            filter: invert(0);
-}
-
-.vegas-transition-negative2-out {
-    opacity: 0;
-    -webkit-filter: invert(100%);
-            filter: invert(100%);
-}
-
-/* burn */
-.vegas-transition-burn,
-.vegas-transition-burn2 {
-    opacity: 0;
-    -webkit-filter: contrast(1000%) saturate(1000%);
-            filter: contrast(1000%) saturate(1000%);
-}
-
-.vegas-transition-burn-in,
-.vegas-transition-burn2-in {
-    opacity: 1;
-    -webkit-filter: contrast(100%) saturate(100%);
-            filter: contrast(100%) saturate(100%);
-}
-
-.vegas-transition-burn2-out {
-    opacity: 0;
-    -webkit-filter: contrast(1000%) saturate(1000%);
-            filter: contrast(1000%) saturate(1000%);
-}
-
-/* slideLeft */
-.vegas-transition-slideLeft,
-.vegas-transition-slideLeft2 {
-    -webkit-transform: translateX(100%);
-        -ms-transform: translateX(100%);
-            transform: translateX(100%);
-}
-
-.vegas-transition-slideLeft-in,
-.vegas-transition-slideLeft2-in {
-    -webkit-transform: translateX(0%);
-        -ms-transform: translateX(0%);
-            transform: translateX(0%); 
-}
-
-.vegas-transition-slideLeft2-out {
-    -webkit-transform: translateX(-100%);
-        -ms-transform: translateX(-100%);
-            transform: translateX(-100%);
-}
-
-/* slideRight */
-.vegas-transition-slideRight,
-.vegas-transition-slideRight2 {
-    -webkit-transform: translateX(-100%);
-        -ms-transform: translateX(-100%);
-            transform: translateX(-100%);
-}
-
-.vegas-transition-slideRight-in,
-.vegas-transition-slideRight2-in {
-    -webkit-transform: translateX(0%);
-        -ms-transform: translateX(0%);
-            transform: translateX(0%); 
-}
-
-.vegas-transition-slideRight2-out {
-    -webkit-transform: translateX(100%);
-        -ms-transform: translateX(100%);
-            transform: translateX(100%);
-}
-
-/* slideUp */
-.vegas-transition-slideUp,
-.vegas-transition-slideUp2 {
-    -webkit-transform: translateY(100%);
-        -ms-transform: translateY(100%);
-            transform: translateY(100%);
-}
-
-.vegas-transition-slideUp-in,
-.vegas-transition-slideUp2-in {
-    -webkit-transform: translateY(0%);
-        -ms-transform: translateY(0%);
-            transform: translateY(0%); 
-}
-
-.vegas-transition-slideUp2-out {
-    -webkit-transform: translateY(-100%);
-        -ms-transform: translateY(-100%);
-            transform: translateY(-100%);
-}
-
-/* slideDown */
-.vegas-transition-slideDown,
-.vegas-transition-slideDown2 {
-    -webkit-transform: translateY(-100%);
-        -ms-transform: translateY(-100%);
-            transform: translateY(-100%);
-}
-
-.vegas-transition-slideDown-in,
-.vegas-transition-slideDown2-in {
-    -webkit-transform: translateY(0%);
-        -ms-transform: translateY(0%);
-            transform: translateY(0%); 
-}
-
-.vegas-transition-slideDown2-out {
-    -webkit-transform: translateY(100%);
-        -ms-transform: translateY(100%);
-            transform: translateY(100%);
-}
-
-/* zoomIn */
-.vegas-transition-zoomIn,
-.vegas-transition-zoomIn2 {
-    -webkit-transform: scale(0);
-        -ms-transform: scale(0);
-            transform: scale(0);
-    opacity: 0;
-}
-
-.vegas-transition-zoomIn-in,
-.vegas-transition-zoomIn2-in {
-    -webkit-transform: scale(1);
-        -ms-transform: scale(1);
-            transform: scale(1);
-    opacity: 1;
-}
-
-.vegas-transition-zoomIn2-out {
-    -webkit-transform: scale(2);
-        -ms-transform: scale(2);
-            transform: scale(2);
-    opacity: 0;
-}
-
-/* zoomOut */
-.vegas-transition-zoomOut,
-.vegas-transition-zoomOut2 {
-    -webkit-transform: scale(2);
-        -ms-transform: scale(2);
-            transform: scale(2);
-    opacity: 0;
-}
-
-.vegas-transition-zoomOut-in,
-.vegas-transition-zoomOut2-in {
-    -webkit-transform: scale(1);
-        -ms-transform: scale(1);
-            transform: scale(1);
-    opacity: 1;
-}
-
-.vegas-transition-zoomOut2-out {
-    -webkit-transform: scale(0);
-        -ms-transform: scale(0);
-            transform: scale(0);
-    opacity: 0;
-}
-
-/* swirlLeft */
-.vegas-transition-swirlLeft,
-.vegas-transition-swirlLeft2 {
-    -webkit-transform: scale(2) rotate(35deg);
-        -ms-transform: scale(2) rotate(35deg);
-            transform: scale(2) rotate(35deg);
-    opacity: 0;
-}
-
-.vegas-transition-swirlLeft-in,
-.vegas-transition-swirlLeft2-in {
-    -webkit-transform: scale(1) rotate(0deg);
-        -ms-transform: scale(1) rotate(0deg);
-            transform: scale(1) rotate(0deg); 
-    opacity: 1;
-}
-
-.vegas-transition-swirlLeft2-out {
-    -webkit-transform: scale(2) rotate(-35deg);
-        -ms-transform: scale(2) rotate(-35deg);
-            transform: scale(2) rotate(-35deg);
-    opacity: 0;
-}
-
-/* swirlRight */
-.vegas-transition-swirlRight,
-.vegas-transition-swirlRight2 {
-    -webkit-transform: scale(2) rotate(-35deg);
-        -ms-transform: scale(2) rotate(-35deg);
-            transform: scale(2) rotate(-35deg);
-    opacity: 0;
-}
-
-.vegas-transition-swirlRight-in,
-.vegas-transition-swirlRight2-in {
-    -webkit-transform: scale(1) rotate(0deg);
-        -ms-transform: scale(1) rotate(0deg);
-            transform: scale(1) rotate(0deg);
-    opacity: 1;
-}
-
-.vegas-transition-swirlRight2-out {
-    -webkit-transform: scale(2) rotate(35deg);
-        -ms-transform: scale(2) rotate(35deg);
-            transform: scale(2) rotate(35deg);
-    opacity: 0;
-}
-
-/*************************
-    Animations
- *************************/
-
-.vegas-animation-kenburns {
-    -webkit-animation: kenburns ease-out;
-            animation: kenburns ease-out;
-}
-@-webkit-keyframes kenburns {
-    0% {
-        -webkit-transform: scale(1.5);
-                transform: scale(1.5);
-    }
-    100% {
-        -webkit-transform: scale(1);
-                transform: scale(1);
-    }
-}
-@keyframes kenburns {
-    0% {
-        -webkit-transform: scale(1.5);
-                transform: scale(1.5);
-    }
-    100% {
-        -webkit-transform: scale(1);
-                transform: scale(1);
-    }
-}
-
-.vegas-animation-kenburnsUp {
-    -webkit-animation: kenburnsUp ease-out;
-            animation: kenburnsUp ease-out;
-}
-@-webkit-keyframes kenburnsUp {
-    0% {
-        -webkit-transform: scale(1.5) translate(0, 10%);
-                transform: scale(1.5) translate(0, 10%);
-    }
-    100% {
-        -webkit-transform: scale(1) translate(0, 0);
-                transform: scale(1) translate(0, 0);
-    }
-}
-@keyframes kenburnsUp {
-    0% {
-        -webkit-transform: scale(1.5) translate(0, 10%);
-                transform: scale(1.5) translate(0, 10%);
-    }
-    100% {
-        -webkit-transform: scale(1) translate(0, 0);
-                transform: scale(1) translate(0, 0);
-    }
-}
-
-.vegas-animation-kenburnsDown {
-    -webkit-animation: kenburnsDown ease-out;
-            animation: kenburnsDown ease-out;
-}
-@-webkit-keyframes kenburnsDown {
-    0% {
-        -webkit-transform: scale(1.5) translate(0, -10%);
-                transform: scale(1.5) translate(0, -10%);
-    }
-    100% {
-        -webkit-transform: scale(1) translate(0, 0);
-                transform: scale(1) translate(0, 0);
-    }
-}
-@keyframes kenburnsDown {
-    0% {
-        -webkit-transform: scale(1.5) translate(0, -10%);
-                transform: scale(1.5) translate(0, -10%);
-    }
-    100% {
-        -webkit-transform: scale(1) translate(0, 0);
-                transform: scale(1) translate(0, 0);
-    }
-}
-
-.vegas-animation-kenburnsLeft {
-    -webkit-animation: kenburnsLeft ease-out;
-            animation: kenburnsLeft ease-out;
-}
-@-webkit-keyframes kenburnsLeft {
-    0% {
-        -webkit-transform: scale(1.5) translate(10%, 0);
-                transform: scale(1.5) translate(10%, 0);
-    }
-    100% {
-        -webkit-transform: scale(1) translate(0, 0);
-                transform: scale(1) translate(0, 0);
-    }
-}
-@keyframes kenburnsLeft {
-    0% {
-        -webkit-transform: scale(1.5) translate(10%, 0);
-                transform: scale(1.5) translate(10%, 0);
-    }
-    100% {
-        -webkit-transform: scale(1) translate(0, 0);
-                transform: scale(1) translate(0, 0);
-    }
-}
-
-.vegas-animation-kenburnsRight {
-    -webkit-animation: kenburnsRight ease-out;
-            animation: kenburnsRight ease-out;
-}
-@-webkit-keyframes kenburnsRight {
-    0% {
-        -webkit-transform: scale(1.5) translate(-10%, 0);
-                transform: scale(1.5) translate(-10%, 0);
-    }
-    100% {
-        -webkit-transform: scale(1) translate(0, 0);
-                transform: scale(1) translate(0, 0);
-    }
-}
-@keyframes kenburnsRight {
-    0% {
-        -webkit-transform: scale(1.5) translate(-10%, 0);
-                transform: scale(1.5) translate(-10%, 0);
-    }
-    100% {
-        -webkit-transform: scale(1) translate(0, 0);
-                transform: scale(1) translate(0, 0);
-    }
-}
-
-.vegas-animation-kenburnsUpLeft {
-    -webkit-animation: kenburnsUpLeft ease-out;
-            animation: kenburnsUpLeft ease-out;
-}
-@-webkit-keyframes kenburnsUpLeft {
-    0% {
-        -webkit-transform: scale(1.5) translate(10%, 10%);
-                transform: scale(1.5) translate(10%, 10%);
-    }
-    100% {
-        -webkit-transform: scale(1) translate(0, 0);
-                transform: scale(1) translate(0, 0);
-    }
-}
-@keyframes kenburnsUpLeft {
-    0% {
-        -webkit-transform: scale(1.5) translate(10%, 10%);
-                transform: scale(1.5) translate(10%, 10%);
-    }
-    100% {
-        -webkit-transform: scale(1) translate(0, 0);
-                transform: scale(1) translate(0, 0);
-    }
-}
-
-.vegas-animation-kenburnsUpRight {
-    -webkit-animation: kenburnsUpRight ease-out;
-            animation: kenburnsUpRight ease-out;
-}
-@-webkit-keyframes kenburnsUpRight {
-    0% {
-        -webkit-transform: scale(1.5) translate(-10%, 10%);
-                transform: scale(1.5) translate(-10%, 10%);
-    }
-    100% {
-        -webkit-transform: scale(1) translate(0, 0);
-                transform: scale(1) translate(0, 0);
-    }
-}
-@keyframes kenburnsUpRight {
-    0% {
-        -webkit-transform: scale(1.5) translate(-10%, 10%);
-                transform: scale(1.5) translate(-10%, 10%);
-    }
-    100% {
-        -webkit-transform: scale(1) translate(0, 0);
-                transform: scale(1) translate(0, 0);
-    }
-}
-
-.vegas-animation-kenburnsDownLeft {
-    -webkit-animation: kenburnsDownLeft ease-out;
-            animation: kenburnsDownLeft ease-out;
-}
-@-webkit-keyframes kenburnsDownLeft {
-    0% {
-        -webkit-transform: scale(1.5) translate(10%, -10%);
-                transform: scale(1.5) translate(10%, -10%);
-    }
-    100% {
-        -webkit-transform: scale(1) translate(0, 0);
-                transform: scale(1) translate(0, 0);
-    }
-}
-@keyframes kenburnsDownLeft {
-    0% {
-        -webkit-transform: scale(1.5) translate(10%, -10%);
-                transform: scale(1.5) translate(10%, -10%);
-    }
-    100% {
-        -webkit-transform: scale(1) translate(0, 0);
-                transform: scale(1) translate(0, 0);
-    }
-}
-
-.vegas-animation-kenburnsDownRight {
-    -webkit-animation: kenburnsDownRight ease-out;
-            animation: kenburnsDownRight ease-out;
-}
-@-webkit-keyframes kenburnsDownRight {
-    0% {
-        -webkit-transform: scale(1.5) translate(-10%, -10%);
-                transform: scale(1.5) translate(-10%, -10%);
-    }
-    100% {
-        -webkit-transform: scale(1) translate(0, 0);
-                transform: scale(1) translate(0, 0);
-    }
-}
-@keyframes kenburnsDownRight {
-    0% {
-        -webkit-transform: scale(1.5) translate(-10%, -10%);
-                transform: scale(1.5) translate(-10%, -10%);
-    }
-    100% {
-        -webkit-transform: scale(1) translate(0, 0);
-                transform: scale(1) translate(0, 0);
-    }
-}

dist/vegas.js

@@ -1,627 +0,0 @@
-/*!-----------------------------------------------------------------------------
- * Vegas - Fullscreen Backgrounds and Slideshows.
- * v2.0.3 - built 2015-03-12
- * Licensed under the MIT License.
- * http://vegas.jaysalvat.com/
- * ----------------------------------------------------------------------------
- * Copyright (C) 2010-2015 Jay Salvat
- * http://jaysalvat.com/
- * --------------------------------------------------------------------------*/
-
-/* global jQuery, Zepto */
-
-(function ($) {
-    'use strict';
-
-    var defaults = {
-        slide:              0,
-        delay:              5000,
-        preload:            false,
-        preloadImage:       false,
-        preloadVideo:       false,
-        timer:              true,
-        overlay:            false,
-        autoplay:           true,
-        shuffle:            false,
-        cover:              true,
-        color:              null,
-        align:              'center',
-        valign:             'center',
-        transition:         'fade',
-        transitionDuration: 1000,
-        transitionRegister: [],
-        animation:          null,
-        animationDuration:  'auto',
-        animationRegister:  [],
-        init:  function () {},
-        play:  function () {},
-        pause: function () {},
-        walk:  function () {},
-        slides: [
-            // {   
-            //  src:                null,
-            //  color:              null,
-            //  delay:              null,
-            //  align:              null,
-            //  valign:             null,
-            //  transition:         null,
-            //  transitionDuration: null,
-            //  animation:          null,
-            //  animationDuration:  null,
-            //  cover:              true,
-            //  videos:             []
-            // }
-            // ...
-        ]
-    };
-
-    var videoCache = {};
-
-    var Vegas = function (elmt, options) {
-        this.elmt         = elmt;
-        this.settings     = $.extend({}, defaults, $.vegas.defaults, options);
-        this.slide        = this.settings.slide;
-        this.total        = this.settings.slides.length;
-        this.noshow       = this.total < 2;
-        this.paused       = !this.settings.autoplay || this.noshow;
-        this.$elmt        = $(elmt);
-        this.$timer       = null;
-        this.$overlay     = null;
-        this.$slide       = null;
-        this.timeout      = null;
-
-        this.transitions = [
-            'fade', 'fade2',
-            'blur', 'blur2',
-            'flash', 'flash2',
-            'negative', 'negative2',
-            'burn', 'burn2',
-            'slideLeft', 'slideLeft2',
-            'slideRight', 'slideRight2',
-            'slideUp', 'slideUp2',
-            'slideDown', 'slideDown2',
-            'zoomIn', 'zoomIn2',
-            'zoomOut', 'zoomOut2',
-            'swirlLeft', 'swirlLeft2',
-            'swirlRight', 'swirlRight2'
-        ];
-
-        this.animations = [
-            'kenburns',
-            'kenburnsLeft', 'kenburnsRight',
-            'kenburnsUp', 'kenburnsUpLeft', 'kenburnsUpRight',
-            'kenburnsDown', 'kenburnsDownLeft', 'kenburnsDownRight'
-        ];
-
-        if (this.settings.transitionRegister instanceof Array === false) {
-            this.settings.transitionRegister = [ this.settings.transitionRegister ];
-        }
-
-        if (this.settings.animationRegister instanceof Array === false) {
-            this.settings.animationRegister = [ this.settings.animationRegister ];
-        }
-        
-        this.transitions = this.transitions.concat(this.settings.transitionRegister);
-        this.animations  = this.animations.concat(this.settings.animationRegister);
-
-        this.support = {
-            objectFit:  'objectFit'  in document.body.style,
-            transition: 'transition' in document.body.style || 'WebkitTransition' in document.body.style,
-            video:      $.vegas.isVideoCompatible()
-        };
-
-        if (this.settings.shuffle === true) {
-            this.shuffle();
-        }
-
-        this._init();
-    };
-
-    Vegas.prototype = {
-        _init: function () {
-            var $wrapper,
-                $overlay,
-                $timer,
-                isBody  = this.elmt.tagName === 'BODY',
-                timer   = this.settings.timer,
-                overlay = this.settings.overlay,
-                self    = this;
-
-            // Preloading
-            this._preload();
-
-            // Wrapper with content
-            if (!isBody) {
-                this.$elmt.css('height', this.$elmt.css('height'));
-                
-                $wrapper = $('<div class="vegas-wrapper">')
-                    .css('overflow', this.$elmt.css('overflow'))
-                    .css('padding',  this.$elmt.css('padding'));
-
-                // Some browsers don't compute padding shorthand
-                if (!this.$elmt.css('padding')) {
-                    $wrapper
-                        .css('padding-top',    this.$elmt.css('padding-top'))
-                        .css('padding-bottom', this.$elmt.css('padding-bottom'))
-                        .css('padding-left',   this.$elmt.css('padding-left'))
-                        .css('padding-right',  this.$elmt.css('padding-right'));
-                }
-
-                this.$elmt.clone(true).children().appendTo($wrapper);
-                this.elmt.innerHTML = '';
-            }
-
-            // Timer
-            if (timer && this.support.transition) {
-                $timer = $('<div class="vegas-timer"><div class="vegas-timer-progress">');
-                this.$timer = $timer;
-                this.$elmt.prepend($timer);
-            }
-
-            // Overlay
-            if (overlay) {
-                $overlay = $('<div class="vegas-overlay">');
-
-                if (typeof overlay === 'string') {
-                    $overlay.css('background-image', 'url(' + overlay + ')');
-                }
-
-                this.$overlay = $overlay;
-                this.$elmt.prepend($overlay);
-            }
-
-            // Container
-            this.$elmt.addClass('vegas-container');
-
-            if (!isBody) {
-                this.$elmt.append($wrapper);
-            }
-
-            setTimeout(function () {
-                self.trigger('init');
-                self._goto(self.slide);
-
-                if (self.settings.autoplay) {
-                    self.trigger('play');
-                }
-            }, 1);
-        },
-
-        _preload: function () {
-            var video, img, i;
-
-            for (i = 0; i < this.settings.slides.length; i++) {
-                if (this.settings.preload || this.settings.preloadImages) {
-                    if (this.settings.slides[i].src) {
-                        img = new Image();
-                        img.src = this.settings.slides[i].src;
-                    }
-                }
-
-                if (this.settings.preload || this.settings.preloadVideos) {
-                    if (this.support.video && this.settings.slides[i].video) {
-                        video = this._video(this.settings.slides[i].video);
-                    }
-                }
-            }
-        },
-
-        _random: function (array) {
-            return array[Math.floor(Math.random() * (array.length - 1))];
-        },
-
-        _slideShow: function () {
-            var self = this;
-
-            if (this.total > 1 && !this.paused && !this.noshow) {
-                this.timeout = setTimeout(function () {
-                    self.next();
-                }, this._options('delay')); 
-            }
-        },
-
-        _timer: function (state) {
-            var self = this;
-
-            clearTimeout(this.timeout);
-
-            if (!this.$timer) {
-                return;
-            }
-
-            this.$timer
-                .removeClass('vegas-timer-running')
-                    .find('div')
-                        .css('transition-duration', '0ms');
-
-            if (this.paused || this.noshow) {
-                return;
-            }
-
-            if (state) {
-                setTimeout(function () {
-                   self.$timer
-                    .addClass('vegas-timer-running')
-                        .find('div')
-                            .css('transition-duration', self._options('delay') - 100 + 'ms');
-                }, 100);
-            }
-        },
-
-        _video: function (srcs) {
-            var video, 
-                source,
-                cacheKey = srcs.toString();
-
-            if (videoCache[cacheKey]) {
-                return videoCache[cacheKey];
-            }
-
-            if (srcs instanceof Array === false) {
-                srcs = [ srcs ];
-            }
-
-            video = document.createElement('video');
-            video.muted = true;
-            video.preload = true;
-
-            srcs.forEach(function (src) {
-                source = document.createElement('source');
-                source.src = src;
-                video.appendChild(source);
-            });
-
-            videoCache[cacheKey] = video;
-
-            return video;
-        },
-
-        _options: function (key, i) {
-            if (i === undefined) {
-                i = this.slide;
-            }
-
-            if (this.settings.slides[i][key] !== undefined) {
-                return this.settings.slides[i][key];
-            }
-
-            return this.settings[key];
-        },
-
-        _goto: function (nb) {
-            if (typeof this.settings.slides[nb] === 'undefined') {
-                nb = 0;
-            }
-
-            this.slide = nb;
-
-            var $slide,
-                $inner,
-                $video,
-                $slides = this.$elmt.children('.vegas-slide'),
-                src     = this.settings.slides[nb].src,
-                videos  = this.settings.slides[nb].video,
-                delay   = this._options('delay'),
-                align   = this._options('align'),
-                valign  = this._options('valign'),
-                color   = this._options('color') || this.$elmt.css('background-color'),
-                cover   = this._options('cover') ? 'cover' : 'contain',
-                self    = this,
-                total   = $slides.length,
-                video,
-                img;
-
-            var transition         = this._options('transition'),
-                transitionDuration = this._options('transitionDuration'),
-                animation          = this._options('animation' ),
-                animationDuration  = this._options('animationDuration');
-
-            if (transition === 'random' || transition instanceof Array) {
-                if (transition instanceof Array) {
-                    transition = this._random(transition);
-                } else {
-                    transition = this._random(this.transitions);
-                }
-            }
-
-            if (animation === 'random' || animation instanceof Array) {
-                if (animation instanceof Array) {
-                    animation = this._random(animation);
-                } else {
-                    animation = this._random(this.animations);
-                }
-            }
-
-            if (transitionDuration === 'auto' || transitionDuration > delay) {
-                transitionDuration = delay;
-            }
-
-            if (animationDuration === 'auto') {
-                animationDuration = delay;
-            }
-
-            $slide = $('<div class="vegas-slide"></div>');
-            
-            if (this.support.transition && transition) {
-                $slide.addClass('vegas-transition-' + transition);
-            }
-
-            // Video ?
-
-            if (this.support.video && videos) {
-                video = this._video(videos);
-
-                $video = $(video)
-                    .addClass('vegas-video')
-                    .css('background-color', color);
-
-                if (this.support.objectFit) {
-                    $video
-                        .css('object-position', align + ' ' + valign)
-                        .css('object-fit', cover)
-                        .css('width',  '100%')
-                        .css('height', '100%');
-                } else if (cover === 'contain') {
-                    $video
-                        .css('width',  '100%')
-                        .css('height', '100%');
-                }
-
-                $slide.append($video);
-
-            // Image ?
-
-            } else {
-                img = new Image();
-
-                $inner = $('<div class="vegas-slide-inner"></div>')
-                    .css('background-image',    'url(' + src + ')')
-                    .css('background-color',    color)
-                    .css('background-position', align + ' ' + valign)
-                    .css('background-size',     cover);
-
-                if (this.support.transition && animation) {
-                    $inner
-                        .addClass('vegas-animation-' + animation)
-                        .css('animation-duration',  animationDuration + 'ms');
-                }
-
-                $slide.append($inner);
-            }
-
-            if (!this.support.transition) {
-                $slide.css('display', 'none');
-            }
-
-            if (total) {
-                $slides.eq(total - 1).after($slide);
-            } else {
-                this.$elmt.prepend($slide);
-            }
-
-            // $slides
-            //     .css('transition', 'all 0ms')
-            //     .each(function () {
-            //         this.className  = 'vegas-slide';
-
-            //         if (this.tagName === 'VIDEO') {
-            //             this.className += ' vegas-video';    
-            //         }
-
-            //         if (transition) {
-            //             this.className += ' vegas-transition-' + transition;
-            //             this.className += ' vegas-transition-' + transition + '-in';
-            //         }
-            //     }
-            // );
-
-            self._timer(false);
-
-            function go () {
-                self._timer(true);
-
-                setTimeout(function () {
-                    if (transition) {
-                        if (self.support.transition) {
-                            $slides
-                                .css('transition', 'all ' + transitionDuration + 'ms')
-                                .addClass('vegas-transition-' + transition + '-out');
-
-                            $slide
-                                .css('transition', 'all ' + transitionDuration + 'ms')
-                                .addClass('vegas-transition-' + transition + '-in');
-                        } else {
-                            $slide.fadeIn(transitionDuration);
-                        }
-                    }
-
-                    for (var i = 0; i < $slides.length - 4; i++) {
-                         $slides.eq(i).remove();
-                    }
-
-                    self.trigger('walk');
-                    self._slideShow();
-                }, 100);
-            }
-
-            if (video) {
-                if (video.readyState === 4) {
-                    video.currentTime = 0;
-                    video.play();
-                    go();
-                } else {
-                    video.oncanplay = function () {
-                        video.play();
-                        if (!video._started) {
-                            video._started = true;
-                            go();
-                        }
-                    };
-                }
-            } else {
-                img.src = src;
-                img.onload = go;
-            }
-        },
-
-        shuffle: function () {
-            var temp,
-                rand;
-
-            for (var i = this.total - 1; i > 0; i--) {
-                rand = Math.floor(Math.random() * (i + 1));
-                temp = this.settings.slides[i];
-                this.settings.slides[i] = this.settings.slides[rand];
-                this.settings.slides[rand] = temp;
-            }
-        },
-
-        play: function () {
-            if (this.paused) {
-                this.paused = false;
-                this.next();
-                this.trigger('play');
-            }
-        },
-
-        pause: function () {
-            this._timer(false);
-            this.paused = true;
-            this.trigger('pause');
-        },
-
-        toggle: function () {
-            if (this.paused) {
-                this.play();
-            } else {
-                this.pause();
-            }
-        },
-
-        playing: function () {
-            return !this.paused && !this.noshow;
-        },
-
-        current: function (advanced) {
-            if (advanced) {
-                return {
-                    slide: this.slide,
-                    data:  this.settings.slides[this.slide]
-                };
-            }
-            return this.slide;
-        },
-
-        jump: function (nb) {
-            if (nb < 0 || nb > this.total - 1 || nb === this.slide) {
-                return;
-            }
-
-            this.slide = nb;
-            this._goto(this.slide);
-        },
-
-        next: function () {
-            this.slide++;
-
-            if (this.slide >= this.total) {
-                this.slide = 0;
-            }
-
-            this._goto(this.slide);
-        },
-
-        previous: function () {
-            this.slide--;
-
-            if (this.slide < 0) {
-                this.slide = this.total - 1;
-            }
-
-            this._goto(this.slide);
-        },
-
-        trigger: function (fn) {
-            var params = [];
-
-            if (fn === 'init') {
-                params = [ this.settings ];
-            } else {
-                params = [ 
-                    this.slide, 
-                    this.settings.slides[this.slide]
-                ];
-            }
-
-            this.$elmt.trigger('vegas' + fn, params);
-
-            if (typeof this.settings[fn] === 'function') {
-                this.settings[fn].apply(this.$elmt, params);
-            }
-        },
-
-        options: function (key, value) {
-            var oldSlides = this.settings.slides.slice();
-
-            if (typeof key === 'object') {
-                this.settings = $.extend({}, defaults, $.vegas.defaults, key);
-            } else if (typeof key === 'string') {
-                if (value === undefined) {
-                    return this.settings[key];
-                }
-                this.settings[key] = value; 
-            } else {
-                return this.settings;
-            }
-
-            // In case slides have changed
-            if (this.settings.slides !== oldSlides) {
-                this.total  = this.settings.slides.length;
-                this.noshow = this.total < 2;
-                this._preload();   
-            }
-        }
-    };
-
-    $.fn.vegas = function(options) {
-        var args = arguments,
-            error = false,
-            returns;
-
-        if (options === undefined || typeof options === 'object') {
-            return this.each(function () {
-                if (!this._vegas) {
-                    this._vegas = new Vegas(this, options);
-                }
-            });
-        } else if (typeof options === 'string') {
-            this.each(function () {
-                var instance = this._vegas;
-
-                if (!instance) {
-                    throw new Error('No Vegas applied to this element.');
-                }
-
-                if (typeof instance[options] === 'function' && options[0] !== '_') {
-                    returns = instance[options].apply(instance, [].slice.call(args, 1));
-                } else {
-                    error = true;
-                }
-            });
-
-            if (error) {
-                throw new Error('No method "' + options + '" in Vegas.');
-            }
-
-            return returns !== undefined ? returns : this;
-        }
-    };
-
-    $.vegas = {};
-    $.vegas.defaults = defaults;
-
-    $.vegas.isVideoCompatible = function () {
-        return !/(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone)/i.test(navigator.userAgent);
-    };
-
-})(window.jQuery || window.Zepto);

src/vegas.js

@@ -40,7 +40,10 @@
             //  animation:          null,
             //  animationDuration:  null,
             //  cover:              true,
-            //  videos:             []
+            //  video: {
+            //      src: [],
+            //      mute: true,
+            //      loop: true
             // }
             // ...
         ]
@@ -253,7 +256,7 @@
             }
 
             video = document.createElement('video');
-            video.muted = true;
+            // video.muted = true;
             video.preload = true;
 
             srcs.forEach(function (src) {
@@ -267,6 +270,47 @@
             return video;
         },
 
+        _fadeOutSound: function (video, duration) {
+            var self   = this,
+                delay  = duration / 10,
+                volume = video.volume - 0.09;
+
+            var src = video.getElementsByTagName('source')[0].src;
+
+            if (volume > 0) {
+                if (src === 'http://localhost/personnel/vegas/dev/videos/bg2.mp4') {
+                    console.log('----', Math.round(volume * 100));
+                }
+                video.volume = volume;
+
+                setTimeout(function () {
+                    self._fadeOutSound(video, duration);
+                }, delay);
+            } else {
+                video.pause();
+            }
+        },
+
+        _fadeInSound: function (video, duration) {
+            var self   = this,
+                delay  = duration / 10,
+                volume = video.volume + 0.09;
+            
+            var src = video.getElementsByTagName('source')[0].src;
+
+            if (volume < 1) {
+                if (src === 'http://localhost/personnel/vegas/dev/videos/bg2.mp4') {
+                    console.log('++++', Math.round(volume * 100));
+                }
+
+                video.volume = volume;
+
+                setTimeout(function () {
+                    self._fadeInSound(video, duration);
+                }, delay);
+            }
+        },
+
         _options: function (key, i) {
             if (i === undefined) {
                 i = this.slide;
@@ -289,16 +333,16 @@
             var $slide,
                 $inner,
                 $video,
-                $slides = this.$elmt.children('.vegas-slide'),
-                src     = this.settings.slides[nb].src,
-                videos  = this.settings.slides[nb].video,
-                delay   = this._options('delay'),
-                align   = this._options('align'),
-                valign  = this._options('valign'),
-                color   = this._options('color') || this.$elmt.css('background-color'),
-                cover   = this._options('cover') ? 'cover' : 'contain',
-                self    = this,
-                total   = $slides.length,
+                $slides       = this.$elmt.children('.vegas-slide'),
+                src           = this.settings.slides[nb].src,
+                videoSettings = this.settings.slides[nb].video,
+                delay         = this._options('delay'),
+                align         = this._options('align'),
+                valign        = this._options('valign'),
+                color         = this._options('color') || this.$elmt.css('background-color'),
+                cover         = this._options('cover') ? 'cover' : 'contain',
+                self          = this,
+                total         = $slides.length,
                 video,
                 img;
 
@@ -337,10 +381,24 @@
                 $slide.addClass('vegas-transition-' + transition);
             }
 
-            // Video ?
+            // Video
+
+            if (this.support.video && videoSettings) {
+                if (videoSettings instanceof Array) {
+                    video = this._video(videoSettings);
+                } else {
+                    video = this._video(videoSettings.src);
+                }
+
+                video.loop  = videoSettings.loop !== undefined ? videoSettings.loop : true;
+                video.muted = videoSettings.mute !== undefined ? videoSettings.mute : true;
 
-            if (this.support.video && videos) {
-                video = this._video(videos);
+                if (video.muted === false) {
+                    video.volume = 0;
+                    this._fadeInSound(video, transitionDuration);
+                } else {
+                    video.pause();
+                }
 
                 $video = $(video)
                     .addClass('vegas-video')
@@ -360,7 +418,7 @@
 
                 $slide.append($video);
 
-            // Image ?
+            // Image
 
             } else {
                 img = new Image();
@@ -390,22 +448,6 @@
                 this.$elmt.prepend($slide);
             }
 
-            // $slides
-            //     .css('transition', 'all 0ms')
-            //     .each(function () {
-            //         this.className  = 'vegas-slide';
-
-            //         if (this.tagName === 'VIDEO') {
-            //             this.className += ' vegas-video';    
-            //         }
-
-            //         if (transition) {
-            //             this.className += ' vegas-transition-' + transition;
-            //             this.className += ' vegas-transition-' + transition + '-in';
-            //         }
-            //     }
-            // );
-
             self._timer(false);
 
             function go () {
@@ -418,6 +460,15 @@
                                 .css('transition', 'all ' + transitionDuration + 'ms')
                                 .addClass('vegas-transition-' + transition + '-out');
 
+                            $slides.each(function () {
+                                var video = $slides.find('video').get(0);
+
+                                if (video) {
+                                    video.volume = 1;
+                                    self._fadeOutSound(video, transitionDuration);
+                                }
+                            });
+
                             $slide
                                 .css('transition', 'all ' + transitionDuration + 'ms')
                                 .addClass('vegas-transition-' + transition + '-in');