Beispiel für die Wiedergabe lokaler HTML5-Video-/Audiodateien. Einführung in die HTML5-Tutorialfähigkeiten

Während dieser Zeit sehe ich oft, dass Entwickler immer wieder die gleiche Frage stellen: Warum kann ich lokale Mediendateien nicht abspielen, indem ich das src-Attribut festlege? Zum Beispiel video.src="D:test.mp4".

Das liegt daran, dass JavaScript im Browser ohne vorherige Zustimmung des Benutzers nicht direkt auf lokale Ressourcen (wie das Dateisystem, die Kamera, das Mikrofon usw.) zugreifen kann. Es ist auch notwendig, dass Browser diese Einschränkung auferlegen. Stellen Sie sich vor, wenn JavaScript skrupellos auf das lokale Dateisystem zugreifen kann, ist es einfach, private Daten des Benutzers zu stehlen, wenn er oder sie auf eine Webseite zugreift Sie wissen, was zu tun ist. Möglicherweise wurden auf Ihrem Computer gespeicherte private Dateien wie Kreditkartennummern, Passwörter und Firmengeheimnisse von einem bösartigen JavaScript-Programm auf einen Remote-Server hochgeladen, was für Benutzer unerträglich ist.

Wir können weiterhin lokale Dateien abspielen, nachdem wir die Erlaubnis des Benutzers eingeholt haben. Hier ist eine Methode.

Fügen Sie einen Eingabeknoten in die Seite ein und geben Sie den Typ „Datei“ an. Wenn Sie mehrere Dateien abspielen müssen, können Sie das Attribut „Mehrfach“ 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 dann die URL auf den Quellwert von Audio oder Video fest.

Das Codebeispiel lautet wie folgt:

Kopieren Sie den Code

Der Code lautet wie folgt:

audio_id“ steuert die Autoplay-Schleife>Ihr Browser unterstützt kein HTML5-Audio
<script> <br />function onInputFileChange() { <br /> var file = document.getElementById('file').files[ 0]; <br /> var url = URL.createObjectURL(file); <br /> document.getElementById("audio_id").src = url; ;/script> <br /> <br /><br /><br />Dieser Code wurde auf Chrome 30 und Firefox 24 getestet. Es sollte bestimmte Kompatibilitätsprobleme im IE geben ( Soweit ich weiß, werden IE8 und frühere Versionen definitiv nicht funktionieren), da IE HTML5 nicht gut unterstützt und ich nicht weiß, ob IE10 die entsprechende API implementiert hat. <br /></script>