javascript - html 播放由大量排队的小视频组成的视频

标签 javascript mobile streaming html5-video adaptive-bitrate

如何管理由大量小视频部分组成的视频?例如,原始视频被分割成 1 秒的视频,每个视频都以不同的字节率提供,这样我就可以根据当前的带宽选择每个部分。或者原始视频是 360 度视频,并被分割成 1 秒的 block ,这些 block 在不同的区域具有更好的质量,这样我就可以流式传输与用户当前正在查看的位置相对应的 block 。

看起来 MPEG-DASH 播放器正在解决字节率适应的这个问题,尽管他们可能做得更多。

在桌面上使用一堆 html5 视频 + javascript 来完成此操作听起来并不复杂,但要小心流式传输的内容和处理转换。但是,在移动设备上,我需要用户交互来加载视频并播放它。但我不希望用户每秒都点击他的手机......

理想情况下,最终的结果应该有一个与 html5 视频非常相似的 api,并且可以定期选择流媒体源。它可以在移动设备上运行对我来说非常重要。

非常感谢!

最佳答案

是的,MPEG-DASH 和 HLS正在解决这个问题等。

DASH 和 HLS 播放器使用新的 HTML5 Media Source Extensions API (MSE) 来播放多个视频片段,就像它们只是一个文件一样。

移动设备是个问题。 MSE 可在 Android 版 Chrome 中运行,但请注意大多数 Android 手机附带的内置浏览器。众所周知,它们存在缺陷并且缺乏功能。

不幸的是,MSE 不适用于 iOS 。唯一适用于 iOS 的就是 HLS。

大多数人都选择 HLS,因为它应用广泛并且在 iOS 设备上得到了良好的支持。 Android 也支持 HLS,尽管它可能会出现问题,特别是在某些设备上(如您所知,几乎所有硬件制造商也在制造 Android 手机,谁知道他们在手机中放入了什么硬件。说到机顶盒,情况是这样的)更糟糕)。对于桌面浏览器,使用 javascript HLS 播放器,如 hls.js (开源)或 Viblast (商业)。

一些流媒体服务器以多种格式打包视频流 - HLS、MPEG-DASH、rtmp,因此可以实现后备机制:如果支持 HLS,则使用 HLS,然后使用 MPEG-DASH(如果支持),或者对于真正旧的浏览器使用 rtmp。

DIY 解决方案很有趣,但您应该准备好投入大量时间,然后才能使其在大多数平台(移动和桌面)上运行。

关于javascript - html 播放由大量排队的小视频组成的视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35372567/

相关文章:

Android 2.2 SDK - PhotoCapture 示例不工作

c - Gstreamer 客户端服务器音频流

Twitter Streaming API 最佳实践(多连接或单连接)

java - 使用 Jackson 流式传输内部 JSONArray 记录,避免内存收集

javascript - 有没有办法仅在事件持续一段时间后才触发函数

javascript - 你能在 vue.js 中更改项目的 ID 吗?

javascript - IE 不接收模糊事件 (jQuery)

javascript - 在没有初始化的情况下声明变量会使它成为非未定义的情况吗?

jquery - 更改时自动刷新 ListView - knockoutjs 和 JQuery Mobile

javascript - Jquery:如何检查输入是否聚焦