¿Cómo adaptar controles personalizados en vídeo media player – jQuery? – jquery css3

Pregunta:


Estoy implementando un diseño de controles de vídeos personalizados, teniendo algo de errores en adaptarlo existe un desorden en el diseño.

Cómo puedo adaptar el diseño responsiva y estructurarlos de manera correcta que quede en un orden perfecto similar a la siguiente imagen:

introducir la descripción de la imagen aquí

Y en el diseño del Speed añadir un circulo azul que indique en que velocidad se ha seleccionado la velocidad del vídeo.

introducir la descripción de la imagen aquí

Nota 1: Imágenes adicionales necesarias para animar el audio actualmente se esta animando 3 tipos de audio el silencio el volumen 1 y el volumen 3 faltaría poder añadir el volumen 2 http://svgshare.com/i/3uH.svg.

Nota 2: Imagen adicional para quitar la pantalla completa http://svgshare.com/i/3ue.svg, solo esta incluida la imagen full screen.

Código completo:

$(document).ready(function(){
	//INITIALIZE
	var video = $('#myVideo');
	
	//remove default control when JS loaded
	video[0].removeAttribute("controls");
	$('.control').show().css({'bottom':-45});
	$('.loading').fadeIn(500);
	$('.caption').fadeIn(500);
 
	//before everything get started
	video.on('loadedmetadata', function() {
		$('.caption').animate({'top':-45},300);
			
		//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')
		.append('<div id="init"></div>')
		.hover(function() {
			$('.control').stop().animate({'bottom':0}, 500);
			$('.caption').stop().animate({'top':0}, 500);
		}, function() {
			if(!volumeDrag && !timeDrag){
				$('.control').stop().animate({'bottom':-45}, 500);
				$('.caption').stop().animate({'top':-45}, 500);
			}
		})
		.on('click', function() {
			$('#init').remove();
			$('.btnPlay').addClass('paused');
			$(this).unbind('click');
			video[0].play();
		});
		$('#init').fadeIn(200);
	});
	
	//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');
			video[0].play();
		}
		else {
			$('.btnPlay').removeClass('paused');
			video[0].pause();
		}
	};
	
	//speed text clicked
	$('.btnx1').on('click', function() { fastfowrd(this, 1); });
	$('.btnx3').on('click', function() { fastfowrd(this, 3); });
	var fastfowrd = function(obj, spd) {
		$('.text').removeClass('selected');
		$(obj).addClass('selected');
		video[0].playbackRate = spd;
		video[0].play();
	};
	
	//stop button clicked
	$('.btnStop').on('click', function() {
		$('.btnPlay').removeClass('paused');
		updatebar($('.progress').offset().left);
		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;
	};
});
/* video container */
.videoContainer{
	width:600px;
	height:350px;
	position:relative;
	overflow:hidden;
	background:#000;
	color:#ccc;
}

/* video caption css */
.caption{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	padding:10px;
	color:#ccc;
	font-size:20px;
	font-weight:bold;
	box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	background: #1F1F1F; /* fallback */
	background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
	background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
	background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
}

/*** VIDEO CONTROLS CSS ***/
/* control holder */
.control{
	background: rgba(0,0,0,.7);
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
  height: 45px;
	/*height: 13%;*/
	z-index:5;
	display:none;
}

/* control top part */
.topControl {
  float: left;
  width: 50%;
}

/* control bottom part */
.btmControl{
	clear:both;
	background: #1F1F1F; /* fallback */
	background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
	background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
	background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
}

.control .btn {
	float:left;
	width:34px;
	height:30px;
	padding:0 10px;
	cursor:pointer;
}

