Videojs how to add Skip Ad button

Viewed 1416

I use VideoJs player for my website. In each video i have first ad and after that start video file. I looked on the internet but I couldn't find any clear documentation or some examples to create a button 'Skip Ad' ... I find only this example but when i try it I have error

VIDEOJS: ERROR: TypeError: player.skipAds is not a function

here is my code:

<video  id="video_1" poster="<?=$videos->getPoster(1)?>" class="video video-js vjs-default-skin" controls width="258" height="150" data-setup="{}" src="<?= $videos->getVideo(1) ?>">
     <source src="<?= $videos->getVideo(1) ?>" type="video/mp4">
     <div class="videojs-ads-info enabled">
          <span>Your video will resume in 23 seconds</span>
          <a class="enabled">Skip Ad</a>
     </div>

and script :

videojs('#video_1', {}, function() {
        var player = this;
        player.ads();
        player.on('contentchanged', function() {
                   player.trigger('adsready');
                 });
        player.on('readyforpreroll', function() {
                   player.ads.startLinearAdMode();
                   player.src('<?=$videos->getAds(1)?>');
                   player.skipAds({ delayInSeconds: 10 });
                   player.one('adplaying', function() {
                                player.trigger('ads-ad-started');
                            });
                   player.one('adended', function() {
                                player.ads.endLinearAdMode();
                            });
        });                     
        player.trigger('adsready');

});

1 Answers

Try this!

    <video id="video_1" poster="<?=$videos->getPoster(1)?>" class="video video-js vjs-default-skin" controls width="258" height="150" data-setup="{}" src="<?= $videos->getVideo(1) ?>">
         <source src="<?= $videos->getVideo(1) ?>" type="video/mp4">
         <div class="videojs-ads-info enabled">
              <a class="enabled">Skip Ad</a>
         </div>
    </video>

    player = videojs('video_1', {}, function() {
        let player = this;
        player.ads(); // initialize videojs-contrib-ads
        player.on('readyforpreroll', function() {
            player.ads.startLinearAdMode();
            player.src('<?=$videos->getAds(1)?>');
            player.skipAds();
            player.one('adplaying', function() {
                player.trigger('ads-ad-started');
            });
            player.one('adended', function() {
                player.ads.endLinearAdMode();
            });
        });
        player.trigger('adsready');
    });
    $('#video_1').on('click', '.videojs-ads-info a', function () {
        $(".videojs-ads-info").css("display", "none");
    });
Related