Contoh main balik fail tempatan Video/Audio HTML5 pengenalan_html5 kemahiran tutorial

Dalam tempoh ini, saya sering melihat pembangun berulang kali bertanya soalan yang sama, mengapa saya tidak boleh memainkan fail media tempatan dengan menetapkan atribut src? Contohnya video.src="D:test.mp4".

Ini kerana JavaScript dalam penyemak imbas tidak boleh mengakses sumber tempatan secara langsung (seperti sistem fail, kamera, mikrofon, dll.) tanpa kebenaran terlebih dahulu daripada pengguna. Ia juga perlu bagi pelayar untuk mengenakan sekatan ini. Bayangkan, jika JavaScript boleh mengakses sistem fail tempatan secara tidak bertanggungjawab, ia akan menjadi mudah untuk mencuri data peribadi pengguna Apabila pengguna mengakses halaman web di Internet, dia tidak akan tahu apa yang perlu dilakukan tanpa disedari, fail peribadi seperti nombor kad kredit, kata laluan dan fail rahsia syarikat yang disimpan pada mesin anda mungkin telah dimuat naik ke pelayan jauh oleh program JavaScript yang berniat jahat, yang tidak boleh diterima oleh pengguna.

Kami masih boleh memainkan fail tempatan selepas mendapat kebenaran pengguna. Berikut adalah kaedah.

Masukkan nod input ke dalam halaman dan tentukan jenis sebagai fail Jika anda perlu memainkan berbilang fail, anda boleh menambah berbilang atribut. Daftarkan fungsi panggil balik apabila nod fail dikemas kini Dalam fungsi panggil balik, panggil fungsi URL.createObjectURL untuk mendapatkan URL fail yang baru dipilih, dan kemudian tetapkan URL kepada nilai src audio atau video.

Contoh kod adalah seperti berikut:

Salin kod

Kod adalah seperti berikut:

< html>
audio_id" mengawal gelung automain>Pelayar anda tidak boleh menyokong Audio HTML5

fungsi padaInputFileChange() {
var file = document.getElementById('file').files[ 0];
var url = URL.createObjectURL(fail);
console.log(url); ;/script>




Kod ini telah diuji pada Chrome 30 dan Firefox 24. Harus ada isu keserasian tertentu pada IE ( sejauh yang saya tahu IE8 dan versi sebelumnya pasti tidak akan berfungsi), kerana IE tidak menyokong HTML5 dengan baik, dan saya tidak tahu sama ada IE10 telah melaksanakan API yang berkaitan.