我目前正在使用Python烧瓶建立一个网站,该网站在iframe中显示嵌入式视频。我想在网站上添加一个计时器,以显示当前经过的时间,并且两者应该同步(例如,当访客暂停视频时,计时器也应该暂停)。
所以目前我的烧瓶应用中有类似的内容:
@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>
"""
我发现很难访问iframe中的元素。经过一番搜寻并绊倒了所谓的同源策略之后,似乎无法读取或编辑iframe的内容,除非您来自同一起源(尽管有些人说您可以使用python请求+ beautifulsoup,这会增加有点混乱)。
考虑到使用iframe的麻烦,我开始考虑在不使用iframe的情况下是否可行。如果我在本地托管网站,则可以使用Chrome浏览iframe并找到视频的src。除了使用iframe,我还可以直接在我的烧瓶代码中使用<video>
并将src引用到我刚刚找到的那个。
此方法有效,我以为我已经取得了进展,但是一段时间后返回到我的网站,我注意到该视频不再有效,我猜这是我从iframe抓取的src仅在一定时间内有效。这使我认为直接使用<video>
并不是正确的选择(甚至不推荐托管视频的网站)。
我的目标是使计时器同步吗?
答案 0 :(得分:0)
由于提到了Same-origin Policy,因此无法使用在父页面中运行的JavaScript获取有关其他域中的iframed页面的信息。这是一项安全功能-例如,如果可能的话,可以通过在iframe中打开并读取输入的密码来构造网络钓鱼攻击来捕获在线银行的登录信息,这一点并不重要。
有多种方法可以与iframe中的页面进行通信,例如Window.postMessage() API,但是要使之正常工作,嵌入式页面必须配合使用,即侦听消息并执行您的要求。
使用<video>
可以解决此问题,但是您可以在互联网上找到的大多数视频供应商/发行商都不愿意这样做-有时{{3} },例如您示例中嵌入的BBC(“不得以任何方式更改嵌入代码”)。有时,视频网址会因嵌入,临时或完全不可靠而被阻止。
达到您所描述的正确方法(具有同步计时器的嵌入式播放器中的视频)将使用视频供应商提供的API。