javascript - 重复的 YouTube iframe 嵌入视频播放

问题描述

我正在使用react-youtube（本质上是YouTube iframe embed API）以便在我的网络应用程序中呈现视频播放器。

我的网络应用程序在加载时打开一个弹出窗口，使用window.open(). 它是相同的来源，因此两个窗口都可以通过代码进行交互，并且我可以操作弹出 DOM。

我想将原始视频（视频 A）从基本 Web 应用程序播放器克隆到<video>位于弹出窗口（视频 B）中的单独元素，以便它将对应于原始视频播放器中的所有用户操作（播放、暂停、寻找、改变质量等）。

我知道这可以通过复制整个播放器并使用onPlay,onPause和其他回调在第二个播放器中触发相同的操作来完成 - 但对我来说理想的解决方案是克隆视频输出本身。
显然，通过画布进行克隆并不是一个好的解决方案。

我也尝试使用player.getIframe()并使用,到<video>元素（然后捕获其流），但后来我得到：。iframe.contentWindow.document.getElementsByClassName("video-stream html5-main-video")

SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame

有什么办法吗？

标签： javascriptreactjsyoutube-apihtml5-videoyoutube-iframe-api

您应该尝试captureStream() - 它从一个<video>元素捕获 MediaStream，因此您可以将其设置为另一个<video>元素的 srcObject。

请参阅此演示和文章

javascript - 重复的 YouTube iframe 嵌入视频播放

问题描述

解决方案

推荐阅读