CK's Workshop | 工作室| 极致简约

# 自用在线音视频播放器

平时下载了不少好听的音乐，但是电脑自带的那个音视频播放器启动起来实在是费劲，又懒得再下载其他播放器，于是就想到了用html5自己做一个极简且好用在线播放器挂在博客上，随用随开，也不受设备限制。下面教程介绍如何使用 HTML 和 JavaScript 创建一个简单的本地音视频播放器，允许用户选择本地的音频或视频文件进行播放。

本地图片

# 功能

  • 支持播放本地音频和视频文件：用户可以选择多个音频或视频文件，播放器将动态生成播放列表。
  • 自动播放下一个文件：当前文件播放结束后，播放器将自动播放下一个文件。

# 实现步骤

# 1. 创建 HTML 文件

创建一个新的文件，命名为 local_media_player.html。将以下代码复制并粘贴到文件中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地音视频播放器</title>
    <style>
        .player-container {
            width: 300px;
            margin: 50px auto;
            text-align: center;
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .controls {
            margin-top: 15px;
        }
        button {
            background-color: #007BFF;
            border: none;
            color: white;
            padding: 10px;
            margin-top: 10px;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .playlist {
            list-style: none;
            padding: 0;
        }
        .playlist li {
            cursor: pointer;
            padding: 5px;
            margin: 5px;
            border-bottom: 1px solid #ccc;
        }
        .playlist li:hover {
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>

<div class="player-container">
    <h2>本地音视频播放器</h2>
    <input type="file" id="fileInput" accept="audio/*,video/*" webkitdirectory multiple onchange="loadFiles(event)">
    <audio id="audioPlayer" controls style="margin-top: 20px; display: none;">
        您的浏览器不支持音频元素。
    </audio>
    <video id="videoPlayer" controls style="margin-top: 20px; display: none; max-width: 100%;">
        您的浏览器不支持视频元素。
    </video>
    <ul id="playlist" class="playlist">
        <!-- 播放列表将由JavaScript动态生成 -->
    </ul>
</div>

<script>
    const audioPlayer = document.getElementById('audioPlayer');
    const videoPlayer = document.getElementById('videoPlayer');
    const playlistElement = document.getElementById('playlist');
    let files = [];
    let currentFileIndex = 0;

    function loadFiles(event) {
        files = Array.from(event.target.files).filter(file => file.type.startsWith('audio/') || file.type.startsWith('video/'));
        playlistElement.innerHTML = ''; // 清空播放列表

        files.forEach((file, index) => {
            const listItem = document.createElement('li');
            listItem.textContent = file.name;
            listItem.onclick = () => changeFile(index);
            playlistElement.appendChild(listItem);
        });

        if (files.length > 0) {
            changeFile(0); // 播放第一个文件
        }
    }

    function changeFile(index) {
        currentFileIndex = index;
        const file = files[currentFileIndex];
        const objectURL = URL.createObjectURL(file);

        if (file.type.startsWith('audio/')) {
            videoPlayer.style.display = 'none';
            audioPlayer.style.display = 'block';
            audioPlayer.src = objectURL;
            audioPlayer.play();
        } else if (file.type.startsWith('video/')) {
            audioPlayer.style.display = 'none';
            videoPlayer.style.display = 'block';
            videoPlayer.src = objectURL;
            videoPlayer.play();
        }
    }

    audioPlayer.onended = videoPlayer.onended = function() {
        currentFileIndex = (currentFileIndex + 1) % files.length;
        changeFile(currentFileIndex);
    };
</script>

</body>
</html>

# 2. 保存文件

将文件命名为 player.html，并保存到博客服务器上。

# 3. 打开文件

使用浏览器（如 Chrome、Firefox、Edge）访问博客player.html 文件。

# 4. 选择本地文件夹

在网页中，点击 “选择文件” 按钮，然后选择要播放的音频或视频文件所在的文件夹。您也可以选择多个文件。

# 5. 播放音频或视频

播放器将加载并自动播放第一个文件。您可以从播放列表中选择其他文件进行播放。播放结束后，将自动播放下一个文件。

←