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

【问题标题】：How can I zoom into video and switch streaming of videos in the same HTML5 player?如何在同一个 HTML5 播放器中放大视频并切换视频流？
【发布时间】：2014-07-31 19:16:11
【问题描述】：

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

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

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

【问题讨论】：

我认为这可能会在到达线路之前就发出来，但这听起来更像是一个编程问题而不是视频制作问题。在实际的面向编程的 QA 网站上，您可能会有更好的运气。
如何将视频分成四部分？
@mootookoi 使用 ffmpeg (video.stackexchange.com/questions/4563/…) 裁剪视频

标签： html video-streaming video.js

【解决方案1】：

经过搜索，这就是答案……

要放大视频，您可以按照以下教程进行操作：Zooming and rotating for video in HTML5 and CSS3

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

【讨论】：

【解决方案2】：

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

首先播放器会以较低的分辨率播放原始视频，

这意味着您需要创建/使用视频流。有很多插件可以用于视频流，这取决于你想要什么。您可以考虑使用例如 C# 的 System.IO 对象自己编写它并以字节为单位转换视频（然后将其放回原处）只需为该过程的这一步创建一个单独的视频文件，就可以最容易地达到分辨率。（仅用于流式传输的低分辨率）

然后用户可以放大视频以查看更多细节，我需要播放器播放 4 个视频之一 - 分辨率更高 - 基于用户放大的位置。 p>

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

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

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

这就是我能做到的。也许有人可以拿起我写的东西的特定部分并帮助你更进一步。

祝你有美好的一天！

【讨论】：