在Flask页面中传递Python列表到JS实现自定义进度条多段高亮

以下是实现从Python列表传递数据到JS，生成多段进度条高亮的完整解决方案：

步骤1：修改HTML传递Python数据到JS #

在HTML中添加脚本块，将Flask传入的Python列表转换为JS可直接使用的数组，同时调整进度条结构为高亮容器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{url_for('static',filename='css/style.css')}}">
    <title>Custom Video Player</title>
</head>
<body>
    <video id="video" controls width="800">
        <source src="{{url_for('static', filename='videos/1.mp4')}}" type="video/mp4">
    </video>
    <div id="custom-seekbar" onclick="seek(event)">
        <!-- 改为容器用于存放多个高亮段 -->
        <div id="highlights-container"></div>
        <div id="progress"></div>
    </div>
    <!-- 先传递Python数据到JS环境 -->
    <script>
        const highlightStarts = {{ list_of_timestamps|tojson }};
        const highlightDurations = {{ duration_of_timestamps|tojson }};
    </script>
    <script src="{{url_for('static', filename='js/custom.js')}}"></script>
</body>
</html>

步骤2：调整CSS支持多段高亮样式 #

将原单个高亮的ID选择器改为类选择器，支持复用样式：

#custom-seekbar {
    width: 800px;
    height: 10px;
    background: #ddd;
    position: relative;
    margin-top: 5px;
    margin-inline-start: 15px;
    cursor: pointer;
}

/* 类选择器替代ID，支持多个高亮元素 */
.highlight {
    position: absolute;
    height: 100%;
    background: red;
    width: 0;
    left: 0;
    z-index:1; /* 高亮层在进度条上方 */
}

#progress {
    position: absolute;
    height: 100%;
    background: rgba(170, 166, 166, 0.5);
    width: 0;
    z-index:2; /* 进度层在高亮下方 */
}

步骤3：修改JS动态生成多段高亮 #

遍历从Python传递来的数组，计算每个高亮段的位置和宽度，动态创建DOM元素：

const video = document.getElementById("video");
const customSeekbar = document.getElementById("custom-seekbar");
const highlightsContainer = document.getElementById("highlights-container");
const progress = document.getElementById("progress");

video.addEventListener("canplay", function() {
    // 清空容器避免重复生成高亮
    highlightsContainer.innerHTML = '';
    
    // 遍历所有时间戳和时长
    for (let i = 0; i < highlightStarts.length; i++) {
        const start = highlightStarts[i];
        const duration = highlightDurations[i];
        
        // 计算高亮段的百分比宽度和位置
        const highlightWidth = (duration / video.duration) * 100;
        const highlightPosition = (start / video.duration) * 100;
        
        // 创建高亮元素并设置样式
        const highlightElement = document.createElement('div');
        highlightElement.classList.add('highlight');
        highlightElement.style.width = `${highlightWidth}%`;
        highlightElement.style.left = `${highlightPosition}%`;
        
        // 添加到容器中
        highlightsContainer.appendChild(highlightElement);
    }
});

function seek(event) {
    const percent = event.offsetX / customSeekbar.offsetWidth;
    video.currentTime = percent * video.duration;
}

关键说明 #

• 使用Flask的|tojson过滤器可以安全地将Python序列转换为JS数组，避免引号转义等语法问题
• 采用容器+动态生成元素的方式，实现任意数量的高亮段
• 类选择器替代ID选择器，解决HTML中ID唯一性限制
• 在canplay事件中清空容器，防止视频重新加载时重复生成高亮

内容的提问来源于stack exchange，提问作者Callum Brown