¿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

Tags:,

2 Comments

Add a Comment

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