Search code examples
javascriptadsvimeo-apivimeo-playerpreroll

Vimeo pre-roll ads at embeded player


I need an idea to create an application for putting pre-roll movie ads to movies on the web page. Ad movies and movies are hosted at Vimeo.

I tried to use Vimeo player API but got one bad issue. My app listened to the event "play" and then the ad was started. But before the ad was started one or two frames of the main movie was displayed. So the app needed to wait for a little while to start the ad.

That was looking bad especially when the poster image was at the begining of the main video.

I did not know how to fix it.

My code was as follows:

<script>
    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);
    var a = 1;
    function playAd() {
        if (!a) return;
        a = 0;
        player.pause();
        player.loadVideo(41540648);
        player.on('loaded', function () {
            player.play();
        });
    }
    var b = 1;
    function playMovie() {
        if (!b) return;
        b = 0;
        player.loadVideo(63723953);
        player.on('loaded', function () {
            player.play();
        });
    }
    player.on('play', playAd);
    player.on('ended', playMovie);
</script>

Solution

  • I tried your code witch seems to work properly (on my broswer).

    However it's dificult to state wether a couple of image are missing at the begining of your main movie or not, as there is nothing to distinguish them from the following ones (watermarks or so, just for the sake of testing) (and I don't have video appropriate for testing).

    You may try to add player.setCurrenttime(0); just before player.play(); in your function playMovie(), then you'll be sure that the palyer start to play from 0;

    I couldn't see any differences, but you may, especially if your movie's first images differs from the following ones.

    It's kind of a hack but still better than nothing if it works for you.

    PS : I recently realised that there are, or at least I have, issues when the Outro setting of my video is set to begining, as I'm not able to seek to 0 or replay the video anymore. (see details on vimeo forum)

    PS2 : My actual walk around have been to set outro setting to "nothing" and setCurrentTime(0.1), but that's the kind of thing I wouldn't expect from vimeo

    Cheers