JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<link href="http://vjs.zencdn.net/4.7.1/video-js.css" rel="stylesheet">
  <link href="lib/videojs-contrib-ads/videojs.ads.css" rel="stylesheet" type="text/css">
  <link href="videojs.vast.css" rel="stylesheet" type="text/css">
  <!--[if lt IE 9]><script src="lib/es5.js"></script><![endif]-->
  <script src="http://vjs.zencdn.net/4.7.1/video.js"></script>
  <script src="lib/videojs-contrib-ads/videojs.ads.js"></script>

  <script src="lib/vast-client.js"></script>
  <script src="videojs.vast.js"></script>

  <p class="description">Video.js VAST plugin examples.</p>

  <div class="example-video-container">
    <p class="description">No autoplay.</p>

    <video id="vid1" class="video-js vjs-default-skin" controls preload="auto"
        poster="http://video-js.zencoder.com/oceans-clip.png"
        data-setup='{}'
        width='640'
        height='400'
        >
      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>
      <p>Video Playback Not Supported</p>
    </video>
  </div>

  <div class="example-video-container">
    <p class="description">With autoplay.</p>

    <video id="vid2" class="video-js vjs-default-skin" autoplay controls preload="auto"
        poster="http://video-js.zencoder.com/oceans-clip.png"
        data-setup='{}'
        width='640'
        height='400'
        >
      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>
      <p>Video Playback Not Supported</p>
    </video>
  </div>

CSS

.description {
      background-color:#eee;
      border: 1px solid #777;
      padding: 10px;
      font-size: .8em;
      line-height: 1.5em;
      font-family: Verdana, sans-serif;
    }
    .example-video-container {
      display: inline-block;
    }

JavaScript

var vid1 = videojs('vid1'),
        vid2 = videojs('vid2');
    vid1.muted(true);
    vid1.ads();
    vid1.vast({
      url: 'http://videoads.theonion.com/vast/270.xml'
    });
    vid2.muted(true);
    vid2.ads();
    vid2.vast({
      url: 'http://videoads.theonion.com/vast/270.xml'
    });