Comentario: HTML5 proporciona nuevas etiquetas de video, que pueden reproducir directamente videos sin programación. Solo necesita escribir algunas líneas de código simple para personalizar el reproductor.
Página web html<Body>
<Sección>
<video>
<fuente src = "videos/introduction.mp4">
</video>
<Arr>
<div>
<button type = "botón"> reproducir </boton>
</div>
<div>
<div> </div>
</div>
<div> </div>
</am>
</section>
</body>
estilo CSS
cuerpo{
Text-Align: Center;
}
encabezado, sección, pie de página, aparte, nav, artículo, hgroup {
Pantalla: bloque;
}
#piel{
Ancho: 700px;
Margen: 10px Auto;
relleno: 5px;
Antecedentes: rojo;
borde: 4px negro sólido;
Border-Radius: 20px;
}
Nav {
margen: 5px 0px;
}
#botones{
flotante: izquierda;
Ancho: 70px;
Altura: 22px;
}
#defaultbar {
Posición: relativo;
flotante: izquierda;
Ancho: 600px;
Altura: 14px;
relleno: 4px;
borde: 1px negro sólido;
Antecedentes: amarillo;
}
/*ProgressBar está dentro de DefaultBar*/
#ProgressBar {
Posición: Absoluto;
Ancho: 0px; /*El control cambia con JavaScript*/
Altura: 14px; /* y defaultBar son la misma altura*/
fondo: azul;
}
Código JavaScript
función dofisrt ()
{
barsize = 600; // Tenga cuidado de no usar unidades PX, y no usa VAR, es una variable global
mymovie = document.getElementById ('mymovie');
playButton = document.getElementById ('PlayButton');
bar = document.getElementById ('DefaultBar');
progressbar = document.getElementById ('ProgressBar');
PlayButton.AdDeventListener ('Click', playorPause, falso); // El tercer parámetro siempre es falso, registra el controlador de eventos para la fase de burbujeante.
bar.AdDeventListener ('Haga clic', ClickedBar, falso);
}
// Controle la reproducción de la película y la parada
function playorPause () {
if (! mymovie.paused &&! mymovie.end) {
mymovie.Pause ();
PlayButton.innerhtml = 'Play';
Window.ClearInterval (UpdateatedBar);
}demás{
mymovie.play ();
playbutton.innerhtml = 'pausa';
UpdateatedBar = setInterval (actualización, 500);
}
}
// Controle la pantalla dinámica de la barra de progreso
Function Update () {
if (! mymovie.end) {
Var size = parseInt (mymovie.CurrentTime*Barsize/mymovie.duration);
progressbar.style.width = size+'px';
}demás{
progressbar.style.width = '0px';
PlayButton.innerhtml = 'Play';
Window.ClearInterval (UpdateatedBar);
}
}
// Método de control de la barra de progreso de clic del mouse
Función ClickedBar (E) {
if (! mymovie.paused &&! mymovie.end) {
var mousex = e.pagex-bar.offsetleft;
var newtime = mousex*mymovie.duration/barsize; // Nuevo tiempo de inicio
mymovie.currenttime = newtime;
progressbar.style.width = mousex+'px';
Window.ClearInterval (UpdateatedBar);
}
}
Window.AdDeventListener ('Load', dofisrt, falso);
Menos mal, tomé la parte del código