Exemple de lecture de fichiers locaux vidéo/audio HTML5 introduction_html5 compétences du didacticiel

Pendant cette période, je vois souvent des développeurs poser à plusieurs reprises la même 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. Il est également nécessaire que les navigateurs imposent cette restriction. 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, il ne le fera pas. 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 :

audio_id" contrôle la boucle de lecture automatique>Votre navigateur ne prend pas en charge HTML5 Audio