HTML5 Video/Audio plays local files
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'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>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 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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1377
52
Table Border in HTML
Sep 04, 2024 pm 04:49 PM
Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.
HTML margin-left
Sep 04, 2024 pm 04:48 PM
Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.
Nested Table in HTML
Sep 04, 2024 pm 04:49 PM
This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.
HTML Table Layout
Sep 04, 2024 pm 04:54 PM
Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.
Klipsch unveils Flexus Core 300 flagship soundbar with 8K support, 12 speakers and room correction
Sep 05, 2024 am 10:16 AM
The Klipsch Flexus Core 300 is the top model in the series and is positioned above the already available Flexus Core 200 in the company's soundbar line-up. According to Klipsch, this is the first soundbar in the world whose sound can be adapted to th
HTML Ordered List
Sep 04, 2024 pm 04:43 PM
Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively
HTML Input Placeholder
Sep 04, 2024 pm 04:54 PM
Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.
Moving Text in HTML
Sep 04, 2024 pm 04:45 PM
Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.
