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

Question

我需要将视频嵌入到我的Web应用程序中，并具有以下要求：

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

从平台嵌入视频的问题在于，通常必须使用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并相应地渲染视频源。

如果您不想下载任何内容以检查网络速度，请看看如何使用服务工作者实现adaptive starting视频体验。