Results 1 to 1 of 1

Thread: Customized HTML5 Video Player Controls Not Auto Hiding

  1. #1
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default Customized HTML5 Video Player Controls Not Auto Hiding

    Hi:

    I posted here because I suspect this may be a javascript problem:

    The following customized HTML5 video player, on a website I made for a friend, looks and works perfectly.
    However, especially in IE its controls auto hide only once in a rare while.

    Would someone please tell me why they don't auto hide all the time as they're written, how to make them
    auto hide all the time and show when they're hovered.

    Thanks,

    Kenny


    This is the test page / video



    Code:
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    The Javascript:


    Code:
      $(document).ready(function(){
    	//INITIALIZE
    	var video = $('#myVideo');
    	
    	//remove default control when JS loaded
    	video[0].removeAttribute("controls");
    	$('.control').fadeIn(500);
    	$('.caption').fadeIn(500);
     
    	//before everything get started
    	video.on('loadedmetadata', function() {
    			
    		//set video properties
    		$('.current').text(timeFormat(0));
    		$('.duration').text(timeFormat(video[0].duration));
    		updateVolume(0, 0.7);
    			
    		//start to get video buffering data 
    		setTimeout(startBuffer, 150);
    			
    		//bind video events
    		$('.videoContainer')
    		.hover(function() {
    			$('.control').stop().fadeIn();
    			$('.caption').stop().fadeIn();
    		}, function() {
    			if(!volumeDrag && !timeDrag){
    				$('.control').stop().fadeOut();
    				$('.caption').stop().fadeOut();
    			}
    		})
    		.on('click', function() {
    			$('.btnPlay').find('.icon-play').addClass('icon-pause').removeClass('icon-play');
    			$(this).unbind('click');
    			video[0].play();
    		});
    	});
    	
    	//display video buffering bar
    	var startBuffer = function() {
    		var currentBuffer = video[0].buffered.end(0);
    		var maxduration = video[0].duration;
    		var perc = 100 * currentBuffer / maxduration;
    		$('.bufferBar').css('width',perc+'%');
    			
    		if(currentBuffer < maxduration) {
    			setTimeout(startBuffer, 500);
    		}
    	};	
    	
    	//display current video play time
    	video.on('timeupdate', function() {
    		var currentPos = video[0].currentTime;
    		var maxduration = video[0].duration;
    		var perc = 100 * currentPos / maxduration;
    		$('.timeBar').css('width',perc+'%');	
    		$('.current').text(timeFormat(currentPos));	
    	});
    	
    	//CONTROLS EVENTS
    	//video screen and play button clicked
    	video.on('click', function() { playpause(); } );
    	$('.btnPlay').on('click', function() { playpause(); } );
    	var playpause = function() {
    		if(video[0].paused || video[0].ended) {
    			$('.btnPlay').addClass('paused');
    			$('.btnPlay').find('.icon-play').addClass('icon-pause').removeClass('icon-play');
    			video[0].play();
    		}
    		else {
    			$('.btnPlay').removeClass('paused');
    			$('.btnPlay').find('.icon-pause').removeClass('icon-pause').addClass('icon-play');
    			video[0].pause();
    		}
    	};
    
    	
    	//fullscreen button clicked
    	$('.btnFS').on('click', function() {
    		if($.isFunction(video[0].webkitEnterFullscreen)) {
    			video[0].webkitEnterFullscreen();
    		}	
    		else if ($.isFunction(video[0].mozRequestFullScreen)) {
    			video[0].mozRequestFullScreen();
    		}
    		else {
    			alert('Your browsers doesn\'t support fullscreen');
    		}
    	});
    	
    	//sound button clicked
    	$('.sound').click(function() {
    		video[0].muted = !video[0].muted;
    		$(this).toggleClass('muted');
    		if(video[0].muted) {
    			$('.volumeBar').css('width',0);
    		}
    		else{
    			$('.volumeBar').css('width', video[0].volume*100+'%');
    		}
    	});
    	
    	//VIDEO EVENTS
    	//video canplay event
    	video.on('canplay', function() {
    		$('.loading').fadeOut(100);
    	});
    	
    	//video canplaythrough event
    	//solve Chrome cache issue
    	var completeloaded = false;
    	video.on('canplaythrough', function() {
    		completeloaded = true;
    	});
    	
    	//video ended event
    	video.on('ended', function() {
    		$('.btnPlay').removeClass('paused');
    		video[0].pause();
    	});
    
    	//video seeking event
    	video.on('seeking', function() {
    		//if video fully loaded, ignore loading screen
    		if(!completeloaded) { 
    			$('.loading').fadeIn(200);
    		}	
    	});
    	
    	//video seeked event
    	video.on('seeked', function() { });
    	
    	//video waiting for more data event
    	video.on('waiting', function() {
    		$('.loading').fadeIn(200);
    	});
    	
    	//VIDEO PROGRESS BAR
    	//when video timebar clicked
    	var timeDrag = false;	/* check for drag event */
    	$('.progress').on('mousedown', function(e) {
    		timeDrag = true;
    		updatebar(e.pageX);
    	});
    	$(document).on('mouseup', function(e) {
    		if(timeDrag) {
    			timeDrag = false;
    			updatebar(e.pageX);
    		}
    	});
    	$(document).on('mousemove', function(e) {
    		if(timeDrag) {
    			updatebar(e.pageX);
    		}
    	});
    	var updatebar = function(x) {
    		var progress = $('.progress');
    		
    		//calculate drag position
    		//and update video currenttime
    		//as well as progress bar
    		var maxduration = video[0].duration;
    		var position = x - progress.offset().left;
    		var percentage = 100 * position / progress.width();
    		if(percentage > 100) {
    			percentage = 100;
    		}
    		if(percentage < 0) {
    			percentage = 0;
    		}
    		$('.timeBar').css('width',percentage+'%');	
    		video[0].currentTime = maxduration * percentage / 100;
    	};
    
    	//VOLUME BAR
    	//volume bar event
    	var volumeDrag = false;
    	$('.volume').on('mousedown', function(e) {
    		volumeDrag = true;
    		video[0].muted = false;
    		$('.sound').removeClass('muted');
    		updateVolume(e.pageX);
    	});
    	$(document).on('mouseup', function(e) {
    		if(volumeDrag) {
    			volumeDrag = false;
    			updateVolume(e.pageX);
    		}
    	});
    	$(document).on('mousemove', function(e) {
    		if(volumeDrag) {
    			updateVolume(e.pageX);
    		}
    	});
    	var updateVolume = function(x, vol) {
    		var volume = $('.volume');
    		var percentage;
    		//if only volume have specificed
    		//then direct update volume
    		if(vol) {
    			percentage = vol * 100;
    		}
    		else {
    			var position = x - volume.offset().left;
    			percentage = 100 * position / volume.width();
    		}
    		
    		if(percentage > 100) {
    			percentage = 100;
    		}
    		if(percentage < 0) {
    			percentage = 0;
    		}
    		
    		//update volume bar and video volume
    		$('.volumeBar').css('width',percentage+'%');	
    		video[0].volume = percentage / 100;
    		
    		//change sound icon based on volume
    		if(video[0].volume == 0){
    			$('.sound').removeClass('sound2').addClass('muted');
    		}
    		else if(video[0].volume > 0.5){
    			$('.sound').removeClass('muted').addClass('sound2');
    		}
    		else{
    			$('.sound').removeClass('muted').removeClass('sound2');
    		}
    		
    	};
    
    	//Time format converter - 00:00
    	var timeFormat = function(seconds){
    		var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
    		var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
    		return m+":"+s;
    	};
    });

    The CSS:

    Code:
          <style type="text/css">
         
          @import url(http://fonts.googleapis.com/css?family=Oswald:300);
    * {
      box-sizing: border-box;
    }
    
    
    video {
      border-radius: 6px;
    }
    
    /* video container */
    .videoContainer {
      width: 620px;
      height: 465px;
      position: relative;
      overflow: hidden;
      background: #000;
      color: #ccc;
      border-radius: 6px;
      border: 1px solid rgba(0, 0, 0, 0.8);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
      margin: 50px auto 0;
    }
    
    .videoContainer:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1);
      z-index: 6;
      border-radius: 6px;
      pointer-events: none;
    }
    
    /* video caption css */
    .caption {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 15px 10px;
      color: #009FE0;
      font-size: 0px;
      text-shadow: 2px 2px 4px #000000;
      font-weight: 500;
      text-align: center;
      background: rgba(0, 0, 0, 0.0);
     /* text-transform: uppercase;*/
      border-radius: 6px 6px 0 0;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
    }
    
    /*** VIDEO CONTROLS CSS ***/
    /* control holder */
    .control {
      color: #ccc;
      position: absolute;
      bottom: 0px;
      left: 1px;
      width: 640px;
      z-index: 5;
      display: none;
    }
    
    /* control bottom part */
    .btmControl {
      clear: both;
    }
    
    .control .btnPlay {
      float: left;
      width: 34px;
      height: 30px;
      padding: 5px;
      background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
      border-radius: 6px 0 0 6px;
      border: 1px solid rgba(0, 0, 0, 0.7);
      box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
    }
    
    .control .icon-play {
      background: url(http://s.cdpn.io/6035/vp_sprite.png) no-repeat -11px 0;
      width: 6px;
      height: 9px;
      display: block;
      margin: 5px 0 0 8px;
    }
    
    .control .icon-pause {
      background: url(http://s.cdpn.io/6035/vp_sprite.png) no-repeat -34px -1px;
      width: 8px;
      height: 9px;
      display: block;
      margin: 5px 0 0 8px;
    }
    
    .control .selected {
      font-size: 15px;
      color: #ccc;
    }
    
    .control .sound {
      width: 30px;
      height: 30px;
      float: left;
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(0, 0, 0, 0.7);
      border-left: none;
      box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
      cursor: pointer;
    }
    
    .control .icon-sound {
      background: url(http://s.cdpn.io/6035/vp_sprite.png) no-repeat -19px 0;
      width: 13px;
      height: 10px;
      display: block;
      margin: 6px 0 2px -3px;
    }
    
    .control .muted .icon-sound {
      width: 7px !important;
    }
    
    .control .btnFS {
      width: 30px;
      height: 30px;
      border-radius: 0 6px 6px 0;
      float: left;
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(0, 0, 0, 0.7);
      border-left: none;
      box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
    }
    
    .control .icon-fullscreen {
      background: url(http://s.cdpn.io/6035/vp_sprite.png) no-repeat 0 0;
      width: 10px;
      height: 10px;
      display: block;
      margin: 6px 0 2px -2px;
    }
    
    /* PROGRESS BAR CSS */
    /* Progress bar */
    .progress-bar {
      height: 30px;
      padding: 10px;
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(0, 0, 0, 0.7);
      border-left: none;
      box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
      float: left;
    }
    
    .progress {
      width: 503px;
      height: 7px;
      position: relative;
      cursor: pointer;
      background: rgba(0, 0, 0, 0.7);
      /* fallback */
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 1px black;
      border-radius: 10px;
    }
    
    .progress span {
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      border-radius: 10px;
    }
    
    .timeBar {
      z-index: 10;
      width: 0;
      background: -webkit-linear-gradient(top, #ffffff 100%, #ffffff 100%);
      box-shadow: 0 0 7px rgba(107, 204, 226, 1.0);
    }
    
    .bufferBar {
      z-index: 5;
      width: 0;
      background: rgba(255, 255, 255, 0.1);
    }
    
    /* VOLUME BAR CSS */
    /* volume bar */
    .volume {
      position: relative;
      cursor: pointer;
      width: 70px;
      height: 10px;
      float: right;
      margin-top: 10px;
      margin-right: 10px;
    }
    
    .volumeBar {
      display: block;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #eee;
      z-index: 10;
    }
    
        </style>

    The HTML:
    Code:
    <section id="wrapper">
    	<div class="videoContainer" style="margin-top:-0%;">
    		
        <video id="myVideo" controls preload="auto" poster="image/videos/video-poster/poster.jpg" width="620" >
          <source src="image/videos/Joe's-MCE.mp4" type="video/mp4" />
    		  <p>Your browser does not support the video tag.</p>
    		</video>
    		<div class="caption"><!--MODULAR CONCEPTS EAST Presents <i>Building A Modular Home--></i></div>
    		<div class="control">
    			<div class="btmControl">
    				<div class="btnPlay btn" title="Play/Pause video"><span class="icon-
    
    play"></span></div>
    				<div class="progress-bar">
    					<div class="progress">
    						<span class="bufferBar"></span>
    						<span class="timeBar"></span>
    					</div>
    				</div>
    				<!--<div class="volume" title="Set volume">
    					<span class="volumeBar"></span>
    				</div>-->
    				<div class="sound sound2 btn" title="Mute/Unmute sound"><span class="icon-
    
    sound"></span></div>
    				<div class="btnFS btn" title="Switch to full screen"><span class="icon-
    
    fullscreen"></span></div>
    			</div>
    			
    		   </div>
    	     </div>
           </section>
    Last edited by KennyP; 01-21-2017 at 07:34 AM.

Similar Threads

  1. HTML5 background audio player
    By jundo12 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-09-2014, 04:27 AM
  2. HTML5 background audio player
    By oldmanInAz in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-07-2012, 08:28 PM
  3. HTML5 background audio player not working in Firefox
    By xotj123 in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 06-07-2012, 06:32 AM
  4. html5 video
    By ggalan in forum HTML
    Replies: 9
    Last Post: 06-03-2010, 07:57 PM
  5. Music Player Customized
    By ron351 in forum HTML
    Replies: 0
    Last Post: 01-02-2007, 09:12 PM

Bookmarks

Posting Permissions

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