Home > Article > Web Front-end > HTML5 Video/Audio plays local files

HTML5 Video/Audio plays local files

不言Original: 2018-06-05 10:55:127523browse

This article mainly introduces about HTML5 Video/Audio playing local files. It has certain reference value. Now I share it with everyone. Friends in need can refer to it.

We can still do it after getting the user's permission. To play local files, insert an input node into the page and specify the type as file, and then set the url to the src value of audio or video.

During this period, I often see developers repeatedly asking the same question. A question, why can't I play local media files by setting the src attribute? For example video.src="D:\test.mp4".

This is because JavaScript in the browser cannot directly access local resources (such as the file system, camera, microphone, etc.) unless the user's permission is obtained in advance. The reason why the browser imposes this restriction is also necessary. Just imagine, if JavaScript can access the local file system unscrupulously, it will be easy to steal the user's private data. When the user accesses a web page on the network, he or she will not know what to do. Unknowingly, private files such as credit card numbers, passwords, and company secret files saved on your machine may have been uploaded to a remote server by a malicious JavaScript program, which is intolerable to users.

We can still play local files after getting the user's permission. Here is a method.

Insert an input node into the page and specify type as file. If you need to play multiple files, you can add the attribute multiple. Register the callback function when the file node is updated. In the callback function, call the URL.createObjectURL function to obtain the URL of the file just selected, and then set the URL to the src value of audio or video.

The code example is as follows:

Copy code

The code is as follows:

<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>

The The code passed the test on Chrome 30 and Firefox 24. There should be certain compatibility issues on IE (as far as I know, IE8 and previous versions will definitely not work), because IE does not support HTML5 well. I don’t know about IE10. Is there any relevant API implemented?

Related recommendations:

Detailed explanation of the use of e8e496c15ba93d81f6ea4fe5f55a2244 tags in HTML

The above is the detailed content of HTML5 Video/Audio plays local files. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Sorting out error codes in web projectsNext article：Sorting out error codes in web projects

See more

HTML5 Video/Audio plays local files

Related articles