[Solucionado] Insertar un reproductor de video o musica

**duejuako** · 01/11/2011, 12:18

Iniciado por alam

ola yo encontre una pagina donde puedes hacer un reproductor de video o de musica
es esta www.mixpod.com

Y el código que te da lo puedes poner en la plantilla html? funciona en la web? Gracias y un saludo.

**Alaja** · 16/12/2013, 11:36

Hola,jorgens.
Me gustaría saber como puedo colocar,varios vídeos,en una página web.Con un reproductor diseñado por mí.El código que he colocado es este:
<head>
<link href="Reproductor_de_video_HTML5_personalizado.css " rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>

$(document).ready(function () {
$('video').bind('timeupdate',function(){

var tiempoActual = video.currentTime;
var tiempoTotal= video.duration;
var porcentaje = tiempoActual/tiempoTotal*140;
$('#tiempoActual').html(Math.floor(tiempoActual)/100);
$('#tiempoTotal').html(Math.floor(tiempoTotal)/100);
$('#progreso').width(porcentaje);
});
var video = $('video')[0]
var video = $('video')[1]
var video = $('video')[2]

$('#play').click(function(){

video.play();

/*Esto "$('video')[0].play();" lo sustituimos por:
(var video =$('video') [0]) y así poder poner solo "video.play"*/

});

$('#stop').click(function(){
video.pause();
video.currentTime= -1;
});
$('#forward').click(function(){
video.currentTime += 1.3;
});
$('#rewind').click(function(){
video.currentTime -= 1.3;
});

});
</script>
</head>
<html>
<div id="reproductorMarco">
<video width="720" height="340" poster="../imagenes/IMG_2039.JPG" loop controls preload>
<source src="../videos/Diseña_tu_propio_reproductor_parte1.mp4" type="video/mp4" />
<source src="../videos/Diseña_tu_propio_reproductor_parte1.ogv" type="video/ogv" />
<source src="../videos/Diseña_tu_propio_reproductor_parte1.webm" type="video/webm" />

Tu explorador no soporta video
</video>

<div id="controlesMarco">
<img id="rewind" src="../imagenes/rewind.png" alt="Retroceder"height="20"/>
<img id="play" src="../imagenes/play.png" alt="REtroceder"height="20"/>
<img id="stop" src="../imagenes/stop.png" alt="REtroceder"height="20"/>
<img id="forward" src="../imagenes/forward.png" alt="REtroceder"height="20"/>
<span id="tiempoActual">0:00</span> | <span id="tiempoTotal">0:00</span>
<div id="progresoCont">
<div id="progreso"></div>
</div>
</div>
</div>
</html>
Me falta saber,cómo poner más vídeos ?

**Alaja** · 24/12/2013, 05:16

Iniciado por duejuako

Y el código que te da lo puedes poner en la plantilla html? funciona en la web? Gracias y un saludo.

Gracias,duejuako por tu contestación.

**nelsonmauricio** · 23/07/2017, 23:40

Gracias por el tutorial . es bueno salir de las dudas con las preguntas y respuestas. Saludos

**oscar26** · 04/05/2018, 20:16

excelente publicación, gracias por proporcionarnos esta información, mi hermano menor la necesitaba para culminar un trabajo, así que fue de mucha utilidad.