HTML和JavaScript播放本地的媒体(视频音频)文件

1、使用HTML和JavaScript播放本地视频文件的示例，源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
 
<html >
 
<head>
 
       <meta charset="utf-8">
 
       <title>播放本地的视频文件</title>
 
</head>
 
<body>
 
<h3><center>视频播放测试<center></h3>
 
<hr color="#666666">
 
<input type="file" id="file" οnchange="onInputFileChange()">
 
<br/>
 
<video id="video_id"  width="520" height="360" controls autoplay loop>@ www.xuepai.net你的浏览器不能支持HTML5视频</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>

2、使用HTML和JavaScript播放本地音频文件的示例，@ www.haoshilao.net源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
 
<html >
 
<head>
 
       <meta charset="utf-8">
 
       <title>播放本地的音频文件</title>
 
</head>
 
<body>
 
<h3><center>本地的音频播放测试<center></h3>
 
<hr color="#666666">
 
<input type="file" id="file" οnchange="onInputFileChange()">
 
<br/>
 
<audio id="audio_id" controls autoplay loop>好问提示你的浏览器不能支持HTML5音频 </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>

 

posted @ 2026-01-06 20:20  zxcva  阅读(68)  评论(0)    收藏  举报