Комментарий: После получения разрешения пользователя мы все еще можем воспроизводить локальный файл. Вставьте входной узел в страницу и укажите тип как файл, а затем установите URL -адрес для значения SRC аудио или видео.
В течение этого периода разработчиков часто встречаются неоднократно задавая тот же вопрос, почему нельзя воспроизводить локальные медиа -файлы, установив атрибут SRC? Например, video.src = d: /test.mp4.
Это связано с тем, что JavaScript в браузере не может напрямую доступ к локальным ресурсам (например, файловая система, камера, микрофон и т. Д.), Если разрешение пользователя не получено заранее. Для браузеров также необходимо внедрить это ограничение. Представьте себе, что если JavaScript сможет получить доступ к локальной файловой системе недобросовестно, кража данных о конфиденциальности пользователей станет простым. Когда пользователь посещает веб -страницу в сети, номер кредитной карты, пароль, секретные файлы компании и другие файлы конфиденциальности, сохраненные на его машине, могли быть загружены на далекий сервер с помощью вредоносных программ JavaScript, которые невыносимы для пользователей.
После получения разрешения пользователя мы все еще можем воспроизводить локальные файлы. Вот метод.
Вставьте входной узел в страницу и укажите тип как файл. Если вам нужно воспроизвести несколько файлов, вы можете добавить атрибут несколько. Зарегистрируйте функцию обратного вызова при обновлении узла файла, вызовите функцию url.createObjecturl в функции обратного вызова, чтобы получить только что выбранного URL -адреса файла, а затем установите URL -адрес для значения SRC аудио или видео.
Пример кода заключается в следующем:
<html>
<тело>
<input type = "file" onchange = "oniUnputFileChange ()">
<Audio Controls Autoplay Loop> Ваш браузер не может поддерживать HTML5 Audio </audio>
<Скрипт>
функция onInputFileChange () {
var file = document.getElementbyId ('file'). файлы [0];
var url = url.createObjecturl (file);
console.log (url);
document.getElementbyId ("audio_id"). src = url;
}
</script>
</body>
</html>
Этот код был протестирован и прошел на Chrome 30 и Firefox 24. Должны быть некоторые проблемы с совместимостью в IE (насколько я знаю, IE8 и предыдущие версии определенно не могут работать), потому что IE не поддерживает HTML5, и я не знаю, IE10 -связанные APIS, связанные с IE10.