.control div.btnPlay::after {
  content: "";
  background-image: url(http://svgshare.com/i/3um.svg);
  width: 50px;
  height: 50px;
  display: inline-block;
  background-size: cover;
  position: relative;
  top: -7px;
}

/*
.control div.paused{
}
*/

.control div.paused::after {
  content: "";
  background-image: url(http://svgshare.com/i/3vz.svg);
  width: 65px;
  height: 65px;
  display: inline-block;
  background-size: cover;
  position: relative;
  top: -15px;
  left: -10px;
}

.control div.spdText {
  width: 1em;
  height: 1.5em;
  line-height: 1.5em;
  position: relative;
  font-size: 1em;
  border-radius: 5%;
  color: #29303b;
  background-color: hsla(0,0%,100%,.9);
}

.speed {
	margin:0;
	padding:0;
  display: none;
  position: absolute;
  max-height: 0;
  transition: max-height 1s;
}

.speed-title {
	text-align: left;
  text-transform: none;
  padding: 5px 20px 5px 15px;
  color: #fff;
  font-weight: 700;
  font-size: 1.25em;
  margin: 0;
  line-height: 1.2;
}

.speed li {
	padding: 5px 20px 5px 15px;
}

.speed .btnx3:hover, .btnx1:hover {
	background-color: #505763;
  color: #fff;
  box-shadow: none;
}

.spdText:hover .speed {
	text-align: center;
  display: block;
  list-style: none;
  max-height: 300px;
  transition: max-height 1s;
  left:-25px;
  background-color: black;
  opacity: 0.5;
  color: white;
  top: -102px;
}

.control div.selected{
	font-size:15px;
	color:#ccc;
}

.control div.sound::after {
  content: "";
  background-image: url(http://svgshare.com/i/3ww.svg);
  width: 45px;
  height: 45px;
  display: inline-block;
  background-size: cover;
  position: relative;
  top: -5px;
  /*left: -10px;*/
}

.control div.sound2::after {
  content: "";
  background-image: url(http://svgshare.com/i/3xS.svg);
  width: 45px;
  height: 45px;
  display: inline-block;
  background-size: cover;
  position: relative;
  top: -5px;
  /*left: -10px;*/
}

.control div.muted::after {
  content: "";
  background-image: url(http://svgshare.com/i/3v_.svg);
  width: 45px;
  height: 45px;
  display: inline-block;
  background-size: cover;
  position: relative;
  top: -5px;
}

.control div.btnFS{
	float: right;
}

.control div.btnFS::after {
  content: "";
  background-image: url(http://svgshare.com/i/3wo.svg); 
  width: 40px;
  height: 40px;
  display: inline-block;
  background-size: cover;
  position: relative;
  top: 0px;
}

/* PROGRESS BAR CSS */
/* Progress bar */
.progress {
	width:85%;
	height:10px;
	position:relative;
	float:left;
	cursor:pointer;
}

.progress span {
	height:40%;
	position:absolute;
	top:0;
	left:0;
	display:block;
}

.timeBar{
	z-index:10;
	width:0;
	background: #2EB3D0;
}

.bufferBar{
	z-index:5;
	width:0;
	background: #ddd;
}

/* time and duration */
.time{
	float:right;
	text-align:center;
	font-size:11px;
	line-height:12px;
}

/* 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:40%;
	position:absolute;
	top:0;
	left:0;
	background-color:#eee;
	z-index:10;
}

/* OTHERS CSS */
/* video screen cover */
.loading, #init{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(loading.gif) no-repeat 50% 50%;
	z-index:2;
	display:none;
}

#init{
	background:url(bigplay.png) no-repeat 50% 50% !important;
	cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Content -->
<section id="wrapper">

<div class="videoContainer">
	
	<video id="myVideo" controls preload="auto" poster="https://i.ytimg.com/vi/x676X3ak3wo/maxresdefault.jpg" width="600" height="350" >
	  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
	  <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />
	  <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />
	  <p>Your browser does not support the video tag.</p>
	</video>
	<div class="caption">This is HTML5 video with custom controls</div>
	<div class="control">

		<div class="btmControl">
			<div class="btnPlay btn" title="Play/Pause video"></div>
			<!--<div class="btnStop btn" title="Stop video"></div>-->
			<div class="spdText btn">x1
			  <ul class="speed">
			    <li class="speed-title">Speed</li>
			    <li class="btnx3">x3</li>
			    <li class="btnx1 selected">x1</li>
        </ul>
			</div>

			<!--<div class="btnx1 btn text selected" title="Normal speed">x1</div>
			<div class="btnx3 btn text" title="Fast forward x3">x3</div>-->

		<div class="topControl">
			<div class="progress">
				<span class="bufferBar"></span>
				<span class="timeBar"></span>
			</div>
			<div class="time">
				<span class="current"></span> / 
				<span class="duration"></span> 
			</div>
		</div>

			<div class="btnFS btn" title="Switch to full screen"></div>
			<!--<div class="btnLight lighton btn" title="Turn on/off light"></div>-->
			<div class="volume" title="Set volume">
				<span class="volumeBar"></span>
			</div>
			<div class="sound sound2 btn" title="Mute/Unmute sound"></div>
		</div>
		
	</div>
	<div class="loading"></div>
</div>
</section>
Preguntado por: So12

Alvaro Montoro

Si he comprendido bien por la pregunta y los comentarios, realmente lo que quieres hacer son estas tres cosas:

  1. La velocidad debe mostrar un círculo azul que indique cuál está activa.
  2. Cambiar el icono cuando se está en pantalla completa.
  3. El volumen tiene que tener un nivel más.

Vamos a ver las tres cosas por separado y al final las ponemos juntas en el código.


Indicador de velocidad

El círculo azul se puede añadir fácilmente con CSS, pero aparte hay otro problema con el código JavaScript que hace que no se desactive la opción oportuna. Así que hay que corregir esas dos cosas.

El código JS que tienes ahora mismo es éste:

  //speed text clicked
  $('.btnx1').on('click', function() {
    fastfowrd(this, 1);
  });
  $('.btnx3').on('click', function() {
    fastfowrd(this, 3);
  });
  var fastfowrd = function(obj, spd) {
    $('.text').removeClass('selected');
    $(obj).addClass('selected');
    video[0].playbackRate = spd;
    video[0].play();
  };

Esta parte es incorrecta: $('.text').removeClass('selected');. El selector .text no devuelve nada así que no desactivará nada (al menos no se le quitará la clase selected a nada). Parece que esto es código antiguo porque hay comentado algo que sí tenía la clase text. La solución es simple, cambia el selector para que se quite el .selected a la clase .selected de esa lista.

    $('.speed .selected').removeClass('selected');

Y ahora que sabes que la clase selected se va a aplicar/quitar correctamente, puedes estilizar el punto haciendo algo como esto:

.speed li { position: relative; }
.speed li.selected::after {
  content: "·";
  color: #00ffff;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
  font-size: 36px;
}

Pantalla completa

Cambiar el icono para pantalla completa es algo que vamos a hacer con CSS también, pero antes vamos a ver tu código JS:

  //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');
    }
  });

…este código tiene problemas que harán que falle de todos modos:

  1. Estás haciendo pantalla completa del vídeo, eso es un problema porque cuando el video se ponga en pantalla completa, tus nuevos controles ya no se verán. Lo que quieres hacer es que lo que se ponga a pantalla completa sea el div que contiene el vídeo.
  2. Controlas que se entre en pantalla completa (que es cuando deberías cambiar el icono), pero no controlas cuando se sale (que es cuando deberías volver a poner el icono original en su lugar).
  3. El código JS tiene errores. Por ejemplo webkitEnterFullscreen no es una función válida, querrías webkitRequestFullscreen (como en moz)

Arreglando esas tres cosas (y limpiando un poco, porque es complejo), se vería así:

  //fullscreen button clicked
  $('.btnFS').on('click', function() {
    // si estamos en modo de pantalla completa
    if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
      // salimos del modo de pantalla completa
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    } else {
      // si no, entramos en modo pantalla completa
      element = $('#wrapper').get(0);
      if (element.requestFullScreen) {
        element.requestFullScreen();
      } else if (element.mozRequestFullScreen) {            
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullScreen) { 
        element.webkitRequestFullScreen();            
      } else {
        alert('Your browsers doesn't support fullscreen');
      }
    }
  });

Y para controlar que el icono cambia, se puede usar los selectores especiales de pantalla completa (por separado porque si se ponen juntas y los navegadores detectan un error en una, ignorarán todas):

:-webkit-full-screen .control div.btnFS::after { background-image: url(http://svgshare.com/i/3ue.svg) ; }
:-moz-full-screen .control div.btnFS::after { background-image: url(http://svgshare.com/i/3ue.svg) ; }
:-ms-fullscreen .control div.btnFS::after { background-image: url(http://svgshare.com/i/3ue.svg) ; }
:fullscreen .control div.btnFS::after { background-image: url(http://svgshare.com/i/3ue.svg) ; }

Lamentablemente, el modo de ejecución de scripts de StackOverflow impide que se pueda poner el vídeo a pantalla completa, pero he probado y funciona.

Nota: me he limitado a cambiar lo menos posible tu código para
adaptarme a lo preguntado. Pero sería interesante que cuando lo
cambies a pantalla completa, hagas que el vídeo ocupe un 100% de la
pantalla, de lo contrario estará limitado a los 600×350 que le tienes
puesto.


Volumen de nivel 2

Ahora, para el volumen tienes un sistema que dependiendo del valor quitará/añadirá clases para que se muestre un icono u otro:

    //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');
    }

Lo único que tendrías que hacer es añadir un control más. Ahora en lugar de romperse en tres niveles (0, 0-50 o 50-100), tendrás que romper en 4 niveles (0, 0-33, 33-66, 66-100… puedes cambiar estos valores como quieras para ajustar los iconos a lo que quieras).

Con ese cambio, quedaría así (uniendo todos los removeClass en uno sólo por línea):

    //change sound icon based on volume
    if (video[0].volume == 0) {
      $('.sound').removeClass('sound2, sound3').addClass('muted');
    } else if (video[0].volume > 0.6) {
      $('.sound').removeClass('muted, sound3').addClass('sound2');
    } else if (video[0].volume > 0.3) {
      $('.sound').removeClass('muted, sound2').addClass('sound3');
    } else {
      $('.sound').removeClass('muted, sound2, sound3');
    }

Y sólo te quedaría añadir el nuevo CSS (que será igual al de .sound2 sólo cambiando la imagen):

.control div.sound2::after,
.control div.sound3::after {
  content: "";
  background-image: url(http://svgshare.com/i/3xS.svg);
  width: 45px;
  height: 45px;
  display: inline-block;
  background-size: cover;
  position: relative;
  top: -5px;
  /*left: -10px;*/
}

.control div.sound3::after {
  background-image: url(http://svgshare.com/i/3uH.svg);
}

Y finalmente el código completo:

$(document).ready(function() {
  //INITIALIZE
  var video = $('#myVideo');

  //remove default control when JS loaded
  video[0].removeAttribute("controls");
  $('.control').show().css({
    'bottom': -45
  });
  $('.loading').fadeIn(500);
  $('.caption').fadeIn(500);

  //before everything get started
  video.on('loadedmetadata', function() {
    $('.caption').animate({
      'top': -45
    }, 300);

    //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')
      .append('<div id="init"></div>')
      .hover(function() {
        $('.control').stop().animate({
          'bottom': 0
        }, 500);
        $('.caption').stop().animate({
          'top': 0
        }, 500);
      }, function() {
        if (!volumeDrag && !timeDrag) {
          $('.control').stop().animate({
            'bottom': -45
          }, 500);
          $('.caption').stop().animate({
            'top': -45
          }, 500);
        }
      })
      .on('click', function() {
        $('#init').remove();
        $('.btnPlay').addClass('paused');
        $(this).unbind('click');
        video[0].play();
      });
    $('#init').fadeIn(200);
  });

  //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');
      video[0].play();
    } else {
      $('.btnPlay').removeClass('paused');
      video[0].pause();
    }
  };

  //speed text clicked
  $('.btn-speed').on('click', function() {
    spd = $(this).data("speed");
    $('.speed .selected').removeClass('selected');
    $(this).addClass('selected');
    video[0].playbackRate = spd;
    //video[0].play();
    $("#current-speed").text("x" + spd);
  });

  //stop button clicked
  $('.btnStop').on('click', function() {
    $('.btnPlay').removeClass('paused');
    updatebar($('.progress').offset().left);
    video[0].pause();
  });

  //fullscreen button clicked
  $('.btnFS').on('click', function() {
    // si estamos en modo de pantalla completa
    if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
      // salimos del modo de pantalla completa
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    } else {
      // si no, entramos en modo pantalla completa
      element = $('#wrapper').get(0);
      if (element.requestFullScreen) {
        element.requestFullScreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      } 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, sound3').addClass('muted');
        } else if (video[0].volume > 0.66) {
          $('.sound').removeClass('muted, sound3').addClass('sound2');
        } else if (video[0].volume > 0.33) {
          $('.sound').removeClass('muted, sound2').addClass('sound3');
        } else {
          $('.sound').removeClass('muted, sound2, sound3');
        }

  };

  //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;
  };
});
/** CODIGO NUEVO *****************/

.speed li {
  position: relative;
}

.speed li.selected::after {
  content: "·";
  color: #00ffff;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
  font-size: 36px;
}

:-webkit-full-screen .control div.btnFS::after {
  background-image: url(http://svgshare.com/i/3ue.svg);
}

:-moz-full-screen .control div.btnFS::after {
  background-image: url(http://svgshare.com/i/3ue.svg);
}

:-ms-fullscreen .control div.btnFS::after {
  background-image: url(http://svgshare.com/i/3ue.svg);
}

:fullscreen .control div.btnFS::after {
  background-image: url(http://svgshare.com/i/3ue.svg);
}

/* hay algo más de código nuevo abajo junto a .sound2 */

/** CODIGO ORIGINAL **************/


/* video container */

.videoContainer {
  width: 600px;
  height: 350px;
  position: relative;
  overflow: hidden;
  background: #000;
  color: #ccc;
}


/* video caption css */

.caption {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  color: #ccc;
  font-size: 20px;
  font-weight: bold;
  box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background: #1F1F1F;
  /* fallback */
  background: -moz-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%);
  background: -webkit-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%);
  background: -o-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%);
}


/*** VIDEO CONTROLS CSS ***/


/* control holder */

.control {
  background: rgba(0, 0, 0, .7);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45px;
  /*height: 13%;*/
  z-index: 5;
  display: none;
}


/* control top part */

.topControl {
  flex: 1;
  margin-top: 16px;
}


/* control bottom part */

.btmControl {
  height: 100%;
  clear: both;
  background: #1F1F1F;
  /* fallback */
  background: -moz-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%);
  background: -webkit-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%);
  background: -o-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%);
  display: flex;
}

.control .btn {
  width: 34px;
  height: 45px;
  padding: 0 10px;
  cursor: pointer;
  position: relative;
}

.control .btn::after {
  width: 100%;
  height: 100%;
  display: inline-block;
  background-size: cover;
  position: relative;
  background-position: center center;
}

.control div.btnPlay::after {
  content: "";
  background-image: url(http://svgshare.com/i/3um.svg);
}


/*
.control div.paused{
}
*/

.control div.paused::after {
  content: "";
  background-image: url(http://svgshare.com/i/3vz.svg);
}

.control div.spdText {
  width: 1em;
  height: 1.5em;
  line-height: 1.5em;
  position: relative;
  font-size: 1em;
  border-radius: 5%;
  color: #29303b;
  background-color: hsla(0, 0%, 100%, .9);
  top: 50%;
    transform: translate(0, -50%);
    margin-right: 10px;
}

.speed {
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  max-height: 0;
  transition: max-height 1s;
}

.speed-title {
  text-align: left;
  text-transform: none;
  padding: 5px 20px 5px 15px;
  color: #fff;
  font-weight: 700;
  font-size: 1.25em;
  margin: 0;
  line-height: 1.2;
}

.speed li {
  padding: 5px 20px 5px 15px;
}

.speed .btn-speed:hover {
  background-color: #505763;
  color: #fff;
  box-shadow: none;
}

.spdText:hover .speed {
  text-align: center;
  display: block;
  list-style: none;
  max-height: 300px;
  transition: max-height 1s;
  left: -25px;
  background-color: black;
  opacity: 0.5;
  color: white;
  bottom: 24px;
}

.control div.selected {
  font-size: 15px;
  color: #ccc;
}

.control div.sound::after {
  content: "";
  background-image: url(http://svgshare.com/i/3ww.svg);
}

/* código nuevo */
.control div.sound2::after,
.control div.sound3::after {
  content: "";
  background-image: url(http://svgshare.com/i/3xS.svg);
}

/* código nuevo */
.control div.sound3::after {
  background-image: url(http://svgshare.com/i/3uH.svg);
}


.control div.muted::after {
  content: "";
  background-image: url(http://svgshare.com/i/3v_.svg);
}

.control div.btnFS {
  float: right;
}

.control div.btnFS::after {
  content: "";
  background-image: url(http://svgshare.com/i/3wo.svg);
}


/* PROGRESS BAR CSS */


/* Progress bar */

.progress {
  width: 85%;
  height: 10px;
  position: relative;
  float: left;
  cursor: pointer;
}

.progress span {
  height: 40%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

.timeBar {
  z-index: 10;
  width: 0;
  background: #2EB3D0;
}

.bufferBar {
  z-index: 5;
  width: 0;
  background: #ddd;
}


/* time and duration */

.time {
  float: right;
  text-align: center;
  font-size: 11px;
  line-height: 12px;
}


/* VOLUME BAR CSS */


/* volume bar */

.volume {
  position: relative;
  cursor: pointer;
  width: 70px;
  height: 10px;
  top: 50%;
  transform: translate(0, -50%);
}

.volumeBar {
  display: block;
  height: 40%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #eee;
  z-index: 10;
}


/* OTHERS CSS */


/* video screen cover */

.loading,
#init {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(loading.gif) no-repeat 50% 50%;
  z-index: 2;
  display: none;
}

#init {
  background: url(bigplay.png) no-repeat 50% 50% !important;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Content -->
<section id="wrapper">

  <div class="videoContainer">

    <video id="myVideo" controls preload="auto" poster="https://i.ytimg.com/vi/x676X3ak3wo/maxresdefault.jpg" width="600" height="350">
	  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
	  <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />
	  <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />
	  <p>Your browser does not support the video tag.</p>
	</video>
    <div class="caption">This is HTML5 video with custom controls</div>
    <div class="control">

      <div class="btmControl">
        <div class="btnPlay btn" title="Play/Pause video"></div>
        <!--<div class="btnStop btn" title="Stop video"></div>-->
        <div class="spdText btn"><span id="current-speed">x1</span>
          <ul class="speed">
            <li class="speed-title">Speed</li>
            <li data-speed="3" class="btn-speed btnx3">x3</li>
            <li data-speed="2" class="btn-speed btnx2">x2</li>
            <li data-speed="1" class="btn-speed btnx1 selected">x1</li>
          </ul>
        </div>

        <!--<div class="btnx1 btn text selected" title="Normal speed">x1</div>
			<div class="btnx3 btn text" title="Fast forward x3">x3</div>-->

        <div class="topControl">
          <div class="progress">
            <span class="bufferBar"></span>
            <span class="timeBar"></span>
          </div>
          <div class="time">
            <span class="current"></span> /
            <span class="duration"></span>
          </div>
        </div>

        
        <!--<div class="btnLight lighton btn" title="Turn on/off light"></div>-->
        <div class="sound sound2 btn" title="Mute/Unmute sound"></div>
        <div class="volume" title="Set volume">
          <span class="volumeBar"></span>
        </div>
        
        <div class="btnFS btn" title="Switch to full screen"></div>
      </div>

    </div>
    <div class="loading"></div>
  </div>
</section>

Buenas acomode el css para que se vea todo mucho mejor y ordenado saludos espero que te ayude y sea lo que buscas

aqui el codepen por si quieres editar o verlo mejor

Codepen

$(document).ready(function() {
  //INITIALIZE
  var video = $('#myVideo');

  //remove default control when JS loaded
  video[0].removeAttribute("controls");
  $('.control').show().css({
    'bottom': -45
  });
  $('.loading').fadeIn(500);
  $('.caption').fadeIn(500);

  //before everything get started
  video.on('loadedmetadata', function() {
    $('.caption').animate({
      'top': -45
    }, 300);

    //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')
      .append('<div id="init"></div>')
      .hover(function() {
        $('.control').stop().animate({
          'bottom': 0
        }, 500);
        $('.caption').stop().animate({
          'top': 0
        }, 500);
      }, function() {
        if (!volumeDrag && !timeDrag) {
          $('.control').stop().animate({
            'bottom': -45
          }, 500);
          $('.caption').stop().animate({
            'top': -45
          }, 500);
        }
      })
      .on('click', function() {
        $('#init').remove();
        $('.btnPlay').addClass('paused');
        $(this).unbind('click');
        video[0].play();
      });
    $('#init').fadeIn(200);
  });

  //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');
      video[0].play();
    } else {
      $('.btnPlay').removeClass('paused');
      video[0].pause();
    }
  };

  //speed text clicked
  $('.btn-speed').on('click', function() {
    spd = $(this).data("speed");
    $('.speed .selected').removeClass('selected');
    $(this).addClass('selected');
    video[0].playbackRate = spd;
    video[0].play();
    $("#current-speed").text("x" + spd);
  });

  //stop button clicked
  $('.btnStop').on('click', function() {
    $('.btnPlay').removeClass('paused');
    updatebar($('.progress').offset().left);
    video[0].pause();
  });

  //fullscreen button clicked
  $('.btnFS').on('click', function() {
    // si estamos en modo de pantalla completa
    if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
      // salimos del modo de pantalla completa
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    } else {
      // si no, entramos en modo pantalla completa
      element = $('#wrapper').get(0);
      if (element.requestFullScreen) {
        element.requestFullScreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      } 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, sound3').addClass('muted');
        } else if (video[0].volume > 0.66) {
          $('.sound').removeClass('muted, sound3').addClass('sound2');
        } else if (video[0].volume > 0.33) {
          $('.sound').removeClass('muted, sound2').addClass('sound3');
        } else {
          $('.sound').removeClass('muted, sound2, sound3');
        }

  };

  //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;
  };
});
/** CODIGO NUEVO *****************/

.speed li {
  position: relative;
}

.speed li.selected::after {
  content: "·";
  color: #00ffff;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
  font-size: 36px;
}

:-webkit-full-screen .control div.btnFS::after {
  background-image: url(http://svgshare.com/i/41D.svg);
}

:-moz-full-screen .control div.btnFS::after {
  background-image: url(http://svgshare.com/i/3ue.svg);
}

:-ms-fullscreen .control div.btnFS::after {
  background-image: url(http://svgshare.com/i/3ue.svg);
}

:fullscreen .control div.btnFS::after {
  background-image: url(http://svgshare.com/i/3ue.svg);
}

/* hay algo más de código nuevo abajo junto a .sound2 */

/** CODIGO ORIGINAL **************/


/* video container */

.videoContainer {
  width: 600px;
  height: 350px;
  position: relative;
  overflow: hidden;
  background: #000;
  color: #ccc;
}


/* video caption css */

.caption {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  color: #ccc;
  font-size: 20px;
  font-weight: bold;
  box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background: #1F1F1F;
  /* fallback */
  background: -moz-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%);
  background: -webkit-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%);
  background: -o-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%);
}


/*** VIDEO CONTROLS CSS ***/


/* control holder */

.control {
  background: rgba(0, 0, 0, .7);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45px;
  /*height: 13%;*/
  z-index: 5;
  display: block;
}


/* control top part */

.topControl {
  flex: 1;
  display:flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  psoition:relative;
  padding-left: 10px;
  padding-right: 10px;
}


/* control bottom part */

.btmControl {
  height: 100%;
  clear: both;
  background: #1F1F1F;
  /* fallback */
  background: -moz-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%);
  background: -webkit-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%);
  background: -o-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%);
  display: flex;
}

.control .btn {
  width: 20px;
  height: auto;
  padding: 13px;
  cursor: pointer;
  position: relative;
  display:flex;
  align-items: center;
  justify-content: center;
}

.control .btn::after {
  width: 90%;
  height: 90%;
  margin:5%;
  display: block;
  background-size: 100% 100%;
  position: relative;
  background-position: center center;
  
}

.control div.btnPlay::after {
  content: "";
  background-image: url(http://svgshare.com/i/41B.svg);
}


/*
.control div.paused{
}
*/

.control div.paused::after {
  content: "";
  background-image: url(http://svgshare.com/i/42D.svg);
}

.control div.spdText {
  width: 1em;
  height: 5px;
  line-height: 1.5em;
  position: relative;
  font-size: .8em;
  border-radius: 5%;
  color: #29303b;
  background-color: hsla(0, 0%, 100%, .9);
  top: 50%;
    transform: translate(0, -50%);
    margin-right: 10px;
    font-family: arial;
}

.speed {
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  max-height: 0;
  transition: max-height 1s;
}

.speed-title {
  text-align: left;
  text-transform: none;
  padding: 5px 20px 5px 15px;
  color: #fff;
  font-weight: 700;
  font-size: 1em;
  margin: 0;
  line-height: 1.2;
  font-weight: normal;
  background: rgba(0, 0, 0, 0.29)
}

.speed li {
  padding: 6px;
}
.speed .btn-speed{
  transition: all .3s ease;
}
.speed .btn-speed:hover {
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  box-shadow: none;
}

.spdText:hover .speed {
  font-family: arial;
  text-align: center;
  display: block;
  list-style: none;
  max-height: 300px;
  transition: max-height 1s;
  left: 0pxpx;
  background-color: rgba(0, 0, 0,.4);
  color: white;
  top: 0px;
  transform: translate(0,-100%);
  border-radius: 4px;
}

.control div.selected {
  font-size: 15px;
  color: #ccc;
}
.control div.sound {
  padding:8px !important;
  width:25px;
}
.control div.sound:before {
  content:"";
  width:20px;
  height:20px;
  display:block;
  position:absolute;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
    top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.control div.sound::after {
  content: "";
  background-image: url(http://svgshare.com/i/425.svg);
  
}

/* código nuevo */
.control div.sound3::after{
    content: "";
  background-image: url(http://svgshare.com/i/41u.svg);
  
  
}
/* .control div.sound3::after {
  content: "";
  background-image: url(http://svgshare.com/i/42Q.svg);
} */

/* código nuevo */
.control div.sound2::after {
  background-image: url(http://svgshare.com/i/40h.svg);
 
  
}


.control div.muted::after {
  content: "";
  background-image: url(http://svgshare.com/i/41i.svg);

}

.control div.btnFS {
  float: right;
}

.control div.btnFS::after {
  content: "";
  background-image: url(http://svgshare.com/i/41C.svg);
}


/* PROGRESS BAR CSS */


/* Progress bar */

.progress {
  width: 85%;
  height: 4px;
  position: relative;
  float: left;
  cursor: pointer;
  border-radius:5px;
}

.progress span {
  height: 100%;
    border-radius:5px;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

.timeBar {
  z-index: 10;
  width: 0;
  background: #2EB3D0;
}

.bufferBar {
  z-index: 5;
  width: 0;
  background: #ddd;
}


/* time and duration */

.time {
  float: right;
  text-align: center;
  font-size: 11px;
  line-height: 12px;
  width:100px;
}


/* VOLUME BAR CSS */


/* volume bar */

.volume {
  position: relative;
  cursor: pointer;
  width: 60px;
  height: 4px;
  top: 50%;
  transform: translate(0, -50%);
  background:rgba(255, 255, 255,.2)
}

.volumeBar {
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #eee;
  z-index: 10;
}


/* OTHERS CSS */


/* video screen cover */

.loading,
#init {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(loading.gif) no-repeat 50% 50%;
  z-index: 2;
  display: none;
}

#init {
  background: url(bigplay.png) no-repeat 50% 50% !important;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Content -->
<section id="wrapper">

  <div class="videoContainer">

    <video id="myVideo" controls preload="auto" poster="https://i.ytimg.com/vi/x676X3ak3wo/maxresdefault.jpg" width="600" height="350">
	  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
	  <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />
	  <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />
	  <p>Your browser does not support the video tag.</p>
	</video>
    <div class="caption">This is HTML5 video with custom controls</div>
    <div class="control">

      <div class="btmControl">
        <div class="btnPlay btn" title="Play/Pause video"></div>
        <!--<div class="btnStop btn" title="Stop video"></div>-->
        <div class="spdText btn"><span id="current-speed">x1</span>
          <ul class="speed">
            <li class="speed-title">Speed</li>
            <li data-speed="3" class="btn-speed btnx3">x3</li>
            <li data-speed="2" class="btn-speed btnx2">x2</li>
            <li data-speed="1" class="btn-speed btnx1 selected">x1</li>
          </ul>
        </div>

        <!--<div class="btnx1 btn text selected" title="Normal speed">x1</div>
			<div class="btnx3 btn text" title="Fast forward x3">x3</div>-->

        <div class="topControl">
          <div class="progress">
            <span class="bufferBar"></span>
            <span class="timeBar"></span>
          </div>
          <div class="time">
            <span class="current"></span> /
            <span class="duration"></span>
          </div>
        </div>

        
        <!--<div class="btnLight lighton btn" title="Turn on/off light"></div>-->
        <div class="sound sound2 btn" title="Mute/Unmute sound"></div>
        <div class="volume" title="Set volume">
          <span class="volumeBar"></span>
        </div>
        
        <div class="btnFS btn" title="Switch to full screen"></div>
      </div>

    </div>
    <div class="loading"></div>
  </div>
</section>

Fuente

Related Posts:

¿Cómo obtener la respuesta de una llamada asíncrona (AJAX) fuera de ella? – javascript jquery asincrónico
Pregunta: Actualmente tengo esta función: function devuelveButaca(posicion){ var array = posicion.split('_'); var row = array; var column ...
Como poner una imagen de fondo a pantalla completa – javascript jquery html5
Pregunta: Como puedo hacer que la imagen abarque todo el tamaño de la pantalla. Se que de las propiedad min-width y min-heigth pero ellas no ...
Error de: Uncaught TypeError: url.indexOf is not a function por Jquery – javascript jquery
Pregunta: En el navegador, reviso en inspeccionar elemento, y me sale el siguiente error: Uncaught TypeError: url.indexOf is not a function Me imagino que es ...
Actualizar información con ajax php mysql – php jquery mysql
Pregunta: Tengo esta simple consulta que lo que simplemente me muestra las visitas de la web, pero quisiera que fuera automático con ajax ya que ...
Como validar array checkbox – javascript php jquery
Pregunta: Que tal buen dia, alguien me podria decir como se puede hacer para que cuando presione el boton "BAJAR DATOS" si este esta vacio ...
Como cambiar una propiedad html dependiendo del valor de un perfil recogido de clase java – javascript jquery html
Pregunta: Tengo una caja de texto en la que me gustaría poder escribir o no dependiendo del perfil que utilice la aplicación. Esta caja de ...
Copiar valor a un input que esta dentro de un footer de un datatable – javascript jquery datatables
Pregunta: Estoy usando los DataTables de jQuery y me estoy encontrando con el siguiente problema: cuando pulso en un botón necesito pasarle un valor con ...
¿Cómo rellenar cada circulo al pasar el mouse encima? – javascript jquery html
Pregunta: ¡Hola! Estoy practicando jQuery, y me gustaría poder hacer como un ranking. A lo que quiero llegar es que cada vez que el mouse ...
Ayuda con Javascript & HTML – javascript jquery
Pregunta: Esta pregunta ya tiene una respuesta aquí: ...
Resultado: [object], [object] al importar un archivo JSON – javascript jquery json
Pregunta: Tengo un problema para obtener datos de un archivo JSON, cuándo intento obtener los datos de este archivo, obtengo como resultado: , { ...
Jquery dataTables con Combobox de filtro – jquery datatables
Pregunta: Estoy usando jquery dataTables y quiero agregar un combo de filtrado para un campo especifico en la ubicación a continuacion de "Search"...es posible esto?. ...
insertar automáticamente un caracter mientras escribo en un input – jquery html
Pregunta: Necesito insertar el caracter ":" mientras estoy escribiendo números en un input tipo texto, el ":" debe insertarse automáticamente cuando haya escrito dos números, ...
Estilar un pseudoelemento ::after con jQuery – javascript jquery html
Pregunta: ¿Cómo seleccionar desde jQuery un elemento de este estilo? .page-container .single-page:nth-of-type(2)::after { } La idea es poder modificar ciertas reglas CSS desde JavaScript. ...
jQuery ajax enviando vía GET configurando envío por POST – jquery
Pregunta: Estoy tratando de enviar un formulario por ajax mediante POST desde un sitio (todo local) a otro, pero estoy viendo desde la consola de ...
Buscar una propiedad de un objeto por su valor, y a su vez recoger otros delmismo. Javascript – javascript jquery
Pregunta: tengo una consulta. Partiendo de la función y el objeto que veis, tengo una aplicación que lanzará un estado (una cadena de caracteres) que ...
Tags:,

2 Comments

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *