Giter Club home page Giter Club logo

videojs-vast-plugin's Introduction

videojs-vast-plugin Build Status Coverage Status

This plugin reads a VAST file, grabs the first video it can, and plays it as pre-roll advertisement before your video. It will also click through to whatever url the advertiser designates, track any clicks, and fire all of the correct pixel trackers at the right times.

Usage

Include the plugin and it's dependencies:

<script src="http://vjs.zencdn.net/4.4.3/video.js"></script>
<script src="vast-client.js"></script>
<script src="video.ads.js"></script>
<script src="videojs.vast.js"></script>

Add "ads" and "vast" to the plugins object, and pass a url:

plugins: {
    ads: {},
    vast: {
        url: 'http://url.to.your/vast/file.xml'
    }
}

And when you play that video, a pre-roll ad should play beforehand.

If you click on the ad, an adclick event will trigger.

Check out the demo for a more detailed example.

This plugin is technically an integration for video.js's ads plugin. For more information on the various states in the preroll process, please refer to the videojs-contrib-ads documentation.

Options

  • url: a URL to the xml file.
  • skip: how long until the user can skip the ad. Defaults to 5, and a negative number will disable it.

Credit

This plugin uses dailymotion's vast client to read and parse the VAST files, and video.js's ads plugin for switching from pre-roll to content.

videojs-vast-plugin's People

Contributors

csinchok avatar dcharbonnier avatar dmlap avatar jcruz2us avatar nhjm449 avatar shaqq avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

videojs-vast-plugin's Issues

Ads postroll

Hi !
I'm trying to add ads on videojs player.
I've no problem with preroll ads but I didn't found some doc about post-roll with this plugin.
It's possible or not ?
If is yes can you help me :) and if is not can you help me too :)

Thx !

Problem when using Wrapper, VASTAdTagURI and TrackingEvents

I don’t know much about VAST but I’ve been trying to setup this plugin. It worked nicely on some simple examples but as soon as I was using the actual XML VAST definition that I need to use, it wouldn’t work and I would get javascript errors about my tracking events. Removing the tracking events would fix the issue.

The errors were from vast-client.js. You can see the issue I opened here dailymotion/vast-client-js#53. But then, I tried updating the the latest vast-client and that seems to fix the issue!

It would probably be a good thing to update to the latest vast-client.js in this repo. I just have no idea if this breaks some things or not.

Choose best resolution ad file based on player size

If the VAST file specifies multiple files of the same type but in different resolutions, then whatever video is listed first seems to be picked. It would seem to be better to pick based on the resolution of the ad video and then looking at the size of the video player to pick the best fitting ad video.

My thoughts would be to pick the video resolution that is equal to or exceeds the dimensions of the video player in either the height or width direction. So the lowest resolution video whose height or width >= player height or width.

Example:

  • VAST provides 160 x 120 px and 640 x 480 px
  • Player is 320 x 240 px

So the 640 x 480 rendering would be chosen so that no scaling up is done.

autoplay doesn't work when no ads in VAST

Autoplay works properly when the VAST returns ads; but in case of empty/no-response, the video doesn't autoplay.

videojs version: 4.11.1
browsers tested: chrome/firefox

video js with vast

video js 3.2.0 support vast.plugin.js but the highest vertion not support vast.plugin.js

Vast ad does not start untill I manually write load() to console

When I test the plugin with chrome while emulating apple iphone 5, vast-blocker element comes to screen and skip counter also. But vieo does not play nor counter. I write myvideo.load() to console and it starts normally.

Video js debug writes this to console :

VIDEOJS: ads preroll? -> ad-playback
VIDEOJS: ads ads-ready -> ad-playback

Wrapper support

I'm trying to use this plugin with DFP and we often have wrappers. Can you please add support for wrappers?

Ignore tracking pause when skip or complete

Hi,

When i click skipad button, tracking pause and complete called, can i ignore these tracking?
Only call tracking skip event...

And for complete ad, i only want call complete tracking, do not call pause.

Can you help me, how i can do that?

Thanks a lot,

videojs-vast-plugin and videojs-youtube can't work together

Hello,

just noticed that if I try to use vast plugin in combination with youtube plugin, ads don't play at all. Depending on invocation types I either get no errors, or get this error:

Sorry, no compatible source and playback technology were found for this video. 
Try using another browser like <a href="http://bit.ly/ccMUEC">Chrome</a> or 
download the latest <a href="http://adobe.ly/mwfN1">Adobe Flash Player</a>

If I switch back to webm sources ads are working just fine.

I try to use this code in two different ways. First way is almost the same, as in this primer:
http://theonion.github.io/videojs-vast-plugin/
Here is the part of playVideo(url):

