I've been using the Jquery plugin 'videoBG' to play a background video to my site, which autoplays and loops. Here's the link to the website. Everything works fine, but the problem is the plugin contains no native mute function, and I'd like to mute this on the page loading. Here is the .js file:
Code:
/**
* @preserve Copyright 2011 Syd Lawrence ( www.sydlawrence.com ).
* Version: 0.2
*
* Licensed under MIT and GPLv2.
*
* Usage: $('body').videoBG(options);
*
*/
(function( $ ){
$.fn.videoBG = function( selector, options ) {
var options = {};
if (typeof selector == "object") {
options = $.extend({}, $.fn.videoBG.defaults, selector);
}
else if (!selector) {
options = $.fn.videoBG.defaults;
}
else {
return $(selector).videoBG(options);
}
var container = $(this);
// check if elements available otherwise it will cause issues
if (!container.length)
return;
// container to be at least relative
if (container.css('position') == 'static' || !container.css('position'))
container.css('position','relative');
// we need a width
if (options.width == 0)
options.width = container.width();
// we need a height
if (options.height == 0)
options.height = container.height();
// get the wrapper
var wrap = $.fn.videoBG.wrapper();
wrap.height(options.height)
.width(options.width);
// if is a text replacement
if (options.textReplacement) {
// force sizes
options.scale = true;
// set sizes and forcing text out
container.width(options.width)
.height(options.height)
.css('text-indent','-9999px');
}
else {
// set the wrapper above the video
wrap.css('z-index',options.zIndex+1);
}
// move the contents into the wrapper
wrap.html(container.clone(true));
// get the video
var video = $.fn.videoBG.video(options);
// if we are forcing width / height
if (options.scale) {
// overlay wrapper
wrap.height(options.height)
.width(options.width);
// video
video.height(options.height)
.width(options.width);
}
// add it all to the container
container.html(wrap);
container.append(video);
return video.find("video")[0];
}
// set to fullscreen
$.fn.videoBG.setFullscreen = function($el) {
var windowWidth = $(window).width(),
windowHeight = $(window).height();
$el.css('min-height',0).css('min-width',0);
$el.parent().width(windowWidth).height(windowHeight);
// if by width
if (windowWidth / windowHeight > $el.aspectRatio) {
$el.width(windowWidth).height('auto');
// shift the element up
var height = $el.height();
var shift = (height - windowHeight) / 2;
if (shift < 0) shift = 0;
$el.css("top",-shift);
} else {
$el.width('auto').height(windowHeight);
// shift the element left
var width = $el.width();
var shift = (width - windowWidth) / 2;
if (shift < 0) shift = 0;
$el.css("left",-shift);
// this is a hack mainly due to the iphone
if (shift === 0) {
var t = setTimeout(function() {
$.fn.videoBG.setFullscreen($el);
},500);
}
}
$('body > .videoBG_wrapper').width(windowWidth).height(windowHeight);
}
// get the formatted video element
$.fn.videoBG.video = function(options) {
$('html, body').scrollTop(-1);
// video container
var $div = $('<div/>');
$div.addClass('videoBG')
.css('position',options.position)
.css('z-index',options.zIndex)
.css('top',0)
.css('left',0)
.css('height',options.height)
.css('width',options.width)
.css('opacity',options.opacity)
.css('overflow','hidden');
// video element
var $video = $('<video/>');
$video.css('position','absolute')
.css('z-index',options.zIndex)
.attr('poster',options.poster)
.css('top',0)
.css('left',0)
.css('min-width','100%')
.css('min-height','100%');
if (options.autoplay) {
$video.attr('autoplay', options.autoplay);
}
// if fullscreen
if (options.fullscreen) {
$video.bind('canplay',function() {
// set the aspect ratio
$video.aspectRatio = $video.width() / $video.height();
$.fn.videoBG.setFullscreen($video);
})
// listen out for screenresize
var resizeTimeout;
$(window).resize(function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
$.fn.videoBG.setFullscreen($video);
},100);
});
$.fn.videoBG.setFullscreen($video);
}
// video standard element
var v = $video[0];
// if meant to loop
if (options.loop) {
loops_left = options.loop;
// cant use the loop attribute as firefox doesnt support it
$video.bind('ended', function(){
// if we have some loops to throw
if (loops_left)
// replay that bad boy
v.play();
// if not forever
if (loops_left !== true)
// one less loop
loops_left--;
});
}
// when can play, play
$video.bind('canplay', function(){
if (options.autoplay)
// replay that bad boy
v.play();
});
// if supports video
if ($.fn.videoBG.supportsVideo()) {
// supports webm
if ($.fn.videoBG.supportType('webm')){
// play webm
$video.attr('src',options.webm);
}
// supports mp4
else if ($.fn.videoBG.supportType('mp4')) {
// play mp4
$video.attr('src',options.mp4);
// $video.html('<source src="'.options.mp4.'" />');
}
// throw ogv at it then
else {
// play ogv
$video.attr('src',options.ogv);
}
}
// image for those that dont support the video
var $img = $('<img/>');
$img.attr('src',options.poster)
.css('position','absolute')
.css('z-index',options.zIndex)
.css('top',0)
.css('left',0)
.css('min-width','100%')
.css('min-height','100%');
// add the image to the video
// if suuports video
if ($.fn.videoBG.supportsVideo()) {
// add the video to the wrapper
$div.html($video);
}
// nope - whoa old skool
else {
// add the image instead
$div.html($img);
}
// if text replacement
if (options.textReplacement) {
// force the heights and widths
$div.css('min-height',1).css('min-width',1);
$video.css('min-height',1).css('min-width',1);
$img.css('min-height',1).css('min-width',1);
$div.height(options.height).width(options.width);
$video.height(options.height).width(options.width);
$img.height(options.height).width(options.width);
}
if ($.fn.videoBG.supportsVideo()) {
v.play();
}
return $div;
}
// check if suuports video
$.fn.videoBG.supportsVideo = function() {
return (document.createElement('video').canPlayType);
}
// check which type is supported
$.fn.videoBG.supportType = function(str) {
// if not at all supported
if (!$.fn.videoBG.supportsVideo())
return false;
// create video
var v = document.createElement('video');
// check which?
switch (str) {
case 'webm' :
return (v.canPlayType('video/webm; codecs="vp8, vorbis"'));
break;
case 'mp4' :
return (v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'));
break;
case 'ogv' :
return (v.canPlayType('video/ogg; codecs="theora, vorbis"'));
break;
}
// nope
return false;
}
// get the overlay wrapper
$.fn.videoBG.wrapper = function() {
var $wrap = $('<div/>');
$wrap.addClass('videoBG_wrapper')
.css('position','absolute')
.css('top',0)
.css('left',0);
return $wrap;
}
// these are the defaults
$.fn.videoBG.defaults = {
mp4:'',
ogv:'',
webm:'',
poster:'',
autoplay:true,
loop:true,
scale:false,
position:"absolute",
opacity:1,
textReplacement:false,
zIndex:0,
width:0,
height:0,
fullscreen:false,
imgFallback: true
}
})( jQuery );
I tried fiddling around with this code but I honestly don't really know where to begin. Any help would be greatly appreciated. Thanks very much.
I've tried inserting .attr('muted', true) in the //video element section, but I just don't have the foundation of JQuery knowledge I think you need to make this work. Just for your information, this doesn't need to be a function that you turn on and off, it's ok if this script just totally mutes the video without the user telling it to do so.
Before you post, read our: 
