jquery视频时间轴

基础概念

jQuery视频时间轴是一种用于控制视频播放进度的用户界面组件。它允许用户通过滑动或点击时间轴上的不同点来跳转到视频的特定时间位置。这种组件通常用于增强用户体验，使用户能够快速定位到视频中的关键部分。

类型

静态时间轴：显示视频的总时长和当前播放位置，但不允许用户直接操作。
动态时间轴：允许用户通过拖动或点击来改变视频的播放位置。
标记时间轴：在时间轴上添加标记，指示视频中的重要时刻或章节。

应用场景

视频教程和在线课程
电影和电视节目预告片
音乐视频
企业宣传视频

示例代码

以下是一个简单的jQuery视频时间轴的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Video Timeline</title>
    <style>
        #video-timeline {
            width: 100%;
            background: #ddd;
            position: relative;
            height: 10px;
        }
        #video-timeline .timeline-thumb {
            background: #007bff;
            height: 10px;
            position: absolute;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <video id="my-video" width="640" height="360" controls>
        <source src="your-video-file.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div id="video-timeline">
        <div class="timeline-thumb"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var video = $('#my-video')[0];
            var timeline = $('#video-timeline');
            var thumb = $('.timeline-thumb');

            video.addEventListener('timeupdate', function() {
                var percent = video.currentTime / video.duration;
                thumb.css('left', percent * 100 + '%');
            });

            timeline.on('mousedown', function(e) {
                var offsetX = e.offsetX;
                $(document).on('mousemove', function(e) {
                    var newPercent = e.offsetX / timeline.width();
                    thumb.css('left', newPercent * 100 + '%');
                    video.currentTime = newPercent * video.duration;
                });
                $(document).on('mouseup', function() {
                    $(document).off('mousemove mouseup');
                });
                return false;
            });
        });
    </script>
</body>
</html>