HTML5 -Video: Fragmente, Bildunterschriften und dynamische Miniaturansichten

In diesem Beispiel ist 'thumbnail.jpg' das Bild, das als Thumbnail für das Video verwendet wird.

Wie kann ich meine machen Das HTML5 -Video startet nur, wenn Sie auf ein Miniaturbildbild klicken? JavaScript zur Steuerung der Spiel- und Pausefunktionen des Videos. Zunächst müssen Sie das Video ausblenden und nur das Miniaturbild anzeigen. Wenn das Miniaturbild geklickt wird, ist das Bild versteckt und das Video wird angezeigt und gespielt. Hier ist ein Beispiel dafür, wie es geht:

<script> <br> Funktion Playvideo () {<br> var thumbnail = document.getElementById ("thumbnail"); <br> var Video = document.getElementById ("myvideo"); "None"; <br> Video.Style.Display = "Block"; "Image wird angeklickt, die JavaScript -Funktion" Playvideo () "wird aufgerufen. Diese Funktion verbirgt das Miniaturbild, zeigt das Video an und startet das Video. <br> <br> Wie kann ich meinem HTML5 -Video Bildunterschriften hinzufügen? Das "Track" -Element im "Video" -Tag. Das "Track" -Element wird verwendet, um Untertitel, Bildunterschriftendateien oder andere Dateien mit Text anzugeben, die beim Abspielen des Videos sichtbar sein sollten. Hier ist ein Beispiel dafür, wie man es verwendet: <br> <br> <Video width = "320" Height = "240" Steuerelemente> <br> <Source src = "move.mp4" type = "Video/mp4"> <br> <Track src = "captions.vtt" sort = "captions" srclang = "en" label = "englisch"> <br> <br> In diesem Beispiel. "Captions.vtt" ist die Datei, die die Bildunterschriften für das Video enthält. Das Attribut "Art" gibt die Art von Text -Track an, "Srclang" die Sprache des Texttracks angibt, und "Label" bietet einen Titel für die Titelliste. </script>

Wie kann ich dynamische Miniaturansichten für mein HTML5 -Video erstellen? Dies kann mit JavaScript und dem "Canvas" -Element erreicht werden. Das Element "Canvas" wird verwendet, um Grafiken auf einer Webseite zu zeichnen. Hier ist ein Beispiel dafür, wie es geht:

<script> <br> var Video = document.getElementById ("myvideo"); TimeUpdate ", function () {<br> context.drawimage (Video, 0, 0,, canvas.width, canvas.height); Erstellen einer dynamischen Miniaturansicht. In Ihrem HTML5 -Video können Sie im Tag "Video" mehrere "Track" -Elemente verwenden. Jedes "Track" -Element gibt eine andere Beschriftungsdatei an. Der Benutzer kann auswählen, welcher Titel -Track von der Schnittstelle des Video Players angezeigt werden soll. Hier ist ein Beispiel dafür, wie es geht: <br> <br> <Video width = "320" Height = "240" Controls> <br> <Source Src = "Movie.mp4" type = "Video/mp4"> <br> <track src = "captions_en.vtt" sort = "captions" srclang = "en" label = "englisch"> <br> <track src = "captions_fr.vtt" sort = "captions" srclang = "fr" label = "französisch"> <br> <br> In diesem Beispiel sind 'caption_en.vtt' und 'caption_fr.vtt' die Dateien, die die englischen bzw. französischen Bildunterschriften enthalten. <br> Die Wiedergaberate eines HTML5 -Videos kann mit der Eigenschaft "PlaybackRate" des "Video" -Elements gesteuert werden. Diese Eigenschaft legt die Geschwindigkeit der Video -Wiedergabe fest. Beispielsweise spielt eine Wiedergabrate von 1,0 das Video mit normaler Geschwindigkeit, 0,5 spielt das Video mit halbem Geschwindigkeit und 2,0 spielt das Video mit doppelter Geschwindigkeit. Hier ist ein Beispiel dafür, wie man es verwendet: <br> </script>

Verlangsamen Sie
Geschwindigkeit Up

<script> <br> var Video = document.getElementById ("myvideo"); <br>} <br> <br> function speedeup () {</script>

Video.PlaybackRate = 0.1; 🎜>

Wie kann ich mein HTML5 -Video schleifen? Das Attribut "Loop" ist ein boolescher Attribut. Bei der Vorhandensein wird angegeben, dass das Video jedes Mal von vorne beginnt, wenn es fertig ist. Hier ist ein Beispiel dafür, wie man es verwendet:

In diesem Beispiel wird das Video auf unbestimmte Zeit schleifen.
Um Ihr HTML5 -Video stumm zu stillen, können Sie das "gedämpfte" Attribut im Tag "Video" verwenden. Das gedämpfte Attribut ist ein boolescher Attribut. Bei der vorliegenden Vorhandensein wird angegeben, dass die Audioausgabe des Videos gedämpft werden sollte. Hier ist ein Beispiel dafür, wie man es verwendet:

In diesem Beispiel beginnt das Video mit dem von Audio gedämpften Audio zu spielen. Video? Diese Eigenschaft legt die Lautstärke der Audio -Wiedergabe fest. Der Wert muss eine Zahl zwischen 0,0 und 1,0 sein, wobei 0,0 still und 1,0 am lautesten ist. Hier ist ein Beispiel dafür, wie man es verwendet:


Turn nach unten

Turn Turn UP

<script> <p > var Video = document.getElementById ("myvideo"); ) {<br> Video.Volume -= 0,1; (Video.Volume <1,0) {<br> Video.Volume = 0.1; <br>} <br>} <br> </script>
In diesem Beispiel wird in diesem Beispiel die Schaltfläche 'Turn down' die Lautstärke nach dem Volumen verringert 0.1 und klicken auf die Schaltfläche 'Turn Up' erhöht das Volumen um 0,1.

Wie kann ich Steuerelemente für mein HTML5 -Video anzeigen?
Um Steuerelemente für Ihr HTML5 -Video anzuzeigen, können Sie das Attribut "Steuerelemente" im Tag "Video" verwenden. Das Attribut "Steuerelemente" ist ein boolescher Attribut. Bei der vorliegenden Vorhandensein werden angegeben, dass Videokontrollen angezeigt werden sollten. Diese Steuerelemente umfassen Spiel/Pause, Lautstärke und Vollbildmaterial. Hier ist ein Beispiel dafür, wie man es verwendet:


In diesem Beispiel wird das Video mit Steuerelementen angezeigt.

Das obige ist der detaillierte Inhalt vonHTML5 -Video: Fragmente, Bildunterschriften und dynamische Miniaturansichten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!