如何在我的网站上显示与嵌入视频的已用时间同步的计时器

Question

我目前正在使用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。我可以直接在我的烧瓶代码中使用<video>而不是使用iframe，并将src引用到我刚刚找到的那个。

这工作，我认为我正在取得进展，但经过一段时间回到我的网站后，我注意到视频不再有效，我的猜测是我从iframe抓取的src只在一段时间内有效。这让我觉得直接使用<video>不是正确的方法（或者甚至是托管视频的网站不鼓励）。

我的目标是同步计时器吗？

Answer 1

由于提到的Same-origin Policy，无法使用在父页面中运行的JavaScript获取有关不同域上的iframed页面的信息。这是一个安全功能 - 如果可行的话，例如，通过在iframe中打开并读取输入的密码来解释网络钓鱼攻击以捕获在线银行的登录信息将是微不足道的。

有一些方法可以与iframe中的页面进行通信，例如Window.postMessage() API，但为了工作，嵌入式页面必须合作，即收听消息并做任何你要求的事情。

使用<video>可以解决这个问题，但是你可以在互联网上找到的大多数视频供应商/出版商都不希望这样做 - 有时directly disallowing it in their Terms of Use，例如BBC嵌入你的例子中（“嵌入代码一定不能以任何方式改变“）。其他时候，视频网址将被阻止嵌入，临时或仅仅是不可靠的。

实现您所描述内容的正确方法（使用同步计时器的嵌入播放器中的视频）将使用视频供应商提供的API。