Cloudinary Studio

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

我知道 Cloudinary 既可以处理视频也可以处理图像,但前几天,我很好奇 Cloudinary 是否提供视频播放器嵌入,就像其他视频托管服务(例如 YouTube、Vimeo 等)一样。 就像一个带有特殊播放器的 <iframe>

我很好奇,因为尽管我很欣赏在页面上直接添加 <video> 的简单性,但我总是忘记一个小障碍:如果希望在移动浏览器上显示任何内容而不是空白的白色矩形,则必须使用 poster 属性。 每次使用视频时都必须为其剪辑一个特殊的 poster,坦率地说,这步操作我大部分时间都懒得做。

事实证明 Cloudinary 确实有一个播放器,它允许进行大量不错的自定义,包括为您处理海报:视频播放器工作室

如果我使用此播放器,不仅可以获得免费的可配置 poster,还可以获得您期望从 Cloudinary 获得的其他优势,例如以最佳格式提供视频并优化大小。

但这里还有另一件事非常重要,尤其是在处理长视频时:“自适应码率流”。 在后台,可能需要下载一些库,但带宽节省可能几乎可以立即抵消下载成本。 我对这些内容一窍不通,但我指的是 HLS 和 MPEG-DASH,它们似乎是主要的参与者,而此 Cloudinary 播放器都提供了它们。

需要说明的是,这篇文章并非由 Cloudinary 赞助。 我前几天只是在思考这些问题,因为我们经常在 CSS-Tricks 上嵌入视频,而且我已经将 Cloudinary 用于各种用途。

这是一个示例

在向 Cloudinary 团队介绍此事后,他们说了两件事

  1. 该播放器构建在 VideoJS 之上。 功劳归功劳。
  2. 他们有一个 博文,其中对自定义播放器的介绍比我在这里介绍的要深入得多。