Komentar: Setelah mendapatkan izin pengguna, kami masih dapat memutar file lokal. Masukkan node input ke dalam halaman dan tentukan tipe sebagai file, lalu atur URL ke nilai SRC audio atau video.
Selama periode ini, pengembang sering terlihat berulang kali menanyakan pertanyaan yang sama, mengapa file media lokal tidak dapat dimainkan dengan mengatur atribut SRC? Misalnya video.src = d: /test.mp4.
Ini karena JavaScript di browser tidak dapat secara langsung mengakses sumber daya lokal (seperti sistem file, kamera, mikrofon, dll.), Kecuali jika izin pengguna diperoleh sebelumnya. Juga perlu bagi browser untuk mengimplementasikan pembatasan ini. Bayangkan saja bahwa jika JavaScript dapat mengakses sistem file lokal secara tidak bermoral, mencuri data privasi pengguna akan menjadi mudah. Ketika pengguna mengunjungi halaman web di jaringan, nomor kartu kredit, kata sandi, file rahasia perusahaan, dan file privasi lainnya yang disimpan di mesinnya mungkin telah diunggah ke server yang jauh oleh program JavaScript berbahaya, yang tidak dapat ditoleransi oleh pengguna.
Setelah mendapatkan izin pengguna, kami masih dapat memutar file lokal. Inilah metode.
Masukkan simpul input ke dalam halaman dan tentukan jenis file. Jika Anda perlu memutar beberapa file, Anda dapat menambahkan banyak atribut. Daftarkan fungsi callback ketika node file diperbarui, hubungi fungsi URL.CreateObjecTURL di fungsi callback untuk mendapatkan URL file yang baru saja dipilih, dan kemudian atur URL ke nilai SRC audio atau video.
Contoh kode adalah sebagai berikut:
<Html>
<body>
<input type = "file" onchange = "onInputFileChange ()">
<Audio Mengontrol Autoplay Loop> Browser Anda tidak dapat mendukung HTML5 Audio </udio>
<script>
fungsi onInputFileChange () {
var file = document.getElementById ('file'). File [0];
var url = url.createObjecTurl (file);
console.log (url);
document.geteLementById ("audio_id"). src = url;
}
</script>
</body>
</html>
Kode ini diuji dan diteruskan pada Chrome 30 dan Firefox 24. Seharusnya ada beberapa masalah kompatibilitas pada IE (sejauh yang saya tahu, IE8 dan versi sebelumnya pasti tidak dapat berfungsi), karena IE tidak mendukung HTML5 dengan baik, dan saya tidak tahu jika IE10 mengimplementasikan API terkait.