Видео фон на javascript.Проблема со звуком. ctrl+F5

228

08 мая 2019, 21:00

Использую этот плагин для добавления видео на сайт в фоновом режиме - https://github.com/Victa/HTML5-Background-Video . При значении "sound" : true - звук появляется, но видео не воспроизводится самостоятельно, только после нажатия ctrl+f5. При значении "sound" : false - звука нету, но видео самостоятельно воспроизводится и работает как нужно.

Файл index.html

<!DOCTYPE html>
<html>
<head>
    <title>Example : jQuery - Background Video</title>
    <meta charset="UTF-8" />
    <style type="text/css" media="screen">
        * { margin:0px;padding:0px; }
        html, body {
            background:#000;
            font-family:sans-serif;
        }
    </style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.backgroundvideo.min.js"></script>
<script>
 $(document).ready(function() {
        var videobackground = new $.backgroundVideo($('body'), {
            "align": "centerXY",
            "width": 1280,
            "height": 720,
            "path": "video/",
            "filename": "ark",
            "types": ["mp4"],
            "sound" : true ,
        });
    });
</script>
</body>
</html>

Файл jquery.backgroundvideo.js

(function($) {
    $.backgroundVideo = function(el, options) {
        var defaults = {
            videoid: "video_background",
            autoplay: true,
            loop: true,
            preload: true,
            sound: true
        }
        var plugin = this;
        plugin.settings = {}
        var init = function() {
            plugin.settings = $.extend({}, defaults, options);
            plugin.el = el;
            buildVideo();
        }
        var buildVideo = function () {
            var html = '',
                preloadString = '',
                autoplayString = '',
                loopString = '',
                soundString = '',
                _preload = plugin.settings.preload,
                _autoplay = plugin.settings.autoplay,
                _loop = plugin.settings.loop;
            _sound = plugin.settings.sound;
            if (_preload) {
                preloadString = 'preload="auto"';
            } else {
                preloadString = '';
            }
            if (!_sound) {
                soundString = ' muted ';
            }
            if (_autoplay) {
                autoplayString = 'autoplay="autoplay"';
            } else {
                autoplayString = '';
            }
            if (_loop) {
                loopString = 'loop="true"';
            } else {
                loopString = '';
            }
            html += '<video id="'+plugin.settings.videoid+'"' + preloadString + autoplayString + loopString + soundString;
            if (plugin.settings.poster) {
                html += ' poster="' + plugin.settings.poster + '" ';
            }
            html += 'style="display:none;position:fixed;top:0;left:0;bottom:0;right:0;z-index:-100;width:100%;height:100%;">';
            for(var i=0; i < plugin.settings.types.length; i++) {
                html += '<source src="'+plugin.settings.path+plugin.settings.filename+'.'+plugin.settings.types[i]+'" type="video/'+plugin.settings.types[i]+'" />';
            }
            html += 'bgvideo</video>';
            plugin.el.html(html);
            plugin.videoEl = document.getElementById(plugin.settings.videoid);
            plugin.$videoEl = $(plugin.videoEl);
            plugin.$videoEl.fadeIn(2000);
            setProportion();
        }
        var setProportion = function () {
            var proportion = getProportion();
            plugin.$videoEl.width(proportion*plugin.settings.width);
            plugin.$videoEl.height(proportion*plugin.settings.height);
            if (typeof plugin.settings.align !== 'undefined') {
                centerVideo();
            }
        }
        var getProportion = function () {
            var windowWidth = $(window).width();
            var windowHeight = $(window).height();
            var windowProportion = windowWidth / windowHeight;
            var origProportion = plugin.settings.width / plugin.settings.height;
            var proportion = windowHeight / plugin.settings.height;
            if (windowProportion >= origProportion) {
                proportion = windowWidth / plugin.settings.width;
            }
            return proportion;
        }
        var centerVideo = function() {
            var centerX = (($(window).width() >> 1) - (plugin.$videoEl.width() >> 1)) | 0;
            var centerY = (($(window).height() >> 1) - (plugin.$videoEl.height() >> 1)) | 0;
            if (plugin.settings.align == 'centerXY') {
                plugin.$videoEl.css({ 'left': centerX, 'top': centerY });
                return;
            }
            if (plugin.settings.align == 'centerX') {
                plugin.$videoEl.css('left', centerX);
                return;
            }
            if (plugin.settings.align == 'centerY') {
                plugin.$videoEl.css('top', centerY);
                return;
            }
        }
        init();
        $(window).resize(function() { setProportion(); });
        plugin.$videoEl.bind('ended', function(){ this.play(); });
    }
})(jQuery);

