La vidéo/audio HTML5 lit les fichiers locaux-Tutoriel H5-php.cn

La vidéo/audio HTML5 lit les fichiers locaux

不言

Libérer： 2018-06-05 10:55:12

original

7527 Les gens l'ont consulté

Cet article présente principalement la lecture de fichiers vidéo/audio HTML5. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Nous pouvons toujours le faire après avoir obtenu le. l'autorisation de l'utilisateur. Pour lire des fichiers locaux, insérez un nœud d'entrée dans la page et spécifiez le type comme fichier, puis définissez l'URL sur la valeur src de l'audio ou de la vidéo

Pendant cette période, je vois souvent des développeurs à plusieurs reprises. poser la même question Une question, pourquoi ne puis-je pas lire des fichiers multimédias locaux en définissant l'attribut src ? Par exemple video.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.) sans l'autorisation préalable de l'utilisateur. La raison pour laquelle le navigateur impose cette restriction est également nécessaire. Imaginez, si JavaScript peut accéder au système de fichiers local sans scrupules, il sera facile de voler les données privées de l'utilisateur lorsque celui-ci accède à une page Web sur Internet. ne saura pas quoi faire, sans le savoir, des fichiers privés tels que des numéros de carte de crédit, des mots de passe et des fichiers secrets d'entreprise enregistrés sur votre ordinateur peuvent avoir été téléchargés sur un serveur distant par un programme JavaScript malveillant, ce qui est intolérable pour les utilisateurs.

Nous pouvons toujours lire les fichiers locaux après avoir obtenu l'autorisation de l'utilisateur. Voici une méthode.

Insérez un nœud d'entrée dans la page et spécifiez le type comme 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. Dans la fonction de rappel, appelez la fonction URL.createObjectURL pour obtenir l'URL du fichier que vous venez de sélectionner, puis définissez l'URL sur la valeur src de l'audio ou de la vidéo.

L'exemple de code est le suivant :

Copiez le code

Le code est le suivant :

<html>  
<body>  
<input type="file" id="file" onchange="onInputFileChange()">  
<audio id="audio_id" controls autoplay loop>Your browser can&#39;t support HTML5 Audio</audio>  
<script>  
function onInputFileChange() {  
   var file = document.getElementById(&#39;file&#39;).files[0];  
   var url = URL.createObjectURL(file);  
   console.log(url);  
   document.getElementById("audio_id").src = url;  
}  
</script>  
</body>  
</html>

Copier après la connexion

Ce code a réussi le test sur Chrome 30 et Firefox 24. Il devrait y avoir certains problèmes de compatibilité sur IE (pour autant que je sache, IE8 et les versions précédentes ne fonctionneront certainement pas), car IE ne fonctionne pas supporte bien HTML5. Savez-vous si IE10 a implémenté l'API correspondante ?

Recommandations associées :

Explication détaillée de l'utilisation des balises en HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!