Vimeo Video Player in HTML5

Question

How to play vimeo videos on HTML5 player?

Step 1:

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

Step 2:

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

Budding

Go to your Video Settings and Video File, at the bottom there is a section called Use Your Own Player, you'll find there direct urls to your video. Example: – Venicevenin

Answer 1

This Vimeo doc might help. This is working for us:

1. You need a Vimeo Pro account.

2. Get the video link from the Distribution tab when looking at the video settings in Vimeo:

3. Add the video link to your HTML5 video tag:

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

Meurer

This is a much more helpful answer – Velites

We have the same requirement. But we're using iFrame in a "cover" container in a visually rich website. We'd like the video to play automute and inlineview. Basically behind a semi-opaque layer. But in mobile this doesn't work. The advantage of the video tag is that it allows a poster attribute, which allows us to specify an image. So on mobile where the video cannot autoplay, the poster image shows and all's well. Any idea how we can make the iframe have a "poster" type image? – Psychobiology

Answer 2

You will need to use our standard embed code unless you're a PRO member. Our embeds default to HTML5 and use it wherever possible.

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

See our FAQ for info: https://vimeo.com/s/tdf, https://vimeo.com/s/adg

Lachish

Brad Dougherty I don't want to use iframe tag. In video tag itself i want to play the videos – Budding

You will need to have a PRO account to use third-party player links if you want to do that: help.vimeo.com/hc/en-us/articles/… – Lachish

Is native html5 player third party ? I am just wondering why is it not supported ? – Patchouli

@SahibKhan it is supported, but you have to pay for it. That's how Vimeo makes money. – Neoterize

<iframe> is a valid HTML5 tag. If Vimeo supports <iframe> embedding for free, they are effectively supporting HTML5. It sounds more like the free accounts are not supporting the HTML5 <video> tag, effectivey, because the <video> tag is arguably useless without a functional URL for the src attribute. – Wilkerson

Answer 3

<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>

Lynnell

Answer 4

Use these settings

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

Skell

Can you explain a bit more? – Shinn