Kommentar: HTML5 bietet neue Video -Tags, die Video ohne Programmierung direkt abspielen können. Sie müssen nur ein paar Zeilen einfacher Code schreiben, um den Player anzupassen.
Webseite HTML<body>
<Abschnitt>
<videos>
<Source Src = "Videos/Einführung.mp4">
</Video>
<nav>
<div>
<button type = "button"> abplay </button>
</div>
<div>
<div> </div>
</div>
<div> </div>
</nav>
</Abschnitt>
</body>
CSS -Stil
Körper{
Text-Align: Mitte;
}
Header, Abschnitt, Fußzeile, beiseite, NAV, Artikel, Hgroup {
Anzeige: Block;
}
#Haut{
Breite: 700px;
Rand: 10px Auto;
Polsterung: 5px;
Hintergrund: Rot;
Grenze: 4px solide Schwarz;
Border-Radius: 20px;
}
nav {
Rand: 5px 0px;
}
#buttons {
float: links;
Breite: 70px;
Höhe: 22px;
}
#DefaultBar {
Position: Relativ;
float: links;
Breite: 600px;
Höhe: 14px;
Polsterung: 4px;
Grenze: 1PX Solid Black;
Hintergrund: Gelb;
}
/*ProgressBar befindet sich in StandardBar*/
#ProgressBar {
Position: absolut;
Breite: 0px; /*Kontrolländerungen mit JavaScript*//
Höhe: 14px; /* und StandardBar sind die gleiche Höhe*/
Hintergrund: Blau;
}
JavaScript -Code
Funktion dofisrt ()
{
barsize = 600; // Achten Sie darauf, keine PX -Einheiten zu verwenden und Var nicht zu verwenden, es ist eine globale Variable
myMovie = document.getElementById ('myMovie');
PlayButton = document.getElementById ('PlayButton');
bar = document.getElementById ('defaultBar');
progresorBar = document.getElementById ('progresorBar');
PlayButton.AdDeVentListener ('Click', PlayorPause, False); // Der dritte Parameter ist immer falsch. Registrieren Sie den Ereignishandler für die Bubbler -Phase.
bar.addeventListener ('click', klickedBar, false);
}
// Filmwiedergabe steuern und stoppen
Function PlayorPause () {
if (! myMovie.pauded &&! myMovie.ended) {
myMovie.pause ();
PlayButton.innerhtml = 'Play';
window.clearInterval (aktualisiertes BAR);
}anders{
MyMovie.play ();
PlayButton.Innerhtml = 'pause';
updatedBar = setInterval (Update, 500);
}
}
// steuern Sie die dynamische Anzeige der Fortschrittsbalken
Funktion update () {
if (! mymovie.ended) {
var size = parseInt (myMovie.currentTime*barsize/myMovie.duration);
ProgressBar.Style.width = Größe+'px';
}anders{
progresorBar.style.width = '0px';
PlayButton.innerhtml = 'Play';
window.clearInterval (aktualisiertes BAR);
}
}
// Mausklick -Fortschrittsbalken -Steuerungsmethode
Funktion ClickedBar (e) {
if (! myMovie.pauded &&! myMovie.ended) {
var mausx = e.Pagex-bar.OffsetLeft;
var newime = mousex*myMovie.duration/barsize; // Neue Startzeit
MyMovie.CurrentTime = Newtime;
ProgressBar.Style.width = Mousex+'PX';
window.clearInterval (aktualisiertes BAR);
}
}
window.addeventListener ('lad', dofisrt, false);
Gut, dass ich den Codeteil genommen habe