Javascript 如何在我的网站上显示与嵌入式视频运行时间同步的计时器

我目前正在使用Python flask构建一个网站，该网站在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>    
    """

@app.route（“/”）
def home（）：
返回“”
你好，世界，请观看此视频：
"""

我发现很难访问iframe中的元素。在搜索了一些称为“同源策略”的内容后，似乎不可能读取或编辑iframe的内容，除非您来自同一个来源（尽管有人说您可以使用python请求+美化组，这在某种程度上增加了混淆）

考虑到iframes的问题，我开始考虑不使用iframes是否可行。如果我在本地托管我的站点，我可以使用Chrome查看iframe并找到视频的src。不使用iframe，我可以在我的flask代码中直接使用

，并将src引用到我刚刚找到的src

这是有效的，我认为我正在取得进展，但在回到我的网站一段时间后，我注意到视频不再有效，我猜我从iframe抓取的src只在一定时间内有效。这让我想到，直接使用

不是正确的方法（甚至被视频宿主网站所阻止）

---

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

由于上面提到的问题，使用在父页面中运行的JavaScript无法获取不同域上的iframed页面的信息。这是一项安全功能-如果这是可能的，那么通过在iframe中打开并读取输入的密码来分析网络钓鱼攻击以捕获网上银行的登录信息就很简单了

在iframe中有与页面通信的方法，例如，但要使其工作，嵌入式页面必须配合，即侦听消息并执行您要求的任何操作

使用

可以解决这个问题，但您在互联网上找到的大多数视频供应商/发布商不希望这样做-有时，例如您的示例中的BBC嵌入（“嵌入代码不得以任何方式更改”）。其他时候，视频url将被阻止嵌入、临时或完全不可靠

---

要实现您所描述的内容（在带有同步定时器的嵌入式播放器中播放视频），正确的方法是使用视频供应商提供的API。

您能稍微描述一下您的项目吗？您是专门使用BBC嵌入式播放器，还是通常使用iframe中的视频？您是否可以切换到具有API的视频服务，如YouTube或Vimeo？您所描述的内容肯定很难（如果不是不可能的话）使用您的设置，而且很可能不值得付出努力。谢谢您的回复。我知道YouTube有一个API，但我感兴趣的是可以在互联网上找到的普通视频，这些视频在很多情况下都没有API。我对你说这很难的原因很感兴趣。是因为我无法查看iframe的内容吗？如果是这样的话，我一直在想Chrome中的开发工具是如何做到的，以及是否有可能使用而不是OK，我写了一个答案，并给出了一些解释和MDN的链接，这样你就可以阅读了。至于开发工具，它们无处不在，因为它们是浏览器的一部分——我认为大多数安全措施不适用于它们。