Reproductor de video con HTML5, CSS y Javascrip
Publicado por Vladimir (6 intervenciones) el 10/12/2018 02:47:17
Hola buenas noches, como dice el titulo, estoy trabajando en un pequeño desarrollo que es crear un basico reproductor de vídeos, pero no lo he logrado hacer reproducir, les comparto el codigo y espero me puedan a orientar para saber en que fallo, el error que me da es simple, le doy click al boton reproducir y no reproduce :-( la ruta del video esta hardcodeada, este desarrollo es parte de una practica de un manual, pues estoy aprendiendo:
Codigo HTML:
video.html
codigo css:
reproductor.css
codigo javascrip:
reproductor.js
Bueno espero me logren a concretar este pequeño desarrollo, Gracias.
Codigo HTML:
video.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de video</title>
<link rel="stylesheet" href="reproductor.css">
<script src="reproductor.js"></script>
</head>
<body>
<section id="reproductor">
<video id="medio" width="720" height="400">
<source src="http://www.formasterminds.com/content/trailer.mp4">
<source src="http://www.formasterminds.com/content/trailer.ogg">
</video>
<nav>
<div id="botones">
<button type="button" id="reproducir">Reproducir</button>
</div>
<div id="barra">
<div id="progreso"></div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>
codigo css:
reproductor.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
body{text-align: center;
}header, section,footer, aside, nav, article, figure, figcaption, hgroup{
display : block;}#reproductor{
width: 720px;margin: 20px auto;padding: 5px;background: #999999;
border: 1px solid #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}nav{ margin: 5px 0px;}#botones{
float: left; width: 100px; height: 20px;}#barra{
position: relative; float: left; width: 600px; height: 16px; padding: 2px;border: 1px solid #cccccc;
background: #EEEEEE;
}#progreso{
position: absolute; width: 0px; height: 16px;background: rgba(0,0,150,.2);
}codigo javascrip:
reproductor.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
function iniciar() {
maximo=600;medio=document.getElementById('medio');
reproducir=document.getElementById('reproducir');
barra=document.getElementById('barra');
progreso=document.getElementById('progreso');
reproducir.addEventListener('click',presionar,false);
barra.addEventListener('click',mover,false)
}function presionar() {
if (!medio.paused && !medio.ended){
medio.pause();
reproducir.innerHTML='reproducir';
window.clearInterval(bucle);
}else{
medio.play();
reproducir.innerHTML='Pausa'
bucle=setInterval(estado,1000)
}}function estado(){
if (!medio.ended){
var total=parseInt(medio.currentTime*maximo/medio.duration);
progreso.style.width=total+'px';
}else
{progreso.style.width='0px';
reproducir.innerHTML="Reproducir";
window.clearInterval(bucle);
}}function mover(e){
if(!medio.paused && !medio.ended){
var ratonX=e.pageX-barra.offsetLeft;
var nuevoTiempo=ratonX*medio.duration/maximo;
medio.currentTime=nuevoTiempo;
progreso.style.width=ratonX+'px';
}}Bueno espero me logren a concretar este pequeño desarrollo, Gracias.
Valora esta pregunta
0
