[🚧 Coming soon] VideoJS Instream Prebid.js

Result

An example of an inArticle using Prebid.js and Google Ad Manager.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Original Code

Head section

<script async src="https://rawcdn.githack.com/juangseedtag/prebid-scenarios/main/prebid7.25.0.js"></script>
<!-- use recent version of videojs to ensure proper functioning with the iOS devices -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video-js.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video.js"></script>
<!-- videojs-vast-vpaid -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs.vast.vpaid.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs_5.vast.vpaid.min.js"></script>

<script>
    var pbjs = pbjs || {};
    pbjs.que = pbjs.que || [];


    /* Prebid video ad unit */

    var videoAdUnit = {
        code: 'video1',
        mediaTypes: {
            video: {
                context: 'instream',
                playerSize: [640, 480],
                mimes: ['video/mp4'],
                protocols: [1, 2, 3, 4, 5, 6, 7, 8],
                playbackmethod: [2],
                skip: 1
            }
        },
        bids: [{
            bidder: 'appnexus',
            params: {
                placementId: 13232361
            }
        }]
    };

    pbjs.que.push(function() {
        pbjs.addAdUnits(videoAdUnit);

        pbjs.setConfig({
            debug: true,
            cache: {
                url: 'https://prebid.adnxs.com/pbc/v1/cache'
            }
        });

        pbjs.requestBids({
            bidsBackHandler: function(bids) {
                var videoUrl = pbjs.adServers.dfp.buildVideoUrl({
                    adUnit: videoAdUnit,
                    params: {
                        iu: '/19968336/prebid_cache_video_adunit',
                        cust_params: {
                            section: 'blog',
                            anotherKey: 'anotherValue'
                        },
                        output: 'vast'
                    }
                });
                invokeVideoPlayer(videoUrl);
            }
        });
    });

</script>

Body section

<h5>Result</h5>
<div class="example-video-container">
  <video id="vid1" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{}' width='640' height='480'>
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'/>
    <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm'/>
    <source src="https://vjs.zencdn.net/v/oceans.ogv" type='video/ogg'/>
  </video>
</div>


<script>
    var page_load_time;

    page_load_time = new Date().getTime() - performance.timing.navigationStart;
    console.log(page_load_time + "ms -- Player loading!");

    var vid1 = videojs('vid1');

    page_load_time = new Date().getTime() - performance.timing.navigationStart;
    console.log(page_load_time + "ms -- Player loaded!");

    function invokeVideoPlayer(url) {

        page_load_time = new Date().getTime() - performance.timing.navigationStart;
        console.log(page_load_time + "ms -- Prebid VAST url = " + url);

        /* Access the player instance by calling `videojs()` and passing
           in the player's ID. Add a `ready` listener to make sure the
           player is ready before interacting with it. */

        videojs("vid1").ready(function() {

            page_load_time = new Date().getTime() - performance.timing.navigationStart;
            console.log(page_load_time + "ms -- Player is ready!");

            /* PASS SETTINGS TO VAST PLUGIN

               Pass in a JSON object to the player's `vastClient` (defined
               by the VAST/VPAID plugin we're using). The requires an
               `adTagUrl`, which will be the URL returned by Prebid. You
               can view all the options available for the `vastClient`
               here:

               https://github.com/MailOnline/videojs-vast-vpaid#options */

            var player = this;
            var vastAd = player.vastClient({
                adTagUrl: url,
                playAdAlways: true,
                verbosity: 4,
                vpaidFlashLoaderPath: "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true",
                autoplay: true
            });

            page_load_time = new Date().getTime() - performance.timing.navigationStart;
            console.log(page_load_time + "ms -- Prebid VAST tag inserted!");

            player.muted(true);
            player.play();

            page_load_time = new Date().getTime() - performance.timing.navigationStart;
            console.log(page_load_time + "ms -- invokeVideoPlayer complete!");

        });
    }

</script>