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

在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应用中。