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>