Issue
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;
}
Solution
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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.