Question:
Date: 10-12-2015 11:00:06
(In Spanish)
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.
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. Votes: 1 - Answers: 18 - Views: 17 Share on: Google Facebook Twitter LinkedIn Link
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. Votes: 1 - Answers: 18 - Views: 17 Share on: Google Facebook Twitter LinkedIn Link
Answers:
-
-
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: 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 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