Файл jquery.backgroundvideo.min.js

(function(t) {
    t.backgroundVideo = function(e, i) {
        var n = {
            videoid: "video_background",
            autoplay: true,
            loop: true,
            preload: true
        };
        var s = this;
        s.settings = {};
        var o = function() {
            s.settings = t.extend({}, n, i);
            s.el = e;
            d()
        };
        var d = function() {
            var e = "",
                i = "",
                n = "",
                o = "",
                d = s.settings.preload,
                g = s.settings.autoplay,
                a = s.settings.loop;
            if (d) {
                i = 'preload="auto"'
            } else {
                i = ""
            }
            if (g) {
                n = 'autoplay="autoplay"'
            } else {
                n = ""
            }
            if (a) {
                o = 'loop="true"'
            } else {
                o = ""
            }
            e += '<video id="' + s.settings.videoid + '"' + i + n + o;
            if (s.settings.poster) {
                e += ' poster="' + s.settings.poster + '" '
            }
            e += 'style="display:none;position:fixed;top:0;left:0;bottom:0;right:0;z-index:-100;width:100%;height:100%;">';
            for (var l = 0; l < s.settings.types.length; l++) {
                e += '<source src="' + s.settings.path + s.settings.filename + "." + s.settings.types[l] + '" type="video/' + s.settings.types[l] + '" />'
            }
            e += "bgvideo</video>";
            s.el.prepend(e);
            s.videoEl = document.getElementById(s.settings.videoid);
            s.$videoEl = t(s.videoEl);
            s.$videoEl.fadeIn(2e3);
            r()
        };
        var r = function() {
            var t = g();
            s.$videoEl.width(t * s.settings.width);
            s.$videoEl.height(t * s.settings.height);
            if (typeof s.settings.align !== "undefined") {
                a()
            }
        };
        var g = function() {
            var e = t(window).width();
            var i = t(window).height();
            var n = e / i;
            var o = s.settings.width / s.settings.height;
            var d = i / s.settings.height;
            if (n >= o) {
                d = e / s.settings.width
            }
            return d
        };
        var a = function() {
            var e = (t(window).width() >> 1) - (s.$videoEl.width() >> 1) | 0;
            var i = (t(window).height() >> 1) - (s.$videoEl.height() >> 1) | 0;
            if (s.settings.align == "centerXY") {
                s.$videoEl.css({
                    left: e,
                    top: i
                });
                return
            }
            if (s.settings.align == "centerX") {
                s.$videoEl.css("left", e);
                return
            }
            if (s.settings.align == "centerY") {
                s.$videoEl.css("top", i);
                return
            }
        };
        o();
        t(window).resize(function() {
            r()
        });
        s.$videoEl.bind("ended", function() {
            this.play()
        })
    }
})(jQuery);
! function(t) {
    t.backgroundVideo = function(e, i) {
        var n = {
                videoid: "video_background",
                autoplay: !0,
                loop: !0,
                preload: !0,
                sound: !0
            },
            o = this;
        o.settings = {};
        var s = function() {
                o.settings = t.extend({}, n, i), o.el = e, d()
            },
            d = function() {
                var e = "",
                    i = "",
                    n = "",
                    s = "",
                    d = "",
                    l = o.settings.preload,
                    v = o.settings.autoplay,
                    a = o.settings.loop;
                _sound = o.settings.sound, i = l ? 'preload="auto"' : "", _sound || (d = " muted "), n = v ? 'autoplay="autoplay"' : "", s = a ? 'loop="true"' : "", e += '<video id="' + o.settings.videoid + '"' + i + n + s + d, o.settings.poster && (e += ' poster="' + o.settings.poster + '" '), e += 'style="display:none;position:fixed;top:0;left:0;bottom:0;right:0;z-index:-100;width:100%;height:100%;">';
                for (var h = 0; h < o.settings.types.length; h++) e += '<source src="' + o.settings.path + o.settings.filename + "." + o.settings.types[h] + '" type="video/' + o.settings.types[h] + '" />';
                e += "bgvideo</video>", o.el.html(e), o.videoEl = document.getElementById(o.settings.videoid), o.$videoEl = t(o.videoEl), o.$videoEl.fadeIn(2e3), g()
            },
            g = function() {
                var t = l();
                o.$videoEl.width(t * o.settings.width), o.$videoEl.height(t * o.settings.height), "undefined" != typeof o.settings.align && v()
            },
            l = function() {
                var e = t(window).width(),
                    i = t(window).height(),
                    n = e / i,
                    s = o.settings.width / o.settings.height,
                    d = i / o.settings.height;
                return n >= s && (d = e / o.settings.width), d
            },
            v = function() {
                var e = (t(window).width() >> 1) - (o.$videoEl.width() >> 1) | 0,
                    i = (t(window).height() >> 1) - (o.$videoEl.height() >> 1) | 0;
                return "centerXY" == o.settings.align ? void o.$videoEl.css({
                    left: e,
                    top: i
                }) : "centerX" == o.settings.align ? void o.$videoEl.css("left", e) : "centerY" == o.settings.align ? void o.$videoEl.css("top", i) : void 0
            };
        s(), t(window).resize(function() {
            g()
        }), o.$videoEl.bind("ended", function() {
            this.play()
        })
    }
}(jQuery);

