Comentário: Depois de obter a permissão do usuário, ainda podemos reproduzir o arquivo local. Insira um nó de entrada na página e especifique o tipo como arquivo e, em seguida, defina o URL para o valor SRC do áudio ou vídeo.
Durante esse período, os desenvolvedores geralmente são vistos fazendo a mesma pergunta, por que os arquivos de mídia locais não podem ser reproduzidos definindo o atributo SRC? Por exemplo, video.src = d: /test.mp4.
Isso ocorre porque o JavaScript no navegador não pode acessar diretamente os recursos locais (como sistema de arquivos, câmera, microfone etc.), a menos que a permissão do usuário seja obtida com antecedência. Também é necessário que os navegadores implementem essa restrição. Imagine que, se o JavaScript puder acessar o sistema de arquivos local sem escrúpulos, roubar dados de privacidade do usuário se tornará fácil. Quando um usuário visita uma página da Web na rede, o número do cartão de crédito, a senha, os arquivos secretos da empresa e outros arquivos de privacidade salvos em sua máquina podem ter sido enviados para um servidor distante por programas JavaScript maliciosos, o que é intolerável aos usuários.
Depois de obter a permissão do usuário, ainda podemos reproduzir arquivos locais. Aqui está um método.
Insira um nó de entrada na página e especifique o tipo como arquivo. Se você precisar reproduzir vários arquivos, poderá adicionar o atributo múltiplo. Registre a função de retorno de chamada Quando o nó do arquivo for atualizado, ligue para a função URL.CreateObjectURL na função de retorno de chamada para obter o URL do arquivo recém -selecionado e, em seguida, defina o URL para o valor SRC de áudio ou vídeo.
O exemplo do código é o seguinte:
<html>
<Body>
<input type = "file" onchange = "oninputFileChange ()">
<Audio Controls AutoPlay Loop> Seu navegador não pode suportar o HTML5 Audio </udio>
<Cript>
função onInputFileChange () {
var arquivo = document.getElementById ('arquivo'). arquivos [0];
var url = url.createObjecturl (arquivo);
console.log (URL);
document.getElementById ("Audio_ID"). Src = url;
}
</script>
</body>
</html>
Esse código foi testado e transmitido no Chrome 30 e no Firefox 24. Deve haver alguns problemas de compatibilidade no IE (até onde eu sei, o IE8 e as versões anteriores definitivamente não podem funcionar), porque o IE não suporta bem o HTML5 e não sei se o IE10 implementa APIs relacionadas.