So spielen Sie lokale Mediendateien (Video und Audio) mit HTML und JavaScript ab

Erstens kann JavaScript aus Sicherheitsgründen nicht direkt auf lokale Ressourcendateien zugreifen. Was sollen wir tun? Hier ist eine Methode. Fügen Sie einen Eingabeknoten in die Seite ein und geben Sie den Typ als Datei an. Wenn Sie mehrere Dateien abspielen müssen, können Sie das Attribut „multiple“ hinzufügen. Registrieren Sie die Rückruffunktion, wenn der Dateiknoten aktualisiert wird. Rufen Sie in der Rückruffunktion die Funktion URL.createObjectURL auf, um die URL der gerade ausgewählten Datei abzurufen, und legen Sie die URL dann als Quellwert des Audios oder Videos fest.

1. Ein Beispiel für die Verwendung von HTML und JavaScript zum Abspielen einer lokalen Videodatei . Der Quellcode lautet wie folgt:

<!DOCTYPE html>

<html>

<Kopf>

       <meta charset="utf-8">

       <title>Lokale Videodateien abspielen</title>

</Kopf>

<Text>

<h3><center>Videowiedergabetest<center></h3>

<hr color="#666666">

<input type="file" id="file" onchange="onInputFileChange()">

<br/>

<video id="video_id" width="520" height="360" steuert Autoplay-Schleife>Ihr Browser unterstützt kein HTML5-Video</video>

<Skript>

Funktion beiEingabeDateiänderung() {

      var Datei = document.getElementById('Datei').files[0];

      var url = URL.createObjectURL(Datei);

      konsole.log(url);

      document.getElementById("video_id").src = url;

}

</Skript>

</body>

</html>

Speichern Sie es als DemoF.html (hier habe ich die Webseitendatei im Verzeichnis D:\Web Page Practice abgelegt, Sie können dies je nach Ihrer tatsächlichen Situation entscheiden), öffnen Sie es mit einem Browser und es wird wie folgt angezeigt:

2. Ein Beispiel für die Verwendung von HTML und JavaScript zum Abspielen einer lokalen Audiodatei . Der Quellcode lautet wie folgt:

<!DOCTYPE html>

<html>

<Kopf>

       <meta charset="utf-8">

       <title>Lokale Audiodateien abspielen</title>

</Kopf>

<Text>

<h3><center>Lokaler Audiowiedergabetest<center></h3>

<hr color="#666666">

<input type="file" id="file" onchange="onInputFileChange()">

<br/>

<audio id="audio_id" steuert die automatische Wiedergabeschleife>Ihr Browser unterstützt kein HTML5-Audio</audio>

<Skript>

Funktion beiEingabeDateiänderung() {

      var Datei = document.getElementById('Datei').files[0];

      var url = URL.createObjectURL(Datei);

      konsole.log(url);

      document.getElementById("audio_id").src = url;

}

</Skript>

</body>

</html>

Speichern Sie es als DemoG.html (hier habe ich die Webseitendatei im Verzeichnis D:\Web Page Practice abgelegt, Sie können dies je nach Ihrer tatsächlichen Situation entscheiden), öffnen Sie es mit einem Browser und es wird wie folgt angezeigt:

Klicken Sie auf die Schaltfläche „Datei auswählen“, um das Dateidialogfeld „Öffnen“ aufzurufen und die abzuspielende Audiodatei zu laden.

Dies ist das Ende dieses Artikels über die Verwendung von HTML und JavaScript zum Abspielen lokaler Mediendateien (Video und Audio). Weitere verwandte HTML-Wiedergabemöglichkeiten für lokale Medieninhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: N Möglichkeiten, mit CSS ein zweispaltiges Layout zu erreichen

>>: CSS-Tipps zur Implementierung der Chrome-Tab-Leiste

Implementierung der Formatierung von Partitionen und der Einbindung in Centos7

So spielen Sie lokale Mediendateien (Video und Audio) mit HTML und JavaScript ab

Implementierung der Formatierung von Partitionen und der Einbindung in Centos7

Detaillierte Erklärung der HTML-Formularelemente (Teil 1)

Eine kurze Diskussion über zwei Methoden zum Erreichen einer halbtransparenten Hintergrundfarbe in CSS

Verwenden von JS zum Implementieren eines einfachen Rechners

Tipps zum Deaktivieren des Kompatibilitätsansichtsmodus von IE8 und IE9 mithilfe von HTML

CnBlogs - Teilen im benutzerdefinierten Blogstil

React+axios implementiert die Suchbenutzerfunktion von GitHub (Beispielcode)

Die Methode zur Änderung vergessener MySql-Passwörter ist für Versionen ab 5.7 geeignet.

js zur Implementierung eines Web-Rechners

Tutorial zur HTML-Tabellenauszeichnung (29): Farbattribut für helle Zellenränder BORDERCOLORLIGHT

Artikel empfehlen

Detaillierte grafische Erläuterung der Hadoop-Installation und -Konfiguration basierend auf Linux7

MySQL verwendet inet_aton und inet_ntoa, um IP-Adressdaten zu verarbeiten

Spezifische Verwendung globaler Variablen von node.js

HTML-Bildlaufleisten-Textbereichsattributeinstellung

Eine kurze Analyse zum Upgrade von PHP 5.4 auf 5.6 in CentOS 7

CSS-Positionierungslayout (Position, Positionierungslayoutfähigkeiten)

Eine kurze Erläuterung des Navigationsfensters in Iframe-Webseiten

Zusammenfassung der in MySQL häufig verwendeten Typkonvertierungsfunktionen (empfohlen)

So verwenden Sie Chrome Dev Tools zur Analyse der Seitenleistung (Front-End-Leistungsoptimierung)

CSS-Leistungsoptimierung - detaillierte Erklärung der Will-Change-Verwendung

Detaillierte Erklärung der Docker Compose-Verwendung

So aktualisieren Sie MySQL 5.6 auf 5.7 unter Windows

Implementierung der MySQL-Tabellenlöschoperation (Unterschiede zwischen Löschen, Abschneiden und Löschen)

favico.ico --- Schritte zum Einrichten des Website-ICO-Symbols

Detaillierte Erklärung zur Verwendung der Clip-Path-Eigenschaft in CSS