I'm currently building a website using Python flask that shows an embedded video in an iframe. I'd like to add a timer on the website that shows the current time elapsed and the two should be in sync (e.g. when a visitor pauses the video, the timer should also pause).
So currently I have something like this in my flask app:
@app.route('/')
def home():
return """
<h1>Hello world, check out this video:</h1>
<iframe src="https://www.bbc.com/ideas/videos/a-love-letter-to-trees/p076rn7c/player" width="500" height="440" scrolling="no" style="overflow: hidden" allowfullscreen frameborder="0">
</iframe>
"""
I'm finding it difficult to access the elements in the iframe. After some searching and stumbling across something called the same-origin policy, it seems that it's not possible to read or edit contents of an iframe unless you are from the same origin (although some say you can use python requests + beautifulsoup which adds to the confusion somewhat).
Given my trouble with iframes, I started to think whether this was possible without using iframes. If I hosted my site locally, I could use Chrome to look into the iframe and find the src of the video. Instead of using iframe, I can then directly use <video>
in my flask code and refer the src to the one I just found.
This worked and I thought I was making progress but after some time returning to my website, I noticed the video no longer worked and my guess is the src that I grabbed from the iframe is only valid for a certain time. This leads me to think that using <video>
directly is not the right way to go about it (or even discouraged by the website that hosts the video).
Is my goal of having a synced timer possible?