Feed a Python list to js to highlight sections in a custom seekbar for html page in Flask

Question

I currently have a Flask app in Python which displays a video. Below the video is a custom seekbar. This seekbar has a single highlighted section that I manually added into the js script (I have noted this section in the below code). I would like to:

create more highlighted sections in the seekbar by feeding the values of a python list to the js code

Please see the below files

app.py:

from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
    list_of_timestamps = [30, 50, 70, 90]
    duration_of_timestamps = [2, 5, 10, 40]
    return render_template('index.html', 
                           list_of_timestamps=list_of_timestamps, 
                           duration_of_timestamps=duration_of_timestamps)

if __name__=='__main__':
    app.run(debug=True)

templates/index.html:

<!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="highlight"></div>
        <div id="progress"></div>
    </div>
    <script src="{{url_for('static', filename='js/custom.js')}}></script>
</body>
</html>

static/css/style.css:

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

#highlight {
    position: absolute;
    height: 100%;
    background: red;
    width: 0; /* will be set dynamically */
    left: 0; /* will be set dynamically */
    z-index:1; #keep the highlight above the progress*/
}

#progress {
    position: absolute;
    height: 100%;
    background: rgba(170, 166, 166, 0.5);
    width: 0;
    z-index:2; #keep the progress below the highlight */
}

static/js/custom.js:

const video = document.getElementById("video");
const customSeekbar = document.getElementById("custom-seekbar");
const highlight = document.getElementById("highlight");
const progress = document.getElementById("progress");

const highlightStart = 30; // this is the start point in seconds which I would like to somehow feed the python list list_of_timestamps to
const highlightDuration = 10; // This is where i would like duration_of_timestamps to go

video.addEventListener("canplay", function() {
    const highlightWidth = (highlightDuration / video.duration) * 100;
    const highlightPosition - (highlightStart / video.duration) * 100;
    highlight.style.width = highlightWidth + "%";
    highlight.style.left = highlightPosition + "%";
});

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

Asked By: Callum Brown

||

Source

Answer 1

found an answer, posting for anyone stuck on similar:

index.html

<!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>
    <script src="{{url_for('static', filename='js/custom.js')}}></script>
</body>
</html>

custom.js:

const video = document.getElementById("video");
const customSeekbar = document.getElementById("custom-seekbar");

const pDiv = document.createElement("div");
pDiv.id = "progress";
customSeekbar.appendChild(pDiv);

const highlightStart = [30, 50, 70, 90];
const highlightDuration = [2, 5, 10, 40];

video.addEventListener("canplay", function() {
    for(var i=0; i<highlightStart.length; i+=1) {
        const hDiv = document.createElement("div");
        hDiv.id = "highlight";
        customSeekbar.appendChild(hDiv);
        var highlightWidth = (highlightDuration / video.duration) * 100;
        var highlightPosition - (highlightStart / video.duration) * 100;
        highlight.style.width = highlightWidth + "%";
        highlight.style.left = highlightPosition + "%";
    };
});

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

Answered By: Callum Brown

Feed a Python list to js to highlight sections in a custom seekbar for html page in Flask

Question:

Answers: