Commentaire: Après avoir obtenu l'autorisation de l'utilisateur, nous pouvons toujours lire le fichier local. Insérez un nœud d'entrée dans la page et spécifiez le type en tant que fichier, puis définissez l'URL sur la valeur SRC de l'audio ou de la vidéo.
Au cours de cette période, les développeurs sont souvent vus à plusieurs reprises pour poser la même question, pourquoi les fichiers multimédias locaux ne peuvent-ils pas être lus en définissant l'attribut SRC? Par exemple, vidéo.src = d: /test.mp4.
En effet, JavaScript dans le navigateur ne peut pas accéder directement aux ressources locales (telles que le système de fichiers, la caméra, le microphone, etc.), sauf si l'autorisation de l'utilisateur est obtenue à l'avance. Il est également nécessaire que les navigateurs mettent en œuvre cette restriction. Imaginez simplement que si JavaScript peut accéder sans scrupulement au système de fichiers local, le vol de données de confidentialité des utilisateurs deviendra facile. Lorsqu'un utilisateur visite une page Web sur le réseau, le numéro de carte de crédit, le mot de passe, les fichiers secrètes de l'entreprise et d'autres fichiers de confidentialité enregistrés sur sa machine peuvent avoir été téléchargés sur un serveur lointain par des programmes JavaScript malveillants, qui est intolérable aux utilisateurs.
Après avoir obtenu l'autorisation de l'utilisateur, nous pouvons toujours lire des fichiers locaux. Voici une méthode.
Insérez un nœud d'entrée dans la page et spécifiez le type de fichier en tant que fichier. Si vous devez lire plusieurs fichiers, vous pouvez ajouter l'attribut multiple. Enregistrez la fonction de rappel lorsque le nœud de fichier est mis à jour, appelez la fonction url.createObjectUrl dans la fonction de rappel pour effectuer l'URL du fichier qui vient d'être sélectionné, puis définissez l'URL sur la valeur SRC de l'audio ou de la vidéo.
L'exemple de code est le suivant:
<html>
<body>
<input type = "file" onchange = "onInputFileChange ()">
<Contrôles audio Loop de jeu automatique> Votre navigateur ne peut pas prendre en charge HTML5 Audio </ audio>
<cript>
fonction onInputFileChange () {
var fichier = document.getElementById ('fichier'). fichiers [0];
var url = url.createObjectUrl (fichier);
console.log (URL);
document.getElementById ("Audio_id"). src = url;
}
</cript>
</docy>
</html>
Ce code a été testé et transmis sur Chrome 30 et Firefox 24. Il devrait y avoir des problèmes de compatibilité sur IE (pour autant que je sache, IE8 et les versions précédentes ne peuvent certainement pas fonctionner), car IE ne prend pas bien en charge HTML5, et je ne sais pas si IE10 implémente les API connexes.