Comentario: Después de obtener el permiso del usuario, aún podemos reproducir el archivo local. Inserte un nodo de entrada en la página y especifique el tipo como archivo, y luego configure la URL en el valor SRC de audio o video.
Durante este período, los desarrolladores a menudo se ven a los desarrolladores haciendo repetidamente la misma pregunta, ¿por qué no se pueden reproducir archivos de medios locales estableciendo el atributo SRC? Por ejemplo, video.src = d: /test.mp4.
Esto se debe a que JavaScript en el navegador no puede acceder directamente a los recursos locales (como el sistema de archivos, la cámara, el micrófono, etc.), a menos que el permiso del usuario se obtenga por adelantado. También es necesario que los navegadores implementen esta restricción. Imagine que si JavaScript puede acceder al sistema de archivos local sin escrupulosamente, robar datos de privacidad del usuario será fácil. Cuando un usuario visita una página web en la red, el número de tarjeta de crédito, la contraseña, los archivos secretos de la compañía y otros archivos de privacidad guardados en su máquina pueden haber sido cargados en un servidor distante por programas maliciosos de JavaScript, que es intolerable para los usuarios.
Después de obtener el permiso del usuario, aún podemos reproducir archivos locales. Aquí hay un método.
Inserte un nodo de entrada en la página y especifique el tipo como archivo. Si necesita reproducir varios archivos, puede agregar el atributo múltiple. Registre la función de devolución de llamada Cuando se actualice el nodo del archivo, llame a la función URL.CreateObjectUrl en la función de devolución de llamada para obtener la URL del archivo que se acaba de seleccionar y luego configure la URL en el valor SRC de audio o video.
El ejemplo del código es el siguiente:
<html>
<Body>
<input type = "file" onchange = "onInputFiLechange ()">
<Audio Controls Autoplay Loop> Su navegador no puede admitir HTML5 Audio </udio>
<script>
función onInputFilechange () {
var file = document.getElementById ('file'). archivos [0];
var url = url.createObjectUrl (archivo);
console.log (URL);
document.getElementById ("audio_id"). src = url;
}
</script>
</body>
</html>
Este código fue probado y aprobado en Chrome 30 y Firefox 24. Debe haber algunos problemas de compatibilidad en IE (que yo sepa, IE8 y las versiones anteriores definitivamente no pueden funcionar), porque IE no admite bien HTML5, y no sé si IE10 implementa API relacionadas.