function playVideo(url) {
// ......
  var video = videojs('vast-video', {
    preload: 'auto',
    width: 600,
    height: 400,
    techOrder: ["youtube", "html5"],
  });

  video.src([
  {
     src: "http://www.youtube.com/watch?v=xjS6SftYQaQ",
     type: "video/youtube"
   }
 ]);
  video.controls(true);
  try {
    video.ads();
    video.vast({
      url: url,
      skip: 2
    });
    video.play();
  foo = video; //debug

  } catch(e) {
    alert(e);
  }
}

The second has the following html:

 <!doctype html>
 <head>
  <title>Video.JS Example</title>
  <link href="http://vjs.zencdn.net/4.7/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/4.4.3/video.js"></script>

  <script src="http://theonion.github.io/videojs-vast-plugin/vast-client.js"></script>
  <script src="video.ads.js"></script>
  <script src="videojs.vast.js"></script>
  <script src="youtube.js"></script>

</head>
<body>
  <video id="vid1" 
    class="video-js vjs-default-skin" 
    width="640" height="360"
    controls 
    data-setup='{}'>
  </video>
<script>

  var vid1 = videojs('vid1', {"techOrder": ["html5", "youtube"]});
  try {

    vid1.src(
      {
        src: "http://www.youtube.com/watch?v=xjS6SftYQaQ",
        type: "video/youtube"   
      }
    );

    vid1.ads();

    vid1.vast({
        url: "vast.xml",
        skip: 4 // Does not work, I don't see a skip button
    });
    vid1.controls(true);
    // vid1.play();
    // vid1.techOrder = ["youtube", "html5"];
  } catch(e) {
    alert("error:" + e);
  }  
</script>
</body>

Am I doing something wrong, or is it a bug? If it is a bug, can someone help me to find and correct it?

Replay video and VAST

I have a pre-roll video playing via VAST. Works well (Thank you)

After the video plays, I want to automatically reload the player and play the next video. I have tried different methods, but the pre-roll video doesn't play.

The kinda confusing part is that there is an videojs .ended() event fires when the VAST pre-roll video ends. (I am not sure that it should from an overall perspective)

