HTML5+JavaScript实现本地视频/音频播放器
HTML5 提供了本地视频和音频播放器的支持，通过 <video> 和 <audio> 标签，这些标签支持多种媒体格式，并且可以通过 JavaScript 进行控制，实现功能比较完整的本地视频音频播放器。
HTML5的<video>和<audio>标签是HTML5中新增的两个标签，分别用于在网页播放视频和音频内容。<video>标签主要用于播放视频，同时也支持播放音频。<audio>标签主要用于播放音频，不支持播放视频。
本地视频/音频播放器
使用HTML5的<video>标签实现本地视频/音频播放器
运行效果
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>本地视频/音频播放器</title>
<style>
/* 样式可以根据需要自定义 */
#video-player {
width: 640px;
height: 360px;
}
#controls {
margin-top: 10px;
}
</style>
</head>
<body>
<video id="video-player" controls>
您的浏览器不支持 Video 标签。
</video>
<div id="controls">
<input type="file" id="file-input" accept="video/*, audio/*">
<button id="play-video">播放</button>
</div>
<script>
const videoPlayer = document.getElementById('video-player');
const fileInput = document.getElementById('file-input');
const playVideoButton = document.getElementById('play-video');
fileInput.addEventListener('change', function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
// 创建URL对象
const url = URL.createObjectURL(file);
// 设置视频源
videoPlayer.src = url;
};
// 读取文件内容
reader.readAsDataURL(file);
}
});
playVideoButton.addEventListener('click', function() {
if (videoPlayer.readyState >= 3) { // 确保视频已经加载完毕
videoPlayer.play();
} else {
alert('视频还未加载完毕，请稍后再试。');
}
});
</script>
</body>
</html>
使用HTML5的<video>标签实现功能本地视频/音频播放器比较精炼。
其中<input type="file" id="file-input" accept="video/*, audio/*"> 是一个HTML的输入元素，用于让用户从其计算机中选择一个或多个文件。
<input type="file">: 这告诉浏览器这是一个文件输入字段，用户可以通过点击它来选择文件。
id="file-input": 这是一个唯一的标识符，用于在JavaScript中引用这个元素。通过这个ID，你可以添加事件监听器、获取用户选择的文件等。
accept="video/*, audio/*": 这是一个属性，用于限制用户可以选择的文件类型。accept 属性的语法accept="MIME_type/subtype"：指定一种文件类型。MIME（Multipurpose Internet Mail Extensions）类型是一种标识文档、文件或字节流的性质和格式的标准。它由两部分组成：类型（如 text、image、audio、video 等）和子类型（具体的文件格式，如 html、jpeg、mp3 等）。可以指定多个值，用逗号分隔，如本句；可以使用星号（*）作为通配符，如表示接受所有视频格式。如果你只想接受特定格式的视频，比如MP4，你可以使用 accept="video/mp4"。
更多示例：
如果你想让用户选择所有类型的图像文件，你可以使用通配符：
<input type="file" name="pic" accept="image/*">
如果你想让用户只能选择GIF和JPEG图像文件，你可以这样写：
<input type="file" name="pic" accept="image/gif, image/jpeg">
本地音频播放器
使用HTML5的<audio>标签实现本地音频播放器
先给出运行效果：
源码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>本地音频播放器</title>
<style>
/* 样式可以根据需要自定义 */
#audio-player {
width: 620px;
height: 160px;
}
#controls {
margin-top: 10px;
}
</style>
</head>
<body>
<audio id="audio-player" controls>
您的浏览器不支持 audio 标签。
</audio>
<div id="controls">
<input type="file" id="file-input" accept="audio/*">
<button id="play-audio">播放</button>
</div>
<script>
const audioPlayer = document.getElementById('audio-player');
const fileInput = document.getElementById('file-input');
const playAudioButton = document.getElementById('play-audio');
fileInput.addEventListener('change', function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
// 创建URL对象
const url = URL.createObjectURL(file);
// 设置视频源
audioPlayer.src = url;
};
// 读取文件内容
reader.readAsDataURL(file);
}
});
playAudioButton.addEventListener('click', function() {
if (audioPlayer.readyState >= 3) { // 确保视频已经加载完毕
audioPlayer.play();
} else {
alert('视频还未加载完毕，请稍后再试。');
}
});
</script>
</body>
</html>
附录
HTML5超级链接、图片与多媒体https://blog.csdn.net/cnds123/article/details/113782944
使用HTML和JavaScript实现用打开窗口播放本地的媒体(视频音频)文件https://blog.csdn.net/cnds123/article/details/113835795
