How to play local media (video and audio) files using HTML and JavaScript

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

CSS and JS to achieve romantic meteor shower animation

1. Rendering 2. Source code HTML < body > &...

Solution to MySQL IFNULL judgment problem

Problem: The null type data returned by mybatis d...

Solve the problem of "Welcome to nginx on Fedora!" after installing nginx on Centos7, and there is no default.conf file in the conf.d directory

Problem Description Install nginx on Tencent Clou...

Tutorial diagram of installing centos7.3 on vmware virtual machine

VMware Preparation CentOS preparation, here is Ce...

A brief discussion on the implementation principle of Webpack4 plugins

Table of contents Preface know Practice makes per...

MySQL dual-master (master-master) architecture configuration solution

In enterprises, database high availability has al...

How to count the number of specific characters in a file in Linux

Counting the number of a string in a file is actu...

Use Rem layout to achieve adaptive

I have written an article about mobile adaptation...

Perfect solution for theme switching based on Css Variable (recommended)

When receiving this requirement, Baidu found many...

Detailed explanation of Linux redirection usage

I believe that everyone needs to copy and paste d...

How to create a Docker repository using Nexus

The warehouse created using the official Docker R...

Detailed explanation of creating and calling MySQL stored procedures

Table of contents Preface Stored Procedure: 1. Cr...

Quickly solve the problems of incorrect format, slow import and data loss when importing data from MySQL

If you want to solve the slow problem once and fo...

How to use physics engine joints in CocosCreator

Table of contents mousejoint mouse joint distance...

VMware's detailed tutorial on how to create a Linux virtual machine and set up a virtual machine network

How to create a Linux virtual machine in VMware a...