重复的YouTube iframe嵌入视频播放

Question

我正在使用react-youtube(本质上是YouTube iframe嵌入API)，以便在我的web应用程序中呈现视频播放器。

我的web应用程序在加载时打开一个弹出窗口，使用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.

有办法吗?

Answer 1

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

查看这个演示和文章

Answer 2

可以使用本地存储

/* First create a click event to save the command to local storage */
$(".test-btn").click(function() {
let action = $(this).data("action");
localStorage.setItem('vid_state', action);
});

/* on the other window listen for the change in storage */
$(window).on('storage', function(e) {
let storageEvent = e.originalEvent;
if (storageEvent.key == 'vid_state') {
let action = localStorage.getItem('vid_state');
console.log(action);
$("#vid").html(action);
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="test-btn" data-action="play">play</button>
<button class="test-btn" data-action="stop">stop</button>
<div id="vid">Current Play State</div>