How to play local media (video and audio) files using HTML and JavaScript
|
First of all, for security reasons, JavaScript cannot directly access local resource files. What should we do? Here is a method. Insert an input node into the page and specify the 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 get the URL of the file just selected, and then set the URL as the src value of the audio or video. 1. An example of using HTML and JavaScript to play a local video file . The source code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Play local video files</title>
</head>
<body>
<h3><center>Video playback test<center></h3>
<hr color="#666666">
<input type="file" id="file" onchange="onInputFileChange()">
<br/>
<video id="video_id" width="520" height="360" controls autoplay loop>Your browser does not support HTML5 video</video>
<script>
function onInputFileChange() {
var file = document.getElementById('file').files[0];
var url = URL.createObjectURL(file);
console.log(url);
document.getElementById("video_id").src = url;
}
</script>
</body>
</html>Save it as DemoF.html (here, I put the web page file in the directory D:\Web Page Practice, you can decide based on your actual situation), open it with a browser and it will display as follows:
2. An example of using HTML and JavaScript to play a local audio file . The source code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Play local audio files</title>
</head>
<body>
<h3><center>Local audio playback test<center></h3>
<hr color="#666666">
<input type="file" id="file" onchange="onInputFileChange()">
<br/>
<audio id="audio_id" controls autoplay loop>Your browser does not 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>Save it as DemoG.html (here, I put the web page file in the directory D:\Web Page Practice, you can decide based on your actual situation), open it with a browser and it will display as follows:
Click the "Select File" button to pop up the "Open" file dialog box to load the audio file to be played. This is the end of this article about how to use HTML and JavaScript to play local media (video and audio) files. For more related html playback of local media content, please search 123WORDPRESS.COM's previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: N ways to achieve two-column layout with CSS
>>: CSS tips for implementing Chrome tab bar
Recommend
How to install SVN server under Linux
1. Yum installation yum install subversion 2. Con...
Introduction to the differences between HTML name, id, class (format/application scenario/features), etc.
In a page, there are many controls (elements or ta...
Briefly describe mysql monitoring group replication
Original text: https://dev.mysql.com/doc/refman/8...
Determine the direction of mouse entry based on CSS
In a front-end technology group before, a group m...
Docker MQTT installation and use tutorial
Introduction to MQTT MQTT (Message Queuing Teleme...
How to solve the problem of forgetting the root password of Mysql on Mac
I haven't used mysql on my computer for a lon...
CSS3 to achieve timeline effects
Recently, when I turned on my computer, I saw tha...
How to use React to implement image recognition app
Let me show you the effect picture first. Persona...
Detailed explanation of how to use relative paths in HTML to obtain files at all levels of directories
The concept of relative path Use the current file...
js implements array flattening
Table of contents How to flatten an array 1. Usin...
A brief analysis of how to access Windows 10 host folders from CentOS 8 virtual machines
After installing VMware Tools, ① text can be copi...
How to make a website front end elegant and attractive to users
The temperament of a web front-end website is a fe...
Detailed explanation of several methods of deduplication in Javascript array
Table of contents Array deduplication 1 Double-la...
The problem of introducing specified font @font-face in CSS to be compatible with various browsers
When making a web page, if you want to use a spec...
Centos7.5 configuration java environment installation tomcat explanation
Tomcat is a web server software based on Java lan...