HTML5-Video/Audio spielt lokale Dateien ab-H5-Tutorial-php.cn

HTML5-Video/Audio spielt lokale Dateien ab

不言

Freigeben： 2018-06-05 10:55:12

Original

7527 Leute haben es durchsucht

Dieser Artikel befasst sich hauptsächlich mit der Wiedergabe lokaler Dateien in HTML5. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf zurückgreifen Um lokale Dateien abzuspielen, fügen Sie einen Eingabeknoten in die Seite ein, geben Sie den Typ als Datei an und legen Sie dann die URL auf den Quellwert „Audio“ oder „Video“ fest.

Während dieser Zeit sehe ich Entwickler oft wiederholt Ich stelle die gleiche Frage. Eine Frage: 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 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 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 dann die URL auf den Quellwert von Audio oder Video fest.

Das Codebeispiel lautet wie folgt:

Kopieren Sie den CodeDer Code lautet wie folgt:

<html>  
<body>  
<input type="file" id="file" onchange="onInputFileChange()">  
<audio id="audio_id" controls autoplay loop>Your browser can&#39;t support HTML5 Audio</audio>  
<script>  
function onInputFileChange() {  
   var file = document.getElementById(&#39;file&#39;).files[0];  
   var url = URL.createObjectURL(file);  
   console.log(url);  
   document.getElementById("audio_id").src = url;  
}  
</script>  
</body>  
</html>

Nach dem Login kopieren

Der Code hat den Test auf Chrome 30 und Firefox 24 bestanden. Es sollte bestimmte Kompatibilitätsprobleme im IE geben (soweit ich weiß, werden IE8 und frühere Versionen definitiv nicht funktionieren), da IE HTML5 nicht unterstützt Nun, ich weiß nichts über IE10. Ist eine relevante API implementiert?

Verwandte Empfehlungen:

Detaillierte Erläuterung der Verwendung von -Tags

Das obige ist der detaillierte Inhalt vonHTML5-Video/Audio spielt lokale Dateien ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!