【问题标题】:Vimeo Video Player in HTML5HTML5 中的 Vimeo 视频播放器
【发布时间】:2016-05-05 11:01:36
【问题描述】:

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

第 1 步:

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

第 2 步:

<video src="http://player.vimeo.com/video/3873878" width="320" height="240" controls></video>

【问题讨论】:

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

标签: html html5-video vimeo vimeo-api vimeo-player


【解决方案1】:

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

  1. 您需要一个 Vimeo Pro 帐户。
  2. 查看 Vimeo 中的视频设置时,从“分发”选项卡获取视频链接:

  3. 将视频链接添加到您的 HTML5 视频标签:

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

【讨论】:

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

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

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

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

【讨论】:

  • Brad Dougherty 我不想使用 iframe 标记。在视频标签本身我想播放视频
  • 如果您想使用第三方播放器链接,您需要有一个 PRO 帐户:help.vimeo.com/hc/en-us/articles/…
  • 原生html5播放器是第三方吗?我只是想知道为什么不支持它?
  • @SahibKhan 支持,但您必须为此付费。这就是 Vimeo 赚钱的方式。
  • &lt;iframe&gt; 是有效的 HTML5 标记。如果 Vimeo 免费支持 &lt;iframe&gt; 嵌入,那么它们实际上是在支持 HTML5。这听起来更像是免费帐户不支持 HTML5 &lt;video&gt; 标签,实际上,因为如果没有 src 属性的功能 URL,&lt;video&gt; 标签可能毫无用处。
【解决方案3】:

使用这些设置

&lt;iframe src="https://player.vimeo.com/video/3873878" width="320" height="240" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;

【讨论】:

  • 你能再解释一下吗?
【解决方案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"
         width="640" 
         height="300" 
         frameborder="0" 
         allow="autoplay; 
         fullscreen" 
         allowfullscreen 
         muted 
         playsinline>
</iframe>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-12-28
    • 2018-12-09
    • 2018-12-28
    • 2014-09-23
    • 1970-01-01
    • 2011-05-20
    • 2018-07-08
    相关资源
    最近更新 更多