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
JavaScript recursion detailed
Table of contents 1. What is recursion? 2. Solve ...
Detailed explanation of the platform bus of Linux driver
Table of contents 1. Introduction to platform bus...
Docker primary network port mapping configuration
Port Mapping Before the Docker container is start...
Difference and principle analysis of Nginx forward and reverse proxy
1. The difference between forward proxy and rever...
MySQL detailed single table add, delete, modify and query CRUD statements
MySQL add, delete, modify and query statements 1....
Mysql backup multiple database code examples
This article mainly introduces the Mysql backup m...
In-depth analysis of MySQL database transactions and locks
Table of contents 1. Basic Concepts ACID 3.AutoCo...
How to install and configure the supervisor daemon under centos7
Newbie, record it yourself 1. Install supervisor....
Several methods to solve the problem of MySQL fuzzy query index failure
When we use the like % wildcard, we often encount...
Analysis of product status in interactive design that cannot be ignored in design
In the process of product design, designers always...
Vue uses OSS to upload pictures or attachments
Use OSS to upload pictures or attachments in vue ...
Installation steps of Ubuntu 20.04 double pinyin input method
1. Set up Chinese input method 2. Set the double ...
Solution to the error when importing MySQL big data in Navicat
The data that Navicat has exported cannot be impo...
Vue implements left and right sliding effect example code
Preface The effect problems used in personal actu...
A brief introduction to the usage of decimal type in MySQL
The floating-point types supported in MySQL are F...