forked from YoanMalaver/Platzi-media-player
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (128 loc) · 5.68 KB
/
index.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
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<html>
<head>
<title>PlatziMediaPlayer.js</title>
<link
rel="stylesheet"
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
/>
<link rel="stylesheet" href="./assets/index.css" />
</head>
<body>
<header>
<h1>PlatziMediaPlayer.js</h1>
<p>An extensible media player.</p>
</header>
<main class="container">
<video class="movie">
<source src="./assets/ejercicio.mp4" />
</video>
<button>Play/Pause</button>
<button class="buttonMute">Mute/Unmute</button>
</main>
<section class="Comments">
<h2>Intersection Observer API</h2>
<p>
La API Observador de Intersección, provee una vía para, de forma asíncrona,
observar cambios en la intersección de un elemento con un elemento ancestro o con
el viewport del documento de nivel superior. La información sobre intersección es
necesaria por muchas razones, tales como: Lazy-loading de imágenes u otro
contenido a medida que la página se desplaza. Implementación de “scroll infinito”
de sitios web, donde más y más contenido se carga y muestra a medida que usted
hace scroll, de forma que el usuario no tiene que pasar páginas. Informes de
visualizaciones de anuncios para calcular ingresos por publicidad. Decidir si
deben realizarse tareas o procesos de animación basados en si el usuario verá o no
el resultado.
</p>
<h2>Creando un intersection observer</h2>
<p>
Crear el intersection observer llamando a su constructor y pasándole una función
callback para que se ejecute cuando un nivel (threshold) sea cruzado en una u otra
dirección:
</p>
<p>
var options = { <br />
root: document.querySelector('#scrollArea'), <br />
rootMargin: '0px',<br />
threshold: 1.0 <br />
} <br />
var observer = new IntersectionObserver(callback, options);<br />
</p>
<p>
Un threshold de 1.0 significa que cuando el 100% del elemento target está visible
dentro del elemento especificado por la opción root, la función callback es
invocada.
</p>
<h2>Opciones de Intersection observer</h2>
<p>
El objeto options pasado al constructor IntersectionObserver() le deja controlar
las circunstancias bajo las cuales la función callback del observer es invocada.
Tiene los siguientes campos:
</p>
<p>
root<br />
El elemento que es usado como viewport para comprobar la visibilidad de elemento
target. Debe ser un elemento ascendiente del target. Por defecto se toma el
viewport del navegador si no se especifica o si se especifica como null.
</p>
<p>
rootMargin<br />
Margen alrededor del elemeto root. Puede tener valores similares a los de CSS
margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). Los
valores pueden ser porcentajes. Este conjunto de valores sirve para aumentar o
encoger cada lado del cuadro delimitador del elemento root antes de calcular las
intersecciones. Por defecto son todos cero.
</p>
<p>
threshold<br />
Es un número o un array de números que indican a que porcentaje de visibilidad del
elemento target, la función callback del observer debería ser ejecutada. Si usted
quiere que se detecte cuando la visibilidad pasa la marca del 50%, debería usar un
valor de 0.5. Si quiere ejecutar la función callback cada vez que la visibilidad
pase otro 25%, usted debería especificar el array [0, 0.25, 0.5, 0.75, 1]. El
valor por defecto es 0 (lo que significa que tan pronto como un píxel sea visible,
la función callback será ejecutada). Un valor de 1.0 significa que el umbral no se
considera pasado hasta que todos los pixels son visibles.
</p>
<h2>Determinando un elemento para ser observado</h2>
<p>
Una vez usted ha creado el observer, necesita darle un elemento target para
observar:
</p>
<p>
var target = document.querySelector('#listItem');<br />
observer.observe(target);
</p>
<p>
Cuando el elemento target encuentra un threshold especificado por el
IntersectionObserver, la función callback es invocada. La función callback recibe
una lista de objetos IntersectionObserverEntry y el observer:
</p>
<p>
var callback = function(entries, observer) { <br />
entries.forEach(entry => {<br />
// Cada entry describe un cambio en la intersección para<br />
// un elemento observado<br />
// entry.boundingClientRect<br />
// entry.intersectionRatio<br />
// entry.intersectionRect<br />
// entry.isIntersecting<br />
// entry.rootBounds<br />
// entry.target<br />
// entry.time<br />
});<br />
};<br />
</p>
<p>
Asegúrese de que su función callback se ejecute sobre el hilo principal. Debería
operar tan rápidamente como sea posible; si alguna cosa necesita tiempo extra para
ser realizada, use Window.requestIdleCallback().
</p>
<p>
También, note que si especifica la opción root, el elemento target debe ser un
descendiente del elemento root.
</p>
<h3>Info de <a href="https://platzi.com/comentario/734415/">Link Aquí</a></h3>
</section>
<script type="module" src="/assets/index.ts"></script>
</body>
</html>