Vast ads in react-jw-player or in reactjs?

Question

What are Vast Ads? And how to use Vast ads in react-jw-player and what are the various tools to debug?

Answer 1

VAST stands for Video Ad Serving Template. Simply put, it's an XML script developed by the IAB. The most popular ad standard, VAST creates a communication link between the ad server and the video player. VAST is a specification defined and released by the Interactive Advertising Bureau that sets a standard for communication requirements between ad servers and video players in order to present video ads.

Now using it in react using react-jw-player is quite tricky. We can use advertising object in that using customProps.

import "./styles.css";
import ReactJWPlayer from "react-jw-player";

export default function App() {
  let newScheduleArray = [
    {
      tag: [
        "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=[timestamp]"
      ],
      type: "linear",
      offset: 25
    },
    {
      tag: [
        "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=[timestamp]"
      ],
      type: "linear",
      offset: 125
    },
    {
      tag: [
        "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=[timestamp]"
      ],
      type: "linear",
      offset: 225
    }
  ];

  const ads = {
    admessage: "This video will resume in xx seconds",
    adscheduleid: "your_ad_schedule_id",
    client: "vast",
    cuetext: "Advertisement",
    outstream: false,
    preloadAds: false,
    vpaidcontrols: false,
    rules: {
      startOnSeek: "pre",
      timeBetweenAds: 0
    },
    schedule: newScheduleArray
  };

  return (
    <div className="App">
      <h1>React JwPlayer with Vast Ads</h1>
      <ReactJWPlayer
        file="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        playerId="123"
        playerScript="https://cdn.jwplayer.com/libraries/someid.js"
        customProps={{ advertising: { ...ads } }}
      />
    </div>
  );
}

Now talking about ads are fine but how to use various tools of jwPlayer:

1. https://developer.jwplayer.com/jwplayer/reference/get_v2-advertising-schedules-ad-schedule-id-ad-schedule-extension
2. https://developer-tools.jwplayer.com/ad-tester
3. Vast Demo ads : https://foliovision.com/player/vast/sample-vast-tags
4. JW Lens: Chrome Plugin : https://extpose.com/ext/104286/en

That's All Folks