HTML5 Video/Audio example of local file playback

Source: Internet
Author: User

Comments: After obtaining the user's permission, we can still play the local file. insert an input node in the page, specify the type as file, and set the url to the src value of audio or video.

During this time, developers often asked the same question repeatedly. Why can't I play a local media file 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 file systems, cameras, microphones, etc.), unless it is permitted by the user in advance. This restriction is also necessary for browsers. Imagine that if JavaScript can access the local file system without authorization, it will become easy to steal user privacy data, when a user accesses a webpage on the network, the credit card number and password stored on his or her machine are unconsciously displayed, private files such as company secrets may have been uploaded to a remote server by malicious JavaScript programs, which is intolerable to users.

After obtaining the user's permission, we can still play the local file. The following describes a method.

Insert an input node in the page and specify the type as file. To play multiple files, you can add the attribute multiple. Registers the callback function when the file node is updated and calls the URL in the callback function. the createObjectURL function is used to obtain the url of the selected file and set the url to the src value of audio or video.

The code example is as follows:

The Code is as follows:
<Html>
<Body>
<Input type = "file" id = "file" onchange = "onInputFileChange ()">
<Audio id = "audio_id" controls autoplay loop> Your browser can't support HTML5 Audio </audio>
<Script>
Function onInputFileChange (){
Var file = document. getElementById ('file'). files [0];
Var url = URL. createObjectURL (file );
Console. log (url );
Document. getElementById ("audio_id"). src = url;
}
</Script>
</Body>
</Html>

This Code passed the test on Chrome 30 and Firefox 24, and there should be some compatibility issues on IE (as far as I know, IE8 and earlier versions certainly cannot work ), because IE does not support HTML5 well, I do not know whether IE10 has implemented related APIs.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.