CODEWITHSUNDEEP
apiplaybackvimeo
HWD
HWD

Reputation: 1629

Vimeo API: Simple Play Button

The Vimeo API documentation has me running in circles and I can't quite figure out what to do.

I want to create a simple button that plays my video. Could someone provide a bare-bones example of this? It might help me better understand how this API works.

Thank you!

Upvotes: 1

Views: 2632

Answers (3)

NL_Derek
NL_Derek

Reputation: 285

It can be even simpler: this works for me (only one video on the page)

<iframe id="vid_id" 
        src="http://player.vimeo.com/video/123456789" 
        height="288" width="512" allowfullscreen>
</iframe>
<br>
<button onclick="play_video()">Button text</button>

<script>
function play_video() {
  var player = document.getElementById("vid_id");
  var data = { method: "play" };
  player.contentWindow.postMessage(JSON.stringify(data), "*");
}
</script>

And it doesn't seem to need api=1 or player_id in the call to player.vimeo.com. I tested it on IE8, IE11, Fx, Chrome, Safari, Opera.

(edit later): Android seems to be another story; I have been unable to find any working example of programmatic control under Android. I have notified Vimeo of this.

Upvotes: 2

Josh
Josh

Reputation: 276

I wanted to add a play/pause button like this without using jquery or froogaloop. I don't know why but, I hate including a library when I don't have to. Especially for simple things like this.

Here's what I came up with (I'm just posting this for other people who are searching) :

<!DOCTYPE HTML>
<html>
<head>
    <title>Vimeo Test</title>
    <script language="JavaScript">
    var iFram, url;
    function startitup(){
        iFram = document.getElementById('theClip');
        url = iFram.src.split('?')[0];
    }
    function postIt(action, value) {
        var data = { method: action };
        if (value) {
            data.value = value;
        }
        if(url !== undefined){
            iFram.contentWindow.postMessage(JSON.stringify(data), url);
        }
    }
</script>
</head>
<body onload="startitup();">
<iframe id="theClip" src="http://player.vimeo.com/video/27855315?api=1" width="400"     height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>    </iframe>
<p><button onclick="postIt('play');">Play</button> <button     onclick="postIt('pause');">Pause</button></p>
</body>
</html>

Upvotes: 0

Drew Baker
Drew Baker

Reputation: 14430

I think the Vimeo API docs are super confusing as well, that's why I made this: http://labs.funkhausdesign.com/examples/vimeo/froogaloop2-api-basics.html

It's as bare bones as possible.

Upvotes: 1

Related Questions