jquery写一个视频播放器-CFANZ编程社区

使用 jQuery 创建一个简单的视频播放器相对简单，下面我会提供一个基本的实现方案。这个视频播放器包括播放、暂停、音量调节和进度条等功能。你可以根据需要进一步定制和扩展功能。

1. HTML 结构

我们将创建一个简单的 HTML 结构来包含视频元素、控制按钮、音量和进度条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Player with jQuery</title>
    <style>
        /* 视频播放器样式 */
        .video-player {
            position: relative;
            width: 640px;
            margin: auto;
        }
        video {
            width: 100%;
            display: block;
        }
        .controls {
            position: absolute;
            bottom: 10px;
            left: 10px;
            width: calc(100% - 20px);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .play-btn, .pause-btn {
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
        .play-btn {
            display: none;
        }
        .progress-bar {
            width: 100%;
            height: 5px;
            background-color: #ddd;
            cursor: pointer;
        }
        .progress {
            height: 100%;
            background-color: #ff4500;
            width: 0;
        }
        .volume-bar {
            width: 100px;
            height: 5px;
            background-color: #ddd;
            cursor: pointer;
        }
        .volume {
            height: 100%;
            background-color: #ff4500;
            width: 50%;
        }
    </style>
</head>
<body>

    <div class="video-player">
        <video id="video" src="your-video-file.mp4" type="video/mp4"></video>
        <div class="controls">
            <button class="play-btn">Play</button>
            <button class="pause-btn">Pause</button>
            <div class="progress-bar" id="progress-bar">
                <div class="progress" id="progress"></div>
            </div>
            <div class="volume-bar" id="volume-bar">
                <div class="volume" id="volume"></div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            var video = $('#video')[0];
            var playBtn = $('.play-btn');
            var pauseBtn = $('.pause-btn');
            var progressBar = $('#progress-bar');
            var progress = $('#progress');
            var volumeBar = $('#volume-bar');
            var volume = $('#volume');

            // 播放视频
            playBtn.on('click', function () {
                video.play();
                playBtn.hide();
                pauseBtn.show();
            });

            // 暂停视频
            pauseBtn.on('click', function () {
                video.pause();
                pauseBtn.hide();
                playBtn.show();
            });

            // 更新进度条
            video.addEventListener('timeupdate', function () {
                var value = (video.currentTime / video.duration) * 100;
                progress.width(value + '%');
            });

            // 点击进度条跳转
            progressBar.on('click', function (e) {
                var offset = $(this).offset();
                var clickedPosition = e.pageX - offset.left;
                var newTime = (clickedPosition / $(this).width()) * video.duration;
                video.currentTime = newTime;
            });

            // 音量调节
            volumeBar.on('click', function (e) {
                var offset = $(this).offset();
                var clickedPosition = e.pageX - offset.left;
                var volumeValue = clickedPosition / $(this).width();
                video.volume = volumeValue;
                volume.width(volumeValue * 100 + '%');
            });

            // 页面加载时显示播放按钮
            playBtn.show();
            pauseBtn.hide();
        });
    </script>

</body>
</html>

2. 代码说明

HTML

<video> 元素用来嵌入视频文件，用户可以播放、暂停该视频。
控制面板包括：

播放/暂停按钮：使用 play-btn 和 pause-btn 类。
进度条：progress-bar 元素用于显示视频播放进度，progress 用来动态更新进度。
音量条：volume-bar 用来调节视频音量，volume 用来显示当前音量的百分比。

CSS

视频播放器整体样式在 .video-player 中定义。
控制面板的样式在 .controls 中设置，确保按钮和进度条布局整齐。
进度条和音量条的宽度可以调整，确保其响应式显示。

jQuery

播放按钮：点击播放按钮时，视频开始播放，同时显示暂停按钮并隐藏播放按钮。
暂停按钮：点击暂停按钮时，视频暂停，切换按钮的显示。
进度条：通过监听 timeupdate 事件来更新进度条的宽度。当用户点击进度条时，视频跳转到相应的时间。
音量条：用户可以点击音量条来调节视频的音量，点击的位置决定音量的大小。

3. 进一步的功能扩展

全屏模式：你可以通过 requestFullscreen API 来实现视频的全屏模式。
播放速度调节：通过 video.playbackRate 来控制视频的播放速度。
时间显示：你可以在控制面板中显示当前播放时间和总时长。

这个示例是一个简单的视频播放器实现，适用于基本的播放、暂停、音量控制和进度显示。你可以在此基础上进行扩展，加入更多的功能。