تعليق: بعد الحصول على إذن المستخدم ، لا يزال بإمكاننا تشغيل الملف المحلي. أدخل عقدة إدخال في الصفحة وحدد النوع كملف ، ثم قم بتعيين عنوان URL على قيمة SRC للصوت أو الفيديو.
خلال هذه الفترة ، غالبًا ما يُرى المطورين يطرحون بشكل متكرر نفس السؤال ، لماذا لا يمكن تشغيل ملفات الوسائط المحلية عن طريق تعيين سمة SRC؟ على سبيل المثال video.src = d: /test.mp4.
وذلك لأن JavaScript في المتصفح لا يمكنه الوصول مباشرة إلى الموارد المحلية (مثل نظام الملفات ، الكاميرا ، الميكروفون ، إلخ) ، ما لم يتم الحصول على إذن المستخدم مسبقًا. من الضروري أيضًا للمتصفحات تنفيذ هذا التقييد. فقط تخيل أنه إذا تمكنت JavaScript من الوصول إلى نظام الملفات المحلي بشكل غير ضروري ، فسيصبح سرقة بيانات خصوصية المستخدم أمرًا سهلاً. عندما يزور المستخدم صفحة ويب على الشبكة ، قد يتم تحميل رقم بطاقة الائتمان وكلمة المرور والملفات السرية للشركة وملفات الخصوصية الأخرى المحفوظة على جهازه على خادم بعيد عن طريق برامج JavaScript الضارة ، والتي لا تطاق للمستخدمين.
بعد الحصول على إذن المستخدم ، لا يزال بإمكاننا تشغيل الملفات المحلية. هذه طريقة.
أدخل عقدة إدخال في الصفحة وحدد النوع كملف. إذا كنت بحاجة إلى تشغيل ملفات متعددة ، فيمكنك إضافة السمة المتعددة. قم بتسجيل وظيفة رد الاتصال عند تحديث عقدة الملف ، واتصل بوظيفة url.createObjecturl في وظيفة رد الاتصال للحصول على عنوان URL للملف المحدد للتو ، ثم قم بتعيين عنوان URL على قيمة SRC للصوت أو الفيديو.
مثال الكود كما يلي:
<html>
<body>
<type type = "file" onChange = "oninputFileChange ()">
<Audio Controls Autoplay Loop> لا يمكن للمتصفح دعم HTML5 Audio </Audio>
<script>
وظيفة OninputFileChange () {
var file = document.getElementById ('file'). files [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 ينفذ واجهات برمجة التطبيقات ذات الصلة.