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

Detaillierte Erläuterung der Nginx-Installation, SSL-Konfiguration und allgemeinen Befehle unter Centos7.x

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

Detaillierte Erläuterung der Nginx-Installation, SSL-Konfiguration und allgemeinen Befehle unter Centos7.x

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.25

Tutorial zur Verwendung von Docker Compose zum Erstellen von Confluence

Problem mit der Groß-/Kleinschreibung in der MySQL-Datenbank

Was sind Ihre Grundsätze für die Gestaltung von Indizes? Wie lassen sich Indexfehler vermeiden?

So installieren und implementieren Sie MySQL 8.0 unter CentOS8

Ein einfaches Beispiel zur Implementierung einer Fuzzy-Abfrage in Vue

Linux CentOS 6.5: Anleitung zum Deinstallieren, Tarieren und Installieren von MySQL

Implementierung langer Textschatten in Less in CSS3

Detaillierte Erläuterung der gespeicherten Prozeduren und Funktionen von MySQL

Artikel empfehlen

Detaillierte Erläuterung der Berechnungsmethode von Flex-Grow und Flex-Shrink im Flex-Layout

Detaillierte Erläuterung des MySQL Master-Slave-Replikationsprozesses

Implementierung der Beschleunigung der Docker-Installation und -Konfigurationsabbildung

Automatisierter Docker-Build – Diagramm des Implementierungsprozesses für automatisierte Builds

So überwachen Sie den Ausführungsstatus eines Docker-Container-Shell-Skripts

Natives JS zur Implementierung einer Echtzeituhr

Fügen Sie dem Debian-Docker-Container geplante Crontab-Aufgaben hinzu

Wie der Linux-Kernel in den Prozessadressraum eindringt und den Prozessspeicher ändert

Skriptbeispiel zum Starten und Stoppen von Spring-Boot-Projekten in Linux

Verwenden von Schleifen in awk

Spezifische Verwendung von Docker Anonymous Mount und Named Mount

Beispielanalyse des Seitenaufteilungsprinzips des MySQL-Clusterindex

Implementierungscode zum Hinzufügen von Links zu FLASH über HTML (Div-Ebene)

CSS3-Lösung für das Problem des Einfrierens auf Mobilgeräten (Optimierung der Animationsleistung)

Das WeChat-Applet implementiert einen Videoplayer, der einen Bullet-Screen sendet