重复的 YouTube iframe 嵌入视频播放

Posted 2023-05-08

【中文标题】重复的 YouTube iframe 嵌入视频播放

【英文标题】：Duplicate YouTube iframe embed video playback

【发布时间】：2021-04-23 06:37:20

【问题描述】：

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

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

我想将原始视频（视频 A）从基础网络应用播放器克隆到一个单独的 <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。

有什么办法吗？

【问题讨论】：

为什么需要克隆视频输出？

@weltschmerz 我希望用户能够在不显示其操作（如播放/暂停/搜索等）的情况下共享视频输出。解释完整的用例超出了范围，但这将完全解决我的问题。

您是否可以选择简单地将按钮隐藏在播放器中并在其他地方显示自定义按钮？

@weltschmerz 我需要将用户在视频 A（控制器）上执行的所有操作复制到视频 B（广播）上 - 因此隐藏视频 B 上的控件将是有益的，但我仍然会需要为每个动作实现回调以触发视频 B 上的相同动作（onPlay、onPause 等）。这就是为什么我想检查是否有更简单的解决方案。

@yunzen 同一个浏览器，但是视频B在从视频A的窗口打开的弹出窗口中（使用window.open()）。它是同一来源，因此两个窗口都可以通过代码进行交互。

【参考方案1】：

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

看到这个demo和article

【讨论】：

这是一个很酷的主意，问题是视频在不同来源的 iframe 内，所以当我尝试使用 iframe.contentWindow.document.getElementsByClassName("video-stream html5-main-video") 捕获它的流时，我得到：Uncaught DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

【参考方案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>

【讨论】：

问题不在于发送事件——正如我所说，这可以通过 API（onPlay、onPause 等——但不是我要找的东西

我明白了。不过我认为这是不可能的。