Использую этот плагин для добавления видео на сайт в фоновом режиме - 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);
"autoplay": true
– UModeL 24 ноя '18 в 14:23