Commentaire: HTML5 fournit de nouvelles balises vidéo, qui peuvent lire directement la vidéo sans programmation. Il vous suffit d'écrire quelques lignes de code simple pour personnaliser le lecteur.
Page Web HTML<body>
<segction>
<video>
<source src = "vidéos / introduction.mp4">
</ vidéo>
<Nav>
<div>
<Button Type = "Button"> Play </ Button>
</div>
<div>
<div> </div>
</div>
<div> </div>
</ nav>
</ section>
</docy>
style CSS
corps{
Texte-aligne: Centre;
}
en-tête, section, pied de page, à part, navigation, article, hgroup {
Affichage: bloc;
}
#peau{
Largeur: 700px;
marge: 10px automatique;
rembourrage: 5px;
Contexte: rouge;
Border: 4px noir solide;
Border-Radius: 20px;
}
nav {
marge: 5px 0px;
}
#boutons{
flottant: à gauche;
Largeur: 70px;
Hauteur: 22px;
}
#defaultbar {
Position: relative;
flottant: à gauche;
Largeur: 600px;
hauteur: 14px;
rembourrage: 4px;
Border: 1px noir solide;
Contexte: jaune;
}
/ * ProgressBar est à l'intérieur de la barre default * /
#ProgressBar {
Position: absolue;
Largeur: 0px; / * Contrôler les modifications avec JavaScript * /
hauteur: 14px; / * et la barre default est de la même hauteur * /
Contexte: bleu;
}
code javascript
fonction dofisrt ()
{
BarSize = 600; // veille à ne pas utiliser les unités PX et n'utilisez pas VAR, c'est une variable globale
myMovie = document.getElementById ('mymovie');
playButton = document.getElementById («PlayButton»);
bar = document.getElementById ('defaultbar');
ProgressBar = document.getElementById ('ProgressBar');
playButton.addeventListener ('click', playorpause, false); // Le troisième paramètre est toujours faux, enregistrez le gestionnaire d'événements pour la phase de bubblering.
bar.addeventListener ('cliquez', cliquez sur Bar, false);
}
// Contrôle la lecture du film et s'arrête
fonction playorpause () {
if (! MyMovie.paused &&! MyMovie.ended) {
mymovie.pause ();
playbutton.innerhtml = 'play';
Window.ClearInterval (UpdatedBar);
}autre{
mymovie.play ();
playbutton.innerhtml = «pause»;
UpdatedBar = setInterval (mise à jour, 500);
}
}
// contrôle l'affichage dynamique de la barre de progrès
Function Update () {
if (! myMovie.ended) {
var size = paSeInt (myMovie.CurrentTime * BarSize / MyMovie.Duration);
ProgressBar.Style.Width = Size + 'PX';
}autre{
ProgressBar.Style.Width = '0px';
playbutton.innerhtml = 'play';
Window.ClearInterval (UpdatedBar);
}
}
// Méthode de contrôle de la barre de progression de la souris
fonction ClickBar (e) {
if (! MyMovie.paused &&! MyMovie.ended) {
var muousex = e.pagex-bar.offsetleft;
var newtime = Mousex * myMovie.Duration / BarSize; // Nouvelle heure de départ
mymovie.currentTime = newtime;
ProgressBar.Style.Width = Mousex + 'PX';
Window.ClearInterval (UpdatedBar);
}
}
window.addeventListener ('Load', dofisrt, false);
Heureusement, j'ai pris la pièce du code