New question

Question:

Date: 10-12-2015 11:00:06 (In Spanish)

Ayuda con Reproductor [AUDIO/HTML5][Unresolved]

Hola amigos,
Ultimamente me he metido mucho en lo que son las etiquetas de HTML5 de audio/video.
Y estoy haciendo un reproductor de audio para streaming y estoy tratando de hacer un progress bar. pero no he podido si alguien pudiera ayudarme estaria agradecido.

Aquí el js que llevo para controlar el pausa y el play algo sencillo.
$(document).ready(function(){
	$('.boton_player').click(function(){
		if($('#reproductor')[0].paused == false) {
			$('#reproductor')[0].pause();
			$(".boton_player").attr('id','start');
			return false;
		} else {
			$('#reproductor')[0].play();
			$(".boton_player").attr('id','pause');
		}
	});
});

Pero he buscado como hacer el progress bar y no hay info.
Si necesitan mas info pueven ver como es aquí.
Reproductor No rabar idea XD

Gracias.
Tags: CSS - CSS3 - HTML5 - Javascript - JQuery - Progress Bar - Question - Videos - Web Votes: 1 - Answers: 18 - Views: 17 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 10-12-2015 11:57:23 yo tengo esto esta incompleto aun
    Video
      Votes: 1 - Link answer
     
  • Date: 10-12-2015 12:44:14 Hola
    Que bn pero lo que pasa es que no entiendo como ponerlo.
    Y lo que mas me preocupa es porque es Streaming en vivo.
      Votes: 1 - Link answer
     
  • Date: 11-12-2015 01:57:40 Edinson digame que no entiende realmente es muy facil lo que pide hacer n.n, veamos usted quiere una barra de progreso algo asi como you tube o casi cualquier reproductor que vemos en la web, normalmente, veamos primero que nada definimos las variables algo asi le pondre todo el codigo javascript y ahi en los comentarios del codigo voy explicando:

    <script type="text/javascript">
    // variables listas
         window.addEventListener("load", function() {
         player_html5 = document.getElementById("player_html5");
          max = 400;
          play = document.getElementById("play");
          progressbar = document.getElementById("progressbar");
          progreso = document.getElementById("progreso");
          seekslider = document.getElementById("seekslider");
    
          progressbar.addEventListener("click", mover, true);
    
    // function que activara el play y el pause pero tambien la cuenta de progreso del audio o video n.n
    play.addEventListener("click",function() {
    if(!player_html5.paused && !player_html5.ended) {
    player_html5.pause();
    play.innerHTML = 'Play';
    window.clearInterval(bucle);
    } else {
    player_html5.play();
    play.innerHTML = 'Pause';
    bucle=setInterval(status, 1000);
    }
    });
    
    // estado del progreso
    function status() {
    if(!player_html5.ended) {
         var total=parseInt(player_html5.currentTime*max/player_html5.duration);
         progreso.style.width=total+'px';
    } else {
       progreso.style.width = '0px';
       play.innerHTML = ("Play");
       window.clearInterval(bucle);
     }
    }
    
    // function que movera la barra de progreso al click dado mientras que este este en play (esto puede ser cambiado)
    function mover(e) {
       if(!player_html5.paused && !player_html5.ended) {
            var ratonX=e.pageX-progressbar.offsetLeft;
            var nuevoTiempo=ratonX*player_html5.duration/max;
            player_html5.currentTime=nuevoTiempo;
            progreso.style.width=ratonX+'px';
     }
    }
    
    // xD ya no me acuerdo para que era esto creo que para el tiempo del progreso o.O o algo asi
    function vidSeek() {
    if(seekslider != seekslider && !player_html5.ended) {
    	var seekto = player_html5.duration * (seekslider.value / 100);
    	player_html5.currentTime = seekto;
    value.style.width= '0px';
    } else {
       play.innerHTML = ("Play");
     }
    }
    });
    


    aqui le dejo el codigo completo:

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Video Progress Bar</title>
    	<style type="text/css">
         #progressbar {
         	position: relative;
         	width: 400px;
         	height: 8px;
         	padding: 2px;
         	background: #EEEEEE;
         	border: solid 1px #CCCCCC;
         	margin-top: -45px;
         	clear: both;
         	z-index: 99999;
         	max-width: 100%;
         }
    
      #progreso {
       position: absolute;
       width: 0px;
       height: 8px;
       background: rgb(0,0,255);
        }
    
      #progressbar:hover {
      cursor: pointer;
       }
    
    #progreso:hover {
    cursor: pointer;
    }
    </style>
    
    	<script type="text/javascript">
         window.addEventListener("load", function() {
         player_html5 = document.getElementById("player_html5");
          max = 400;
          play = document.getElementById("play");
          progressbar = document.getElementById("progressbar");
          progreso = document.getElementById("progreso");
          seekslider = document.getElementById("seekslider");
    
          progressbar.addEventListener("click", mover, true);
    
    play.addEventListener("click",function() {
    if(!player_html5.paused && !player_html5.ended) {
    player_html5.pause();
    play.innerHTML = 'Play';
    window.clearInterval(bucle);
    } else {
    player_html5.play();
    play.innerHTML = 'Pause';
    bucle=setInterval(status, 1000);
    }
    });
    
    function status() {
    if(!player_html5.ended) {
         var total=parseInt(player_html5.currentTime*max/player_html5.duration);
         progreso.style.width=total+'px';
    } else {
       progreso.style.width = '0px';
       play.innerHTML = ("Play");
       window.clearInterval(bucle);
     }
    }
    
    function mover(e) {
       if(!player_html5.paused && !player_html5.ended) {
            var ratonX=e.pageX-progressbar.offsetLeft;
            var nuevoTiempo=ratonX*player_html5.duration/max;
            player_html5.currentTime=nuevoTiempo;
            progreso.style.width=ratonX+'px';
     }
    }
    
    function vidSeek() {
    if(seekslider != seekslider && !player_html5.ended) {
    	var seekto = player_html5.duration * (seekslider.value / 100);
    	player_html5.currentTime = seekto;
    value.style.width= '0px';
    } else {
       play.innerHTML = ("Play");
     }
    }
    });
    </script>
    </head>
    <body>
    	<audio id="player_html5" width="640" height="480">
    	<source src="http://youanimeoficial.ddns.net/valentine.mp3" type="audio/mp3" />
    	</audio>
    	<br />
    	<br />
    	<div id="progressbar"><div id="progreso"></div></div>
    	<br />
    	<button id="play">Play</button>
    </body>
    </html>
    


    he disculpe por no ponerle el tiempo n.n que se como ponerle pero solo le doy este ejemplo para que entienda como hacer un progreso con su respectiva barra de lo transcurido del video o la cancion, ^^
    tambien disculpe que el css este horrible xD, solo es el ejemplo si necesita mas ayuda o no entiende algo digame, espero a verlo ayudado :)

    aqui le dejo el resultado:

    Audio/Video Progress Bar

    Saludos.
      Votes: 3 - Link answer
     
  • Date: 11-12-2015 03:36:17 Hola
    Gracias exacto lo que necesitaba.

    Si no te molesta podrías ayudarme a hacer lo que es el tiempo.
      Votes: 0 - Link answer
     
  • Date: 11-12-2015 12:39:13 Este no hay problema :) solo tenias que hacer algo con el evento timeupdate ejemplo:

    player_html5.addEventListener("timeupdate",timevideo, false);
    
    function timevideo() {
    var curmins = Math.floor(player_html5.currentTime / 60);
                var cursecs = Math.floor(player_html5.currentTime - curmins * 60);
                var durmins = Math.floor(player_html5.duration / 60);
                var dursecs = Math.floor(player_html5.duration - durmins * 60);
      if(cursecs < 10) {
        cursecs = "0"+cursecs;
      }
      if(dursecs < 10) {
        dursecs = "0"+dursecs;
      }
    curtimetext.innerHTML = ("<span class='active'>" + "0" + curmins + ":" + cursecs + "</span>");
    durtimetext.innerHTML = ("<span class='resz'>" + durmins + ":" + dursecs + "</span>");
    }
    


    xD me di cuenta que puse doble if xD en vez de un solo if con || bueno usted ya lo modifica igual el css y lo que guste vuelva a ver la url que le deje para ver el nuevo resultado :')

    Audio/Video Progress Bar

    pd: porfa si ya resolvio su pregunta pongalo en resuelta es que me gusta saber cuales preguntas cuales ya se resolvieron y cuales no, para asi poder ayudar sin revolverme y me alegro a verlo ayudado n.n

    Nuevamente Saludos.
      Votes: 4 - Link answer
     
  • Date: 11-12-2015 13:58:57 Gracias.   Votes: 1 - Link answer
     
  • Date: 12-12-2015 08:24:54 Hola amigo,
    Desde hace rato estoy intentando usar tu código del tiempo pero no me da :(
    adjunto URL.
    Reproductor
      Votes: 0 - Link answer
     
  • Date: 12-12-2015 08:52:18 tutorial youtube   Votes: 1 - Link answer
     
  • Date: 12-12-2015 09:20:59 Gracias lo vere pero no encuentro lo del tiempo.
    Aya me toco buscar a tres videos mas XD.
      Votes: 1 - Link answer
     
  • Date: 12-12-2015 10:00:31 Gracias a los dos ya logre solucionarlo con ambos ejemplos   Votes: 1 - Link answer
     
  • Date: 25-04-2016 19:11:50 Hola amigos,

    Hoy vengo a otra vez a este tema ya que he logrado hacer ya muchas cosas de este pero he estado peliando hace varios meses, me he roto la cabeza buscando como poner mi reproductor HTML5 en pantalla completa, como podría hacerlo sin mostrar los controles del mismo si no los que he creado.

    Saludos
      Votes: 1 - Link answer
     
  • Date: 26-04-2016 12:02:35 Use mejor videojs
    Ejemplo de la libreria
    A mi me ocurrio lo mismo y no le gaste mas tiempo al tema, me decidi por ese "Framework",
    Si no estoy mal informado creo que este es el que usa Youtube en el reproductor
      Votes: 2 - Link answer
     
  • Date: 26-04-2016 12:45:42 Hola,

    Yo he encontrado una manera de hacerlo y he avanzado mucho pero tengo un problema.
    Cuando uno cierra la pantalla completa con la tecla "Esc" no me cambia el bóton ya intente con esto.

    document.addEventListener("keydown", function (e) {
    				if (e.keyCode == 32) {
    					$("#boton_player").click();
    				}
    				if (e.keyCode == 27) {
    					if($('#content-video').fullScreen()){
    						$("#boton_player").click();
    					}
    				}
    			});
    

    Pero no me da :(
    Adjunto la libreria Full.js
    /*
    	ElCapa8
    */
    /**
     * @name        jQuery FullScreen Plugin
     * @author      Martin Angelov, Morten Sjøgren
     * @version     1.2
     * @url         http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
     * @license     MIT License
     */
    
     /*jshint browser: true, jquery: true */
     (function($){
     	"use strict";
    
    	// These helper functions available only to our plugin scope.
    	function supportFullScreen(){
    		var doc = document.documentElement;
    
    		return ('requestFullscreen' in doc) ||
    		('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||
    		('webkitRequestFullScreen' in doc);
    	}
    
    	function requestFullScreen(elem){
    		if (elem.requestFullscreen) {
    			elem.requestFullscreen();
    		} else if (elem.mozRequestFullScreen) {
    			elem.mozRequestFullScreen();
    		} else if (elem.webkitRequestFullScreen) {
    			elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    		}
    	}
    
    	function fullScreenStatus(){
    		return document.fullscreen ||
    		document.mozFullScreen ||
    		document.webkitIsFullScreen ||
    		false;
    	}
    
    	function cancelFullScreen(){
    		if (document.exitFullscreen) {
    			document.exitFullscreen();
    		} else if (document.mozCancelFullScreen) {
    			document.mozCancelFullScreen();
    		} else if (document.webkitCancelFullScreen) {
    			document.webkitCancelFullScreen();
    		}
    	}
    
    	function onFullScreenEvent(callback){
    		$(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function(){
    			// The full screen status is automatically
    			// passed to our callback as an argument.
    			callback(fullScreenStatus());
    		});
    	}
    
    	// Adding a new test to the jQuery support object
    	$.support.fullscreen = supportFullScreen();
    
    	// Creating the plugin
    	$.fn.fullScreen = function(props){
    		if(!$.support.fullscreen || this.length !== 1) {
    			// The plugin can be called only
    			// on one element at a time
    
    			return this;
    		}
    
    		if(fullScreenStatus()){
    			// if we are already in fullscreen, exit
    			cancelFullScreen();
    			return this;
    		}
    
    		// You can potentially pas two arguments a color
    		// for the background and a callback function
    
    		var options = $.extend({
    			'background'      : '#111',
    			'callback'        : $.noop( ),
    			'fullscreenClass' : 'fullScreen'
    		}, props),
    
    		elem = this,
    
    		// This temporary div is the element that is
    		// actually going to be enlarged in full screen
    
    		fs = $('<div>', {
    			'css' : {
    				'overflow-y' : 'auto',
    				'background' : options.background,
    				'width'      : '100%',
    				'height'     : '100%'
    			}
    		})
    		.insertBefore(elem)
    		.append(elem);
    
    		// You can use the .fullScreen class to
    		// apply styling to your element
    		elem.addClass( options.fullscreenClass );
    
    		// Inserting our element in the temporary
    		// div, after which we zoom it in fullscreen
    
    		requestFullScreen(fs.get(0));
    
    		fs.click(function(e){
    			if(e.target == this){
    				// If the black bar was clicked
    				cancelFullScreen();
    			}
    		});
    
    		elem.cancel = function(){
    			cancelFullScreen();
    			return elem;
    		};
    
    		onFullScreenEvent(function(fullScreen){
    			if(!fullScreen){
    				// We have exited full screen.
    			        // Detach event listener
    			        $(document).off( 'fullscreenchange mozfullscreenchange webkitfullscreenchange' );
    				// Remove the class and destroy
    				// the temporary div
    
    				elem.removeClass( options.fullscreenClass ).insertBefore(fs);
    				fs.remove();
    			}
    
    			// Calling the facultative user supplied callback
    			if(options.callback) {
    				options.callback(fullScreen);
    			}
    		});
    
    		return elem;
    	};
    
    	$.fn.cancelFullScreen = function( ) {
    		cancelFullScreen();
    
    		return this;
    	};
    }(jQuery));
    

    Y lo he logrado gracias a esa libreria pero como te digo no se como saber si el estado del video es pausa o play en cualquier momento para que me cambie en bóton, si sabes como hacer para detectar ese cambio te lo agradeceria.

    Y si puedes ayudarme con el control de volumen sería estupendo :D

    Saludos.
    Despúes compartire código fuente :D
    Prueba.
      Votes: 0 - Link answer
     
  • Date: 01-05-2016 08:24:07 Buenas tardes, perdón que me meta en este post pero quisiera saber como has resuelto la captura del video y la emisión vía streaming a algún servidor que brinde este servicio. Estoy mostrando el video pero la emisión la realizo con adobe live encoder y quiero utilizar alguna librería js o node o lo que sea pero no flash (como verán ya estoy un poco desesperado jajajaja). Como has resuelto eso? Como hacés la compresión de video o audio?

    Saludos y gracias
      Votes: 1 - Link answer
     
  • Date: 01-05-2016 09:00:41 Hola amigo,
    Bienvenido, si mira yo use la etiqueta HTML5 de Audio.
    Yo uso lo que es Listen2myradio y él te da una URL en que tenes la radio.
    Fue muy duro ya que tienes que inspeccionar elemento y sacar la URL del streaming.

    Saludos.
      Votes: 0 - Link answer
     
  • Date: 18-11-2016 02:43:54 Hola a todos, estoy haciendo un reproductor para una app que estoy haciendo, y tengo un problemita. el problema es al hacer clic a mi barra de progreso el video no se corre, y utilizo exactamente el e.pageX - progressBar.offsetLeft; y despues pongo mediaPlayer.currentTime=ratonX*player_html5.duration/max;

    pero entonces mi mediaPlayer.currentTime coge valor 0, y no obtengo el resultado esperado.
    Por favor ayuda.
      Votes: 0 - Link answer
     
  • Date: 21-11-2016 19:28:11 Hola amigo,
    Esto podría ayudarte, este lo hice para el volumen pero ya sabrás adecuarlo, Esto suponiendo que es código propio y no estas usando algún script
    var volumeDrag = false;
    $('.slider').on('mousedown', function(e) {
    	volumeDrag = true;
    	video[0].muted = false;
    	$(".volume i").removeClass("qc-volume-off");
    	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 = $('.slider');
    	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
    	$('.knob').css('width',percentage+'%');	
    	video[0].volume = percentage / 100;
    					
    	//change sound icon based on volume
    	if(video[0].volume == 0){
    		$('.volume i').removeClass('qc-volume-up').addClass('qc-volume-off');
    	}
    	else if(video[0].volume > 0.5){
    		$('.volume i').removeClass('qc-volume-off').addClass('qc-volume-up');
    	}
    	else{
    		$('.volume i').removeClass('qc-volume-off').addClass('qc-volume-up');
    	}
    	
    };
    
      Votes: 0 - Link answer
     
  • Date: 30-04-2018 16:48:35 Hola Yosbanis Vicente lo que sucede es que un reproductor en android no es lo mismo que una web al menos que uses el uso del webview qquizas por eso no le funcione

    Saludos.

    pd: si ocupas ayuda no olvides contactarme o escribi aqui para saber que aun lo ocupas.
      Votes: 0 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In