Vimeo video not working with HTML5 tag

Asked 25/8, 2013 at 6:34 Answered 4/2, 2014 at 10:59

I want to add a slider to Vimeo videos. I checked this slider, but it uses the HTML5 video tag. When I use the same tag with a Vimeo video URL then it's not working. Here is my code:

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

Here is the full code:

<html>
<body>
<script type='text/javascript' src='http://amazingslider.com/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>
<script type='text/javascript' src='http://amazingslider.com/wp-content/plugins/amazingslider-plugin/sharedengine/amazingslider.js?ver=1.6'></script>
<link rel="stylesheet" type="text/css" media="all" href="http://amazingslider.com/wp-content/themes/twentyeleven/style.css" />
<div class="demo-slider">
    <div style="display:block;position:relative;margin:15px auto 30px;" id="amazingslider-11">
        <ul style="display:none;" class="amazingslider-slides">
            <li><img alt="Big Buck Bunny Copyright  Blender Foundation" src="http://amazingslider.com/wp-content/uploads/amazingslider/11/images/big_buck_bunny_480_270.jpg">
                <video src="http://player.vimeo.com/video/68866759" preload="none"></video>
            </li>
            <li><img alt="Elephants Dream Copyright  Blender Foundation" src="http://amazingslider.com/wp-content/uploads/amazingslider/11/images/elephants_dream_480_270.jpg">
                <video src="http://www.youtube.com/embed/TLkA0RELQ1g" preload="none"></video>
            </li>
            <li><img alt="Sintel - Third Open Movie by Blender Foundation" src="http://amazingslider.com/wp-content/uploads/amazingslider/11/images/Sintel_480_270.jpg">
                <video src="http://www.youtube.com/embed/eRsGyueVLvQ" preload="none"></video>
            </li>
        </ul>
        <ul style="display:none;" class="amazingslider-thumbnails">
            <li><img src="http://amazingslider.com/wp-content/uploads/amazingslider/11/images/thumbnails/big_buck_bunny_480_270.jpg"></li>
            <li><img src="http://amazingslider.com/wp-content/uploads/amazingslider/11/images/thumbnails/elephants_dream_480_270.jpg"></li>
            <li><img src="http://amazingslider.com/wp-content/uploads/amazingslider/11/images/thumbnails/Sintel_480_270.jpg"></li>
        </ul>
        <div style="display:none;" class="amazingslider-engine"><a href="http://www.amazingslider.com">jQuery Slider</a></div>
    </div>
    <script src="http://amazingslider.com/wp-content/uploads/amazingslider/11/sliderengine/initslider.js"></script>
</div>
</body>
</html>

Madera answered 25/8, 2013 at 6:34 Comment(1)

Vimeo gives you a page to embed. Copy whatever HTML snippet Vimeo gives you and paste it in place of your <video>. – Villalba 25/8, 2013 at 6:36

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:

<video src="http://player.vimeo.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4"></video>

Note: This requires a PRO Vimeo account.

Aeronautics answered 4/2, 2014 at 10:59 Comment(4)

Is there a way to find those direct urls for the video if you are not the content owner and just want to play Vimeo videos on a Video htnl5 tag on a webpage like the vimeo homepage for example or summitdublin.com ? – Unipersonal 7/8, 2014 at 10:11

I can't find the "Use your own player", does it still existing or not ? – Cornaceous 20/12, 2015 at 17:34

Take a look: vimeo.com/help/faq/sharing-videos/… - Only PRO members can embed videos in custom/third-party players. – Aeronautics 19/9, 2016 at 15:46

Does this really requires a PRO Vimeo account? – Lippold 16/2, 2017 at 15:41

You'll need to use our embed code for it to work. http://player.vimeo.com/video/68866759 is not a video file, it's an HTML page, so putting it in a video tag won't do anything.

If you replace the video tag with this it should work:

<iframe src="//player.vimeo.com/video/68866759" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Diffuser answered 27/8, 2013 at 18:12 Comment(0)

Recommended topics

Hot tags