如何在同一个HTML5播放器中放大视频并切换视频流？

Question

我的视频将分为4个视频。

首先播放器将流式传输原始视频的较低分辨率，然后用户可以放大视频以查看更多细节，我需要播放器流式传输4个视频中的一个 - 分辨率更高 - 基于用户放大了。

如何使用VideoJS或任何其他视频播放器制作？

Answer 1

搜索后，这就是答案......

要放大视频，您可以按照本教程：Zooming and rotating for video in HTML5 and CSS3

对于同一播放器中视频的切换流式传输，您可以通过changing the source on html5 video tag进行调整，并进行一些计算以了解用户放大的位置，从而更改源视频。

Answer 2

由于没有回复，让我分析一下这个问题。这绝不是一个完整的答案，但其他人可能会回答部分问题：

首先，播放器将流式传输较低分辨率的原始视频

这意味着您需要创建/使用视频流。您可以使用大量插件进行视频流，这取决于您的需求。您可以考虑使用例如C＃的System.IO对象自己编写它并以字节为单位转换视频（并将其重新组合在一起）只需在此过程的步骤中使用单独的视频文件即可轻松实现分辨率。 （较低分辨率仅用于流式传输）

然后用户可以放大视频以查看更多细节，我需要播放器根据用户放大的位置流式传输4个视频中的一个 - 分辨率更高。

所以你需要触发缩放效果。这意味着您需要检测缩放。如果你想要一个基于浏览器的应用程序，这可以在webbrowser中使用Javascript。触发该缩放后，您可以检索鼠标在屏幕上/ div中或某种叠加层上的位置。根据此位置，您可以显示另一个流。

如何使用VideoJS或任何其他视频播放器制作？

基本上，上述步骤是我如何开始研究这个具体案例。考虑到您的VideoJS作为建议，我认为这是基于浏览器的。这可能意味着使用Javascript库，可能与服务器端语言结合使用。

就我能走的而言。也许有人可以拿起我写的东西的特定部分，并帮助你更进一步。

度过美好的一天！