Answer 1

Знаю, что это не является решением вопроса (минусуйте, не стесняйтесь), но никак не пойму, зачем плагины, если натив в несколько строк:

window.onload = function() { 
  var oVideo = document.getElementById('bgvid'); 
  oVideo.volume = 0.3; 
  oVideo.src = '//ktonanovenkogo.ru/image/apple-ipad-2.mp4'; 
  oVideo.play(); 
};

html, body { height: 100%; margin: 0px; padding: 0px; } 
 
body { position: relative; } 
 
video { 
  position: absolute; 
  z-index: -1; 
  top: 0; 
  left: 0; 
  height: 100%; 
  width: 100%; 
  object-fit: cover; 
} 
 
.pulse-text {position: absolute;display: inline-block;top: 40%;left: 50%;transform: translate(-50%);text-align: center;font: bold 5vh 'Arial';color: #ffa;text-shadow:0 0 2px #000;animation: pulse-text 2s ease infinite;}@keyframes pulse-text {0%,100% {transform: translate(-50%) scale(1);}25% {transform: translate(-50%) scale(2);}45% {transform: translate(-50%) scale(1.5);}65% {transform: translate(-50%) scale(2);}100% {transform: translate(-50%) scale(1);}}

<video poster="" name="media" id="bgvid" playsinline loop preload="auto" src="" volume="0.3"> 
</video> 
<input type="range" class="volume" value="30" oninput="document.getElementById('bgvid').volume = this.value / 100;"> 
<div class="pulse-text">Звук есть.<br>Видео фоном идёт.<br>Всё работает!<br>JS + HTML5 + CSS3</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как правильно взять value от input-а и передать в React

есть текстовой input и button, при нажатии на button, value от inputa должен передаться компонентСейчас при каждом изменении value сохраняется в state, а при...

177

javascript

Скрыть невыбранные <options> из <select>

Есть две кнопки - каждая выбирает свой option из selectКак сделать, чтобы при нажатии на копку, все option, кроме выбранного, скрывались или становились...

163

javascript