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

tntclaus commented 10 years ago

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?

msander commented 10 years ago

same problem here, did you make any progress?

robputer commented 9 years ago

Also curious if any progress was made on this issue? Thanks!

mente commented 9 years ago

Can you provide more information? What browser have you tried? What VAST ad tag was used?

tntclaus commented 9 years ago

Hi,

the problem is not related to VAST file or browser. It is related to video subsystem. For unknown for me reason vast plugin refuses to mix mp4/webm and youtube sources. I tried different combinations of sources and the only way it works is when both ad and video have the same source (file).

If there is a youtube video source, file ads won't work, and vast plugin isn't capable of loading ads from youtube source.

mente commented 9 years ago

Yeah, you're right. It might be related to video.js itself and the fact that it initializes techs not on actual load but when player is just initialized

tntclaus commented 9 years ago

That might be so. Do you know any workarounds?

mente commented 9 years ago

Not yet

EnricoKestenholz commented 9 years ago

I've just spent all morning on the same problem. My problem was very similar. I was trying to play an html5 ad (video/mp4) with the youtube tech (video/youtube).

I've fixed it by moving line 141: player.autoplay(true);

to after line 144: player.src(adSources);

When the autoplay command is given after the sources are added the player actually uses the right tech.

So from this:

    player.autoplay(true);
    // play your linear ad content
    var adSources = player.vast.sources;
    player.src(adSources);

To this:

    // play your linear ad content
    var adSources = player.vast.sources;
    player.src(adSources);
    player.autoplay(true);

The Html I use to call the video

<video id="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="950" height="392">
     <source src="https://www.youtube.com/watch?v=[youtubecode]" type='video/youtube' />
</video>
<script>
   var vid1 = videojs('videoPlayer',{"techOrder": ["html5","youtube","flash"] });
   vid1.ads();
   vid1.vast({
          url: '[vasturl]'
    });
</script>

Update: There are a couple of bugs I've found after some more testing. The system will still work with a youtube video after an mp4 ad, and the bugs (for me) are minor enough that we will put the change into production, still important to point them out and to try and fix them.

1) When the controls are added to the video again after the ad is over or is skipped vjs.getData will throw a javascript error Cannot read property 'vdata1414597353023' of null, the youtube video will still play correctly. This only occurs with a youtube video after an mp4 ad, it doesn't throw the error with an mp4 video after the mp4 ad. 2) Briefly the browser native control will show on the ad. I've notice it even after the ad there is another mp4 video, but it happens always when a youtube video is played after the ad, and only rarely whit an mp4 video. 3) Sometimes, if you click on the ad right after the ad start (before the native controls disappear) instead of going to the ad link you will be directed to the .mp4 video file of the ad instead. The problem here is that I can't reproduce it consistently (sometimes even if you click on the ad when the native control are still there the link will still be the correct one) and I've even noticed with an .mp4 file after the ad.

tntclaus commented 9 years ago

@EnricoKestenholz which file does require this patch?

Thank you, I will try this soon too.

EnricoKestenholz commented 9 years ago

@tntclaus the change has to be made in the videojs.vast.js file.

lapuh commented 9 years ago

В новой версии

Найти: player.src(player.vast.sources);

Заменить на:

    var adSources = player.vast.sources;
    player.src(adSources);
    player.autoplay(true);

killerhis commented 9 years ago

Awesome, thanks for the share. Works perfectly on desktop browsers, however I can't seem to get it working properly for mobile. The problem on mobile devices is that when you tap, it first plays the youtube video for a fraction of a second and then closes. You then need to tap again to see the ad and after that's finished, tap again for the youtube video.

Any suggestions on how to fix this so that the ad & youtube video plays on first tap?

hoeness2 commented 9 years ago

It is not allowed to embed youtube videos and monetize them.

Original: "Not be hosted on YouTube: YouTube content isn’t eligible for AdSense for video. If you’re a YouTube content producer, you could monetize through the YouTube partner program." https://support.google.com/adsense/answer/1705822?hl=en

killerhis commented 9 years ago

You can monitize youtube video if you use 3rd party networks other then Adsense for video.

DamienPirsy commented 9 years ago

Same problem here, I followed @lapuh istruction for the newer version but still no luck, getting the Cannot read property 'vdata1423560598255' of null when the mp4 ad ends (or is skipped) and the youtube player starts again. A couple log I put in the video.js file print out this:

Uncaught TypeError: Cannot read property 'vdata1423560598255' of null
setSource called
[Tech.selectSourceHandler]
[Tech.selectSourceHandler] source:
Object {src: "http://www.youtube.com/watch?v=RvfD0qWH4xo"}
[Tech.selectSourceHandler] handlers:
[Object]
Handler: 
[object Object] cant handle source
Object {canHandleSource: function, handleSource: function, dispose: function}canHandleSource: function (source){var match,extdispose: function (){console.log('html5 dispose chiamato')}handleSource: function (source,tech){console.log('html5 handleSource');tech.setSrc(source.src)}__proto__: Object

VIDEOJS: TypeError: Cannot read property 'handleSource' of null {stack: (...), message: "Cannot read property 'handleSource' of null"}

kipotlea commented 9 years ago

@EnricoKestenholz : I search the line code in videojs.vast.js file. but i dont found it? have you solved this problem?

EnricoKestenholz commented 9 years ago

@kipotlea Sry for the delayed resposne, the plugin has been updated since my hack, and that part of code has changed. It still has the same problem even with the updated plugin ?

Unfortunately I haven't updated the plugin yet, so if there still is this problem I don't have a new solution right now.

theonion / videojs-vast-plugin

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