tarea-jQuery-controlesDeVideo/index_sol.html at master · codeismo/tarea-jQuery-controlesDeVideo · GitHub

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
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>
<html>
	<head>
		<title>Tarea 4</title>
		<link rel="stylesheet" href="estilos.css"/>
		<style>
			.sombras {
				/*sombras*/
				-webkit-box-shadow: 0px 0px 5px 3px #333;
				-moz-box-shadow: 0px 0px 5px 3px #333;
				-o-box-shadow: 0px 0px 5px 3px #333;
				box-shadow: 0px 0px 5px 3px white;
			}
		</style>
		<script src="javascript/jquery-1.10.2.min.js"></script>
		<script>
			$(function(){
			    //obtengo el botón de reproducir, el boton de pausa, el video, la caja del video y de estado del video
			    var reproducir = $("#boton-reproducir");
			    var pausar = $("#boton-pausa");
			    var elVideo = $("video")[0];
			    var cajaVideo = $("#video");
			    var estadoVideo = $("#estado-video");

			    //escucho el click en el boton de reproducir
			    reproducir.click(function(){
			        //se da play al video
                    elVideo.play();
                    //se agragan sombras a la caj del video
                    cajaVideo.addClass("sombras");
                    //cambio el estado del video
                    estadoVideo.html("Video Activo");
			    });

                //escucho el click en el boton de pausa
                pausar.click(function(){
                    //se pausa el video
                    elVideo.pause();
                    //se remueven sombras a la cajs del video
                    cajaVideo.removeClass("sombras");
                    //cambio el estado del video
                    estadoVideo.html("Video Pausado");
                });
			});
		</script>
	</head>
	<body>

		<div id="contenedor">

			<video id="video">
				<source src="videos/gato.mp4" type="video/mp4" />
				<source src="videos/gato.ogg" type="video/ogg" />
				<source src="videos/gato.webm" type="video/webm" />
				Tu navegador no soporta video nativo
			</video>

			<p id="estado-video" >
				Video inactivo
			</p>

			<p id="controles">
				<a id="boton-reproducir">Reproducir</a>
				<a id="boton-pausa">Pausa</a>
			</p>

		</div>
	</body>
</html>