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 ?
Gracias por el tutorial . es bueno salir de las dudas con las preguntas y respuestas. Saludos
excelente publicación, gracias por proporcionarnos esta información, mi hermano menor la necesitaba para culminar un trabajo, así que fue de mucha utilidad.
Es posible agregar a una página web de wordpress una barra con distintas miniaturas y que al pasar el cursor por encima me muestre un clip corto como lo hace Netflix, Cuevana, Pelis 24, etc?