ความคิดเห็น: หลังจากได้รับอนุญาตจากผู้ใช้เรายังสามารถเล่นไฟล์ท้องถิ่นได้ แทรกโหนดอินพุตลงในหน้าและระบุประเภทเป็นไฟล์จากนั้นตั้งค่า URL เป็นค่า SRC ของเสียงหรือวิดีโอ
ในช่วงเวลานี้นักพัฒนามักจะเห็นคำถามเดียวกันซ้ำ ๆ ทำไมไฟล์สื่อท้องถิ่นไม่สามารถเล่นได้โดยการตั้งค่าแอตทริบิวต์ SRC ตัวอย่างเช่น video.src = d: /test.mp4
นี่เป็นเพราะจาวาสคริปต์ในเบราว์เซอร์ไม่สามารถเข้าถึงทรัพยากรในท้องถิ่นได้โดยตรง (เช่นระบบไฟล์กล้องไมโครโฟน ฯลฯ ) เว้นแต่จะได้รับอนุญาตจากผู้ใช้ล่วงหน้า นอกจากนี้ยังจำเป็นสำหรับเบราว์เซอร์ในการใช้ข้อ จำกัด นี้ แค่คิดว่าถ้า JavaScript สามารถเข้าถึงระบบไฟล์ในท้องถิ่นได้อย่างไร้สาระการขโมยข้อมูลความเป็นส่วนตัวของผู้ใช้จะกลายเป็นเรื่องง่าย เมื่อผู้ใช้เยี่ยมชมเว็บเพจบนเครือข่ายหมายเลขบัตรเครดิตรหัสผ่านไฟล์ลับของ บริษัท และไฟล์ความเป็นส่วนตัวอื่น ๆ ที่บันทึกไว้ในเครื่องของเขาอาจถูกอัปโหลดไปยังเซิร์ฟเวอร์ที่ห่างไกลโดยโปรแกรม JavaScript ที่เป็นอันตรายซึ่งไม่สามารถใช้งานได้สำหรับผู้ใช้
หลังจากได้รับอนุญาตจากผู้ใช้เรายังสามารถเล่นไฟล์ในพื้นที่ได้ นี่คือวิธีการ
แทรกโหนดอินพุตลงในหน้าและระบุประเภทเป็นไฟล์ หากคุณต้องการเล่นหลายไฟล์คุณสามารถเพิ่มแอตทริบิวต์หลายตัว ลงทะเบียนฟังก์ชั่นการโทรกลับเมื่อโหนดไฟล์ได้รับการอัปเดตให้เรียกใช้ฟังก์ชัน URL.CreateObjecturl ในฟังก์ชันการโทรกลับเพื่อรับ URL ของไฟล์ที่เพิ่งเลือกจากนั้นตั้งค่า URL เป็นค่า SRC ของเสียงหรือวิดีโอ
ตัวอย่างรหัสมีดังนี้:
<html>
<body>
<input type = "file" onChange = "OnInputFileChange ()">
<เสียงควบคุมการเล่นอัตโนมัติ> เบราว์เซอร์ของคุณไม่สามารถรองรับ HTML5 Audio </Audio>
<script>
ฟังก์ชั่น oninputfilechange () {
var file = document.getElementById ('ไฟล์') ไฟล์ [0];
var url = url.createObjecturl (ไฟล์);
console.log (url);
document.getElementById ("AUDIO_ID"). SRC = URL;
-
</script>
</body>
</html>
รหัสนี้ได้รับการทดสอบและส่งผ่าน Chrome 30 และ Firefox 24 ควรมีปัญหาความเข้ากันได้บางอย่างเกี่ยวกับ IE (เท่าที่ฉันรู้ IE8 และเวอร์ชันก่อนหน้านี้ไม่สามารถทำงานได้) เพราะ IE ไม่สนับสนุน HTML5 ที่ดีและฉันไม่รู้ว่า IE10 ใช้ API ที่เกี่ยวข้องหรือไม่