零度HTML版的高速视频播放器

admin · 发表于 2025-10-2 00:14:13

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>播放本地视频文件</title>
    <style>
        body {
            font-family: sans-serif;
            max-width: 900px;
            margin: 25px auto;
            padding: 0 20px;
        }
        .container {
            background: #f9f9f9;
            padding: 20px;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        h3 {
            color: #333;
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .controls {
            margin: 15px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        #customSpeed, #fileInput {
            padding: 5px 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        video {
            width: 100%;
            border-radius: 4px;
            border: 1px solid #eee;
        }
         
        /* 自定义视频控件样式 - 透明进度条背景 */
        video::-webkit-media-controls-timeline {
            background: transparent !important;
        }
         
        /* 对于Firefox浏览器 */
        video::-moz-range-track {
            background: transparent !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>播放本地视频文件</h3>
        <div class="controls">
            <label for="customSpeed">输入播放倍数:</label>
            <input type="number" id="customSpeed" placeholder="自定义倍数">
            <input type="file" id="fileInput" accept="video/*">
        </div>
        <video id="videoPlayer" width="640" height="360" controls></video>
    </div>
 
    <script>
        const fileInput = document.getElementById('fileInput');
        const video = document.getElementById('videoPlayer');
        const speedInput = document.getElementById('customSpeed');
 
        // 设置播放速度
        const setSpeed = () => {
            if (speedInput.value) video.playbackRate = parseFloat(speedInput.value);
        };
 
        // 播放选中的视频
        fileInput.addEventListener('change', () => {
            if (fileInput.files[0]) {
                video.src = URL.createObjectURL(fileInput.files[0]);
                video.load();
                setSpeed();
            }
        });
 
        // 监听播放速度变化
        speedInput.addEventListener('input', setSpeed);
    </script>
</body>
</html>