Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2012
    Location
    Ingerlund
    Posts
    66
    Thanks
    8
    Thanked 4 Times in 4 Posts

    Modifying a JQuery plugin to add an attribute

    Hi guys.

    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.

  • #2
    New Coder
    Join Date
    Dec 2012
    Location
    Ingerlund
    Posts
    66
    Thanks
    8
    Thanked 4 Times in 4 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •