Saltar al contenido principal

In-Stream: How to implement In-Stream. Part 2: Implementation examples

A continuación le mostramos cómo integrar el código en su sitio en función del reproductor de vídeo que utilice.

Recuerde sustituir el valor XXXXXX por el ID de zona de la zona publicitaria que creó en Paso 1.

Reproductor de fluidos​

Página web del jugador

<script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>

<video id="my-video" controls style="width: 640px; height: 360px;">
    <source src="main_video.mp4" type="video/mp4" />
</video>

<script type="text/javascript">
    var testVideo = fluidPlayer(
        "my-video",
        {
            vastOptions: {
                adList: [
                    {
                        roll: "preRoll",
                        vastTag: "https://syndication.realsrv.com/splash.php?idzone=XXXXXXX"
                    },
                    {
                        roll: "midRoll",
                        vastTag: "https://syndication.realsrv.com/splash.php?idzone=XXXXXXX",
                        timer: 8
                    },
                    {
                        roll: "midRoll",
                        vastTag: "https://syndication.realsrv.com/splash.php?idzone=XXXXXXX",
                        timer: 10
                    },
                    {
                        roll: "postRoll",
                        vastTag: "https://syndication.realsrv.com/splash.php?idzone=XXXXXXX"
                    }
                ]
            }
        }
    );

JWPlayer Versión 6+ (Integración personalizada)​

Página web del jugador


<div id="my-video"></div>
<script type="text/javascript">
jwplayer("my-video").setup({
/**** ADVERTISING SECTION STARTS HERE ****/
advertising: {
  client: "vast",
  schedule: {
    "myAds": {
      "offset": "pre",
      "tag": "https://syndication.realsrv.com/splash.php?idzone=XXXXXXX"
      }
    }
  },
  /**** ADVERTISING SECTION ENDS HERE ****/
  file: "http://content.jwplatform.com/videos/Wf8BfcSt-kNspJqnJ.mp4",
  image: "http://content.jwplatform.com/thumbs/Wf8BfcSt-640.jpg",
  width: "580",
  height: "370"
});
</script>

Nota: Sólo funcionará con JWPlayer versión 6+ (no la versión gratuita) y sólo si se coloca un único JWPlayer en la página.

Video.js (Integración personalizada)​

Player website


<head>
<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">
<style type="text/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;
}
</style>
<!--[if lt IE 9]><script src="lib/es5.js"></script>-->
<script src="http://vjs.zencdn.net/4.7.1/video.js">
<script src="lib/videojs-contrib-ads/videojs.ads.js">
<script src="lib/vast-client.js">
<script src="videojs.vast.js">
<body>
<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="https://vjs.zencdn.net/v/oceans.mp4" type=’video/mp4’ >
<source src="https://vjs.zencdn.net/v/oceans.webm" type=’video/webm’ >
<p>Video Playback Not Supported</p>
</video>
</div>
<script>
  var vid1 = videojs(‘vid1’)
  vid1.muted(true);
  vid1.ads();
  vid1.vast({
  url: ‘https://syndication.realsrv.com/splash.php?idzone=XXXXXXX’
});
</script>
</body>

Flowplayer (Custom integration)​

Player website

<head>
<link rel="stylesheet" href="https://releases.flowplayer.org/7.2.4/skin/skin.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js">
<script src="https://releases.flowplayer.org/7.2.4/flowplayer.min.js">
<script src="http://releases.flowplayer.org/hlsjs/flowplayer.hlsjs.light.min.js">
<script src="http://imasdk.googleapis.com/js/sdkloader/ima3.js">
<script src="https://releases.flowplayer.org/vast/goshow.tv/vast.min.js">
<style type="text/css" dangerouslySetInnerHTML={{__html: ".flowplayer {  background-image: url(//flowplayer.com/media/img/logo-blue.png);  background-size: 95%;  background-color: #6496ff;  -webkit-box-shadow: 0 0 20px #b8b8b8;  -moz-box-shadow: 0 0 20px #b8b8b8;  box-shadow: 0 0 20px #b8b8b8;  width: 640px;}--><!--" }}>
<script>
window.onload = function ();
    flowplayer("#vast", ;
    splash: true,
    ratio: 9/16,
    customPlaylist: true,
    playlist: [&lcub;
    ima: &lcub;
    ads: [&lcub;
    time: 10,
    adTag: ‘https://syndication.realsrv.com/splash.php?idzone=XXXXXXX’
;],
;,
  sources: [
type: "application/x-mpegurl", src: "//edge.flowplayer.org/drive.m3u8";,
type: "video/mp4", src: "//edge.flowplayer.org/drive.mp4";
    ]
;]
;);
;;
</script>
<div id="vast" />

Note: This player requires a paid subscription.

Troubleshooting​

After adding these codes and replacing the Zone ID with your own, you should start showing ads right away.

In the next section of our guide, we will offer some basic troubleshooting steps in case this is not happening. Click here to continue

Also, if your player or version is not listed contact our Customer Success team selecting Technical Assistance from the contact form here.