Search code examples
javascriptphpvimeovimeo-apivimeo-player

How to create a custom seekTo player interface with vimeo embedded code?

I have a site with a vimeo video player that I am embedding using Vimeo's PHP example.

External control buttons on the site need to seek to different "tracks" inside the Vimeo video, that is inside an iframe.

Solution

  • Use postMessage to pass JSON string data back to the iframe.

    function skipTo(time) {
    var f = jQuery("#vid_player iframe");
    var url = f.attr('src');
    var data = {method: "seekTo", value: time};
    f[0].contentWindow.postMessage(JSON.stringify(data), url);
}

    See API documentation that was somewhat helpful, but at least has a list of other methods you may need to utilize: http://api-portal.anypoint.mulesoft.com/vimeo/api/vimeo-javascript-api/docs/reference