I am ok with reloading the player and getting another pre-roll video but for some reason I can't get it to try to reload another video when the ended event fires. Any ideas?

 vid2.ready(function(){
          this.on("ended", function(){ 
                    console.log("ended");
                    var vid2 = videojs("vid2");
                    vid2.dispose();
                    //put it back into the same div
                    videojs("vid2", {"preload":"auto","width":1920,"height":1080}, function(){
                    // Player (this) is initialized and ready.
                    this.src("http://video-js.zencoder.com/oceans-clip.mp4");
                     this.ads();
                        this.vast({
                          skip: -1,
                      url: 'https://vastserver/example'
                            });
                    });
                    this.play();


          });

Incorrectly works VAST plugin with .flv ads

Video JS 4.11.1
VASt plugin 0.1.2

In the pre-roll video is played in the format flv after which the movie starts again, and the main video does not play.

If during this movie go to watch the main video, the video starts playing again.

The file contains only VAST videos in flv format.

If the file has VAST videos in MP4, everything works correctly.

Please help fix bugs!!!

Unable to play ads on multiple videos in a list

Hello,
I have a list of different videos on a single webpage, when I am using example code with diiferent video player ID only first video ad is playing.
Can you please help me to resolve this?

Issue with URL? net::ERR_NAME_NOT_RESOLVED

So I copied the tutorial down exactly and everything works great, it loads the testad from livereal and everything is great, However whenever I change it to another vast2.0 complient XML file it breaks giving "net::ERR_NAME_NOT_RESOLVED" in the vast-client.js line 1352. Any idea what is going on and how I can fix it? This is on a locally stored XML file If I use a remote XML file I get "No 'Access-Control-Allow-Origin" error

VAST on mobile web

Hi ,

I try to config plugin VAST on my mobile site . But i have some trouble

1 . on Iphone : I can play video ads , but can not click it
2 . on android , When i want click pause video ads , its redirect to destination link in VAST file . I try to back my mobile site and click play button . But it can not play again , it only redirect to destination link. I must refesh page

Please help me check

API

Hello,

Is there any API that can be used once the ad has been skipped or finished?

We are planing to use the player in a pre-roll so once the user engaged with the ad (closed it or finished watching it), the player should be removed to give access to the content on the page.

Not sure if the player itself or the plugin can allow us listening to this event and fire our own function that will remove the player from the page.

Thanks for your help,

Prefetching / Availability

I do have a case in which it is necessary to know whether the VAST tag is empty or not, before displaying the player at all.
I am building a rotation system including non-VAST delivery. If VAST tags are not available, I want to be able to react on JavaScript side.

This led me to change the videojs-vast-plugin code, by overwriting the events defined in videojs.vast.js:
'vast-ready', 'vast-preroll-ready', 'vast-preroll-removed', 'contentupdate', 'readyforpreroll'

Are there any plans to include VAST prefetch with callback as a functionality?

Tanks in advance!

No Skipping

Hi,
this is really great. It would even be better if one could turn off the skip function.
And if there would be a messag "Advertising. Your movie starts in xx Seconds".
If anyone could give me a hint on how to do that (?).
Thanks

loop="True" causes the pre-roll to play over and over.

Using the Video.js option loop causes the pre-roll to play over and over.

<title>Video.js VAST Example</title> <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> <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>

Video.js VAST plugin examples.

No autoplay.

<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>

With autoplay.

<video id="vid2" class="video-js vjs-default-skin" autoplay controls loop="True" 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>
<script> 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' }); </script>

Frequency Capping Not Working

I am using a third-party video ad server as my video ad server. Frequency capping is not working. For example, when I set a frequency cap of 3 impressions per hour, that cap is ignored. If I refresh and play the video 30 times, the video ad will display 30 times instead of only 3. The ad serving engineer tells me that the reason for this problem is that the ad serving request is coming from this plugin and not from the browser. Note: I have tested the ad code using an OVA VAST inspector and frequency capping works just fine. Can someone tell me how to correct this problem?
Thanks!

video js and VAST 3

We're using videojs v4.5.2 and videojs-vast-plugin and it supports VAST 2. We show a preroll video using DFP. The skip video link has a default of 5 secs. We found that if the video player supports VAST 3 then we can set a different value for skip link for example 10 secs using DFP admin. My question is: Does videojs v4.5.2 and or the videojs plugin has support for VAST 3?

Thanks,

Fernando

VPAID plugin for videojs player. Request for proposal

Hi,

Id like to check if there is an option to develop the VPAID plugin for the videojs player. Were ready to pay for the implementation so if there is any interest from your side pls share your e-mail and i`ll shoot you the requirements.

Thanks in advance
Alex

Update Docs

Added a few things - skipButton changes, adclick, and maybe some writeup on video file formats.

VAST/VPAID

Hello,

I was wondering if you were planing to be VAST/VPAID complaint too soon? It seems that a lot of ad. agency are only proving VPAID tag.

How hard will it be to have a plugin that could be VAST/VPAID compliant?

Cheers,

Mime-type Error

If the VAST feed has only invalid mime-types, createSourceObjects returns an empty array. At this point, the plugin should trigger "adtimeout," but the player just hangs instead.

loop="True" causes the pre-roll to play over and over.

Using the Video.js option loop causes the pre-roll to play over and over.

Replicate:

In demo.html that's included with the source, change the line

<video id="vid2" class="video-js vjs-default-skin" autoplay controls preload="auto"

to

<video id="vid2" class="video-js vjs-default-skin" autoplay controls loop="True" preload="auto"

Vimeo Plugin and Vast Plugin

How can i integrate Vimeo plugin and Vast plugin

var vid1 = videojs('vid2', { "techOrder": ["vimeo"], "src": "https://vimeo.com/63186969" });
vid1.ads();
vid1.vast({
url: 'http://ad3.liverail.com/?LR_PUBLISHER_ID=1331&LR_CAMPAIGN_ID=229&LR_SCHEMA=vast2'
});

With this code, the ad is played, but at the end, player doesn't switch to the vimeo videojs player.
I must say that vimeo plugin works too.

What version of Video.js, and any plugins used?
VideoJS 4.3.0
videojs-vimeo: https://github.com/eXon/videojs-vimeo
vast-video-js: https://github.com/PetroFrolov/vast-video-js

Code example:

poster="http://video-js.zencoder.com/oceans-clip.png"
src="https://vimeo.com/63186969"
data-setup='{}'
width='640'
height='400'

Thanks for your help

ad gets play again, if i change the HD /SD

We are using the plugin "videojs-resolution-selector". First time ad plays, main video gets play, if user changes the HD/SD. I think player gets reinitialized and ad plays again then main video. any hint?
I have set a flag but not working
if( !INIT_Ad) {
videoPlayer.ads();
videoPlayer.vast({
url: vastArray[Math.floor(Math.random() * vastArray.length)]
});
INIT_Ad = true;
}
videojs-resolution-selector; https://github.com/dominic-p/videojs-resolution-selector

ad complete call back

is there any call back or variable to check if the ad is playing or main video. we need this. we are logging the events of main video , video started, and on completion of video.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.