复制YouTube iframe嵌入视频播放
我使用react-youtube (本质上是YouTube iframe embed API)来渲染我的web应用程序中的视频播放器。
我的web应用程序使用window.open()在加载时打开一个弹出窗口。它是同源的，所以两个窗口都可以通过代码进行交互，我可以操作弹出的DOM。
我想将原始视频(视频A)从基础web应用程序播放器克隆到一个单独的<video>元素，位于弹出窗口(视频B)中，以便它将对应于原始视频播放器中的所有用户操作(播放、暂停、查找、更改质量等)。
我知道这可以通过复制整个播放器并使用onPlay、onPause和其他回调在第二个播放器中触发相同的操作来完成-但对我来说，理想的解决方案是克隆视频输出本身。
显然，用画布进行克隆并不是一个好的解决方案。
我还尝试使用player.getIframe()，并使用iframe.contentWindow.document.getElementsByClassName("video-stream html5-main-video")连接到<video>元素，
(然后捕获它的流)，但随后我得到：
SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame。
有什么办法可以做到吗？
回答 2
Stack Overflow用户
发布于 2021-01-28 04:45:25
您应该尝试captureStream() -它从一个<video>元素捕获MediaStream，因此您可以将其设置为另一个<video>元素的srcObject。
Stack Overflow用户
发布于 2021-01-28 04:49:50
为此，您可以使用本地存储。
/* 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>
https://stackoverflow.com/questions/65783418
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号