HTML5 中的 Vimeo 视频播放器

Posted 2023-05-08

【中文标题】HTML5 中的 Vimeo 视频播放器

【英文标题】：Vimeo Video Player in HTML5

【发布时间】：2016-05-05 11:01:36

【问题描述】：

如何在 HTML5 播放器上播放 vimeo 视频？

第 1 步：

<video   controls>
  <source src="http://player.vimeo.com/video/3873878">
</video>

第 2 步：

<video src="http://player.vimeo.com/video/3873878"   controls></video>

【问题讨论】：

转到您的视频设置和视频文件，在底部有一个名为“使用您自己的播放器”的部分，您会在那里找到指向您的视频的直接网址。示例：

【参考方案1】：

This Vimeo doc 可能会有所帮助。这对我们有用：

您需要一个 Vimeo Pro 帐户。

查看 Vimeo 中的视频设置时，从“分发”选项卡获取视频链接：

将视频链接添加到您的 html5 视频标签：

<video controls> <source type="video/mp4" src="https://player.vimeo.com/external/*.hd.mp4?s=*&profile_id=*"> </video>

【讨论】：

这是一个更有帮助的答案

我们有同样的要求。但是我们在一个视觉丰富的网站的“封面”容器中使用 iFrame。我们希望视频能够播放 automute 和 inlineview。基本上在半透明层后面。但在手机中，这不起作用。 video 标签的优点是它允许poster 属性，它允许我们指定图像。因此，在视频无法自动播放的移动设备上，海报图像显示并且一切正常。知道如何使 iframe 具有“海报”类型的图像吗？

【参考方案2】：

除非您是 PRO 会员，否则您将需要使用我们的标准嵌入代码。我们的嵌入默认为 HTML5，并尽可能使用它。

<iframe src="https://player.vimeo.com/video/3873878"   webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

有关信息，请参阅我们的常见问题解答：https://vimeo.com/s/tdf、https://vimeo.com/s/adg

【讨论】：

Brad Dougherty 我不想使用 iframe 标记。在视频标签本身我想播放视频

如果您想使用第三方播放器链接，您需要有一个 PRO 帐户：help.vimeo.com/hc/en-us/articles/…

原生html5播放器是第三方吗？我只是想知道为什么不支持它？

@SahibKhan 支持，但您必须为此付费。这就是 Vimeo 赚钱的方式。

<iframe> 是有效的 HTML5 标记。如果 Vimeo 免费支持 <iframe> 嵌入，那么它们实际上是在支持 HTML5。这听起来更像是免费帐户不支持 HTML5 <video> 标签，实际上，因为如果没有 src 属性的功能 URL，<video> 标签可能毫无用处。

【参考方案3】：

使用这些设置

<iframe src="https://player.vimeo.com/video/3873878" width="320" height="240" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

【讨论】：

你能再解释一下吗？

【参考方案4】：

<iframe  class="b-hero_image lazy"
         data-src="https://player.vimeo.com/video/1111111?autoplay=1&loop=1&autopause=0&api=1&controls=0&muted=1?playsinline=0"
          
          
         frameborder="0" 
         allow="autoplay; 
         fullscreen" 
         allowfullscreen 
         muted 
         playsinline>
</iframe>