Chromecast 无法播放多个 HTML5 视频答案

【问题标题】：Chromecast not playing multiple HTML5 videosChromecast 无法播放多个 HTML5 视频
【发布时间】：2018-01-03 09:39:59
【问题描述】：

我在单页上有 2 个视频播放器。在桌面上，一切正常，两个视频播放器都在播放视频。但是当我尝试将此页面投射到 Chromecast（通过 Google Chrome 扩展程序或通过https://demille.github.io/url-cast-receiver/）时，只有第一个视频播放器处于活动状态并正在播放，第二个视频播放器无法正常工作。

我尝试调试它，看起来第二个视频以视频 readyState=1 结束（第一个视频的 readyState=4）

有没有办法解决这个问题？（我需要在单个页面上使用多个视频播放器，因此仅使用一个播放器并切换视频文件 URL 不是解决方案）

网址：http://iuvomedia.eu/chromecast/

【问题讨论】：

您是要同时播放两个视频，还是让用户选择播放/投射哪个视频？
不包括在我提到的示例中，但只有一个视频正在播放，而其他视频播放器只是加载视频数据并被隐藏。当第一个视频播放完毕后，第二个视频会显示并由 play() 函数调用。但是可见性并不重要，因为即使两个视频都可见，它也不会播放。当另一个视频播放器正在播放视频时，看起来 Chromecast 无法从第二个播放器加载视频数据。我还尝试在第二个视频上调用 load() 函数，但没有成功 - 加载视频和状态 readyState=1（已加载元数据）。
你看过 Chromecast JS api 吗？ developers.google.com/cast/docs/chrome_sender_integrate
是的，我已经看过了，但这对我来说不是解决方案，我需要 2 个或更多活跃的视频播放器同时在网页上还会有其他内容，例如文本和图片，所以我不需要只有视频播放器......

标签： html video video-streaming html5-video chromecast

【解决方案1】：

您不能拥有多个活动媒体元素。

我的意思是，你可以有两个媒体元素，一个播放没有任何音频的视频，第二个只播放音频。

您不能同时拥有两个活动视频或两个活动音频管道。

在这里查看： Create multiple instances of html video object

【讨论】：

什么是“主动媒体元素”？当我播放一个视频播放器而第二个暂停（仅预加载数据）时，这种情况是否有两个活动元素？我需要第二个视频播放器来预加载视频，以便在第一个播放器完成播放时准备好播放...
这就是您在问题中所说的视频

【解决方案2】：

如果您希望播放一个视频并预加载另一个视频，那么您应该制作一个要播放的视频队列。 Chromecast 将一次播放单个视频，结束时会自动加载队列中的下一个视频。

有关自动播放和排队的信息，您可以访问https://developers.google.com/cast/docs/autoplay

【讨论】：