如何使用自定义播放器和自动转码嵌入视频？

Question

我需要将视频嵌入到我的网络应用程序中并且有以下要求：

• 视频需要自动转码成不同的 决议
• 需要选择播放速度
• 需要在移动设备上工作
• 我需要修改播放器
• 视频需要可由非软件开发人员上传 => 用于视频上传和管理的用户界面

从平台嵌入视频的问题在于，您通常必须使用 iframe 来执行此操作。但是，如果 iframe 来自另一个域，我无法访问其内容，因此无法修改播放器，因为我无法访问 iframe 中的视频元素。

我需要做的修改如下：

• 在时间线中的特定提示点放置标记
• 在提示点处暂停视频
• 到达提示点时在视频下方显示一些附加信息

到目前为止，我发现的唯一可能的解决方案是在我的 Web 应用程序域的子域上自己托管一个平台，并调整该平台的代码以将 document.domain 属性设置为我的 Web 应用程序的域。这样我就可以访问平台提供的 iframe 内的视频标签。我不喜欢该解决方案的一点是，我不想自己托管平台，而且如果我不需要修改平台也很好。

Answer 1

您可以使用 HTML5 提供的视频标签。

<video>
<src = "your src here">
</video>

首先根据所有分辨率创建视频并存储 然后使用 javascript Web API 为不同类型的分辨率更改 src

var videoplayer = document.getElementsByTagName("video")[0];

videoplayer.src = "new src here according to the resolution"

播放速度也可以用同样的方法改变

videoplayer.playbackRate = "value according to the user"

Here 是查看修改视频播放器的示例。

您可以使用javascript检测speed of the user并相应地渲染视频源。

如果你不想下载任何东西来检查网速，那么看看如何使用service-worker实现adaptive starting视频体验。