在Web开发过程中，视频和音频传媒的应用越来越普及，然而这些媒体文件并不总是在互联网上，而是源自于本地电脑或存储设备。因此本文将介绍如何使用HTML和JavaScript播放本地的媒体(视频音频)文件的方法。
1.文件选择与上传
对于本地上传，我们首先需要一个文件选择框，HTML提供了一个十分简便的方法。
<form>
<input id="fileInput" type="file" onchange="fileUploaded()" />
</form>
这段代码会生成一个文件上传按钮，当用户点击按钮并选择文件后，会触发一个JavaScript函数，在这里，我们要实现上传文件的功能。以下是一段实现上传功能的完整代码示例，其中 file 是一个类型为 FileList 的对象，可以通过它来访问上传的文件信息。
function fileUploaded() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function() {
//TODO
console.log(reader.result);
};
reader.readAsDataURL(file);
}
2.媒体文件播放
在选中要播放的文件后，我们希望立即播放该文件，并查看该文件的相关信息。需要注意的是，音频和视频的显示方式略有不同。本文将逐一介绍它们的实现方法。
2.1音频文件的播放
对于音频文件的播放，HTML5提供了一个audio标签。以下是一个音频文件播放的例子：
<audio id="audioPlayer" controls>
<source src="" type="audio/ogg">
<source src="" type="audio/mpeg">
</audio>
controls属性实现了一个控制器的显示。两个source元素分别为ogg和mpeg文件的源码URL，type属性用于描述文件的MIME类型。可以通过以下代码来设定文件源:
document.getElementById("audioPlayer").src = "文件路径";
2.2视频文件的播放
与播放音频文件一样，对于视频文件的播放，HTML5提供了一个video标签。以下是一个视频文件播放的例子：
<video id="videoPlayer" width="640" height="360" controls>
<source src="" type="video/mp4">
</video>
controls属性实现了一个控制器的显示，width和height属性可设定播放器的大小。source元素内的type属性应该和你所使用的媒体文件格式一致。可以通过以下代码来设定文件源:
document.getElementById("videoPlayer").src = "文件路径";
3.结束语
通过这篇文章，我们学习了如何使用HTML和JavaScript播放本地的媒体(视频音频)文件的方法。通过文件上传，读取和播放的实现方法，我们可以便捷地应用媒体文件到我们的Web应用中。