HTML5+JavaScript实现本地视频/音频播放器

学习&实践爱好者

已于 2024-04-18 08:44:27 修改

阅读量3k

点赞数 21

文章标签： html5 音视频前端

于 2024-04-18 06:45:00 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/137808746

版权

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"。

更多示例：

如果你想让用户选择所有类型的图像文件，你可以使用通配符：

如果你想让用户只能选择GIF和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