VAST Compatibilty

[prateekkathal]

Hello,

Is the player VAST Compatible? If yes, where can I get the documentation for it? If no, are you planning on it? When do you think you'll be able to release it?

Waiting....

Thanks,

[sampotts]

I'll add it to the list but there's streaming and playlists to get done first

[prock13]

@SamPotts: I also would like to deliver pre-rolls with your player. So I took your player and attempted to add pre-rolls using Google's IMA HTML SDK (https://developers.google.com/interactive-media-ads/docs/sdks/html5/).

So far I have a working prototype that delivers the prerolls in an adContainer absolutely positioned above the player and once the ad ends, it hides the container and plays the video.

Here is my example: https://developers.google.com/interactive-media-ads/docs/sdks/html5/

The issues I am facing are the following:

• I'm not sure how to make the YT and Vimeo videos play after the ad ends. My code is looking for a video element and obviously they use iframes.
• I'd like to dynamically pass the video source and not have to include links to .mp4's in the html. With your player the tags seem to be required in the html? or is it just in this example?
• I'm still trying to determine how to make the ads responsive (the Google SDK requires a size in order to select the appropriate creative). For now I am forcing the player size.

I know you have other items in your list to attend to, but given that I'm so close would you be willing to help finish this?

[sampotts]

Sorry I've not gotten around to this. It's hard to find the time and to prioritise everything.

In regards to your issues:

• You can use the api to play the video after the ad has finished. There's a few methods that might be useful there.
• You can use the api also for this. Calls to the source method will change the player. The only problem I can foresee is the need for an original element but give it a go and let me know.
• Do you know the dimensions of the ads? You can probably do the old position:relative; height: 0; padding: x% and then a child with position: absolute; height: 100%; width: 100%; rather like responsive videos/iframes perhaps?

Were you going to make this part of the core code or some sort of add-on? I've been meaning to create a modularised setup to allow for plugins but just haven't got around to it.

[prock13]

Thanks for the reply. So I setup a much simpler example using only Vimeo in this case (because we have a Vimeo Pro account and that's what I need to get working).

In regards to my points, after correcting how I was getting the instance of the player, I was able to use the API to play the Vimeo video after the ad completes. The other issue I had is that I was trying to create a listener for when the video finished playing, in case we wanted to show a post-roll, but I'm still working through how do to do that correctly in the Google SDK.

It does in fact seem that I can't add the source dynamically without having an original element. That's not a huge issue, but it would be best to load the video source after the ad finishes instead of taking the hit when the player originally loads. I'll keep looking into this.

I'm also going to spend some more time on responsive and the ad size issue.

Finally, as for making this part of the core or an add-on, I think it would work best as an add-on given that I have not touched the core code at all as of now. Now, once we start looking to do mid-roll ads, then we will need the ability to tell when the player is half way through the video so we can pause it, show the ad and then start the video back up. It's possible the API may already have this but I haven't checked yet.

Here's the simple Vimeo example that I setup: http://dev.salvogroup.co/plyr-master/examples/vimeo/

[prock13]

This does not work for me:

var player = document.querySelector('.js-media-player').plyr; player.addEventListener('ready', function() { var player = event.target.plyr; });

I get a type error. Any ideas why?

[sampotts]

Sorry that's a typo in the docs - try adding event as an argument to the callback.

var player = document.querySelector('.js-media-player').plyr;
player.addEventListener('ready', function(event) {
var player = event.target.plyr;
});

[prock13]

That works but I'm still not sure how to set an eventListener for when the video ends (in this case Vimeo if it's different that YT or regular video). Mind modifying the event example above to listen for "ended"?

[prock13]

Also, as you can see here: http://dev.salvogroup.co/plyr-master/examples/vimeo/ It's working now. But in the console I'm seeing an error "TypeError: Se.progress is undefined" any idea why?

[sampotts]

I think it would just be using the ended event:

var player = document.querySelector('.js-media-player').plyr;
player.addEventListener('ended', function(event) {
    var player = event.target.plyr;
});

Did you try that and no luck?

[prock13]

No luck on that...

[sampotts]

The buffer error I will fix very shortly.

I think the docs were incorrect here. I will update but try this code:

var container = document.querySelector('.js-media-player');
container.addEventListener('ended', function(event) {
    var player = event.target.plyr;
});

The change is that events fire on the container, rather than the plyr object so you can't bind to that. Try that instead?

[sampotts]

Ah no the docs were correct - I just didn't relay it correctly 👍

[prock13]

That worked!

[prateekkathal]

Any updates on this? When will this be added to the source code/made part of the original code?

[chrisbbreuer]

I would love to see if there are any updates on this as well, as that's one of the features I am required to use

[snipiba]

Some changes with this Feature request?

[nightsurge]

Yeah, any update on this? I do not want to use vi.ai, I would like to use my own ad networks and VAST/VPAID tags.

[nightsurge]

Just an fyi to all following this and @sampotts it looks like enabling ads and using the "tagUrl" works with VAST!

See pen: https://codepen.io/nightsurge/pen/NVQGyJ

[cschellhas]

Just an fyi to all following this and @sampotts it looks like enabling ads and using the "tagUrl" works with VAST!

See pen: https://codepen.io/nightsurge/pen/NVQGyJ

But it wont work with Vimeo videos. https://codepen.io/anon/pen/bPQdEa

[sampotts]

No it won’t as that’s against their terms of service. Same applies for YouTube.

[kfe908]

It does not work with any custom VAST :-) If you are not using google, you get an error. Plyr docs says "custom VAST" - that's incorrect and a bug if you look in the source code. In most use cases this is not very helpful and useful.

Is there any way to use own ad videos with Plyr?

[sampotts]

Others have had it working with custom VAST. If you've found a bug, open a PR 👍

[mat-etx]

Hello, Does it work for audio player too? thks,

[akash-s-simformsolutions]

Do we have any updates on Audio player ads ?

[WesleyCarnicl]

How would we do that with WordPress

Just an fyi to all following this and @sampotts it looks like enabling ads and using the "tagUrl" works with VAST!

See pen: https://codepen.io/nightsurge/pen/NVQGyJ

[JMcrafter26]

Any progress on this?