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
MySQL 8.0.15 installation and configuration graphic tutorial
This article records the installation and configu...
Some indicators of excellent web front-end design
The accessibility of web pages seems to be somethi...
Some data processing methods that may be commonly used in JS
Table of contents DOM processing Arrays method Su...
Implementation of MySQL custom list sorting by specified field
Problem Description As we all know, the SQL to so...
Detailed explanation of Vuex overall case
Table of contents 1. Introduction 2. Advantages 3...
MySQL 5.7 and above version download and installation graphic tutorial
1. Download 1. MySQL official website download ad...
Summary of MySQL slow log practice
Slow log query function The main function of slow...
Detailed summary of mysql sql statements to create tables
mysql create table sql statement Common SQL state...
MySQL slow query operation example analysis [enable, test, confirm, etc.]
This article describes the MySQL slow query opera...
Linux server quick uninstall and install node environment (easy to get started)
1. Uninstall npm first sudo npm uninstall npm -g ...
Use CSS to set the width of INPUT in TD
Recently, when I was using C# to make a Web progra...
MySQL Database Iron Laws (Summary)
Good database specifications help reduce the comp...
Combining XML and CSS styles
student.xml <?xml version="1.0" enco...
Mysql case analysis of transaction isolation level
Table of contents 1. Theory SERIALIZABLE REPEATAB...
SQL Aggregation, Grouping, and Sorting
Table of contents 1. Aggregate Query 1. COUNT fun...