HTML5 Video Player Custom Controls Beispiel

Warum müssen Sie Videokontrollen anpassen? Da der Browser mit Kontrollstilen und -funktionen begrenzt ist, ist eine Anpassung erforderlich, wenn die Website der Website vereint, benutzerdefinierte Funktionen hinzugefügt oder eine konsistente Benutzeroberfläche auf der mobilen Seite implementiert werden. 2. Wie baue ich die Infrastruktur? Verwenden Sie das Video -Tag und die Schaltfläche, um eine grundlegende HTML -Struktur zu erstellen, und platzieren Sie die Steuerelemente in den Video übergeordneten Container für das Layout und verwenden Sie die Eingabe von Bereichsart, um Fortschrittsbalken und Lautstärkeregereien zu implementieren. 3. Wie kann ich Schlüsselfunktionen implementieren? Hören Sie sich die Schaltfläche an, um auf Ereignisse zu klicken und Videoelemente über JavaScript zu betreiben, einschließlich Spiel-/Pause, Schalter, Fortschrittsbalkensynchronisation und Sprung, Stummschaltflächen und Lautstärkeregler. 4. Überlegungen zu Stil- und Kompatibilität? Verwenden Sie CSS, um die Bedienelemente über dem Video zu positionieren, die Steuerelemente zu steuern, wenn Sie schweben oder klicken, auf die Glätte des mobilen Berührungsbetriebs und die Einschränkungen der automatischen Wiedergabe von iOS achten und nach und nach die Kernfunktionen implementieren, bevor Sie andere Details erweitern.

Direkte Antwort auf den Titel:
Möchten Sie die Kontrollleiste des HTML5 -Videoplayers selbst anpassen? Eigentlich ist es nicht schwierig. Verwenden Sie einfach ein wenig HTML, CSS und JavaScript, um eine grundlegende, aber vollständige benutzerdefinierte Steuerung zu implementieren.

1. Warum müssen Sie Videokontrollen anpassen?

Obwohl die mit dem Browser ausgestatteten <video></video> -Kontrollen bequem sind, sind ihr Stil und ihre Funktionen begrenzt. Wenn Sie beispielsweise den Website-Stil vereinen möchten, fügen Sie benutzerdefinierte Schaltflächen (z. B. "Screenshots" und "Doppelgeschwindigkeitswiedergabe") hinzu, oder Sie benötigen auch eine konsistente Benutzeroberfläche auf dem mobilen Terminal, müssen Sie selbst eine Reihe von Steuerelementen erstellen.

Eine übliche Praxis besteht darin, native Steuerelemente ( controlsList und webkit-playsinline Eigenschaften usw.) zu verbergen, dann Divs und Schaltflächen zu verwenden, um Ihre eigene Schnittstelle zu erstellen und dann Videoobjekte über JS-Bindungsereignisse zu betreiben.

2. Wie baue ich die Infrastruktur?

Schreiben Sie zuerst eine grundlegende HTML -Struktur, einschließlich Video -Tags und einer Reihe von Schaltflächen:

 <div class = "Video-Wrapper">
  <Video id = "myvideo" src = "your-video.mp4"> </Video>
  <div class = "Custom-Controls">
    <button id = "spielepauseBtn"> abplay </button>
    <Eingabe type = "Bereich" id = "suchbar" value = "0">
    <button id = "mutebtn"> ubled </button>
    <Eingabe type = "Bereich" id = "VolumeBar" min = "0" max = "1" step = "0.01" value = "1">
  </div>
</div>

Notiz:

• Setzen Sie die Kontrolle in den übergeordneten Video -Container, um die Positionierung und das Layout zu erleichtern
• Verwenden Sie den Bereich "Bereich", um Fortschrittsbalken und Volumenbalken mit besserer Kompatibilität zu erstellen
• Es wird empfohlen, vorsichtig zu sein, wenn Sie muted oder autoplay Attribute zum Anfangsstatus hinzufügen.

3. Wie kann ich Schlüsselfunktionen implementieren?

Dieser Teil stützt sich hauptsächlich auf die Schaltfläche JavaScript -Hörklicks und die Interaktion mit Videoelementen.

Spielen/Pause umschalten

 const Video = document.getElementById ('myvideo');
const PlaypauseBtn = document.getElementById ('PlaypauseBtn');

PlaypauseBtn.AddeVentListener ('Click', () => {
  if (Video.pause) {
    Video.play ();
    PlaypauseBtn.TextContent = 'pause';
  } anders {
    Video.pause ();
    PlaypauseBtn.TextContent = 'Play';
  }
});

Fortschrittsbalkensynchronisation und Sprung

 const seexbar = document.getElementById ('suchBar');

Video.AdDeVentListener ('TimeUpdate', () => {
  const Prozent = (Video.CurrentTime / Video.Duration) * 100;
  seexBar.Value = Prozent;
});

seeearbar.addeventListener ('change', () => {
  const time = (seexBar.Value / 100) * Video.Duration;
  Video.CurrentTime = Zeit;
});

Stummschaltflächen und Lautstärkesteuerungen

 const mutebtn = document.getElementById ('mutebtn');
const volumBar = document.getElementById ('VolumeBar');

MuTeBtn.AdDeVentListener ('Click', () => {
  Video.Muted =! Video.Muted;
  MuTeBtn.TextContent = Video.Muted? 'UNUTE': 'Stumm';
});

VolumeBar.AdDeVentListener ('Eingabe', () => {
  Video.Volume = VolumeBar.Value;
  Video.Muted = false;
  MuTeBtn.TextContent = 'Mute';
});

Diese Funktionen sind kombiniert, um einen grundlegenden Spieler zu erstellen, der verwendet werden kann.

4. Überlegungen zum Stil und der Kompatibilität

• Die Steuerung ist standardmäßig versteckt und kann mit CSS über dem Video positioniert werden.
• Zeigen Sie Steuerelemente an, wenn Sie schweben oder klicken (geeignet für Webseiten)
• Das mobile Terminal sollte überlegen, ob der Berührungsbetrieb reibungslos ist, z. B. ob die Fortschrittsleiste sensibel schleppt.
• Eine automatische Wiedergabe auf iOS erfordern möglicherweise muted und Benutzerinteraktionsauslöser

Probe CSS -Snippet:

 .Video-Wrapper {
  Position: Relativ;
  Max-Breite: 640px;
}

.Custom-Controls {
  Position: absolut;
  unten: 0;
  Breite: 100%;
  Hintergrund: RGBA (0,0,0,0,5);
  Farbe: weiß;
  Polsterung: 8px;
  Anzeige: Flex;
  Ausrichtung: Zentrum;
  Lücke: 10px;
}

Grundsätzlich ist das.
Es ist nicht kompliziert, einen Video-Player von benutzerdefinierten Steuerelementen selbst zu erstellen. Die Kompatibilität und die detaillierte Verarbeitung, wie z. B. das Ladungsfehler, das Switching mit Vollbildmodus, die Standardverhaltensstörungen des Browsers usw., können Sie zuerst die Kernfunktionen implementieren und dann langsam erweitern.

Das obige ist der detaillierte Inhalt vonHTML5 Video Player Custom Controls Beispiel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!