Develop Reference

VAST : How to call a Vpaid Javascript and a Video Ad at the same time?

I am trying to write a VAST XML file that can launch at the same time (approximately) 2 things :
1 Advertising Video
1 VPAID JavaScript file
I tried a lot of configurations but unsuccessfully.
Here are 3 examples I am currently trying to get working :
<!-- 1 Creative (adparameter Ad Video + mediafile VPAID JS) -->
<VAST version="3.0">
<Ad id="2016.03.16">
<InLine>
<AdSystem>TestVpaid</AdSystem>
<AdTitle>2016.03.16</AdTitle>
<Error>
about:blank
</Error>
<Impression>
about:blank
</Impression>
<Creatives>
<Creative sequence="1">
<Linear>
<Duration>00:00:30</Duration>
<AdParameters>
<![CDATA[
{"videos":[{"url":"http://cdn.liverail.com/adasset4/1331/229/7969/lo.mp4","mimetype":"video/mp4"}]}
]]>
</AdParameters>
<MediaFiles>
<MediaFile type="application/javascript" apiFramework="VPAID">
https://domain_name/test_vpaid.js
</MediaFile>
</MediaFiles>
</Linear>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>
<!-- 1 Creative (staticresource Ad Video + mediafile VPAID JS) -->
<VAST version="3.0">
<Ad id="2016.03.16">
<InLine>
<AdSystem>TestVpaid</AdSystem>
<AdTitle>2016.03.16</AdTitle>
<Error>
about:blank
</Error>
<Impression>
about:blank
</Impression>
<Creatives>
<Creative sequence="1">
<Linear>
<Duration>00:00:30</Duration>
<StaticResource>
<![CDATA[
{"videos":[{"url":"http://cdn.liverail.com/adasset4/1331/229/7969/lo.mp4","mimetype":"video/mp4"}]}
]]>
</StaticResource>
<MediaFiles>
<MediaFile type="application/javascript" apiFramework="VPAID">
https://domain_name/test_vpaid.js
</MediaFile>
</MediaFiles>
</Linear>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>
<!-- 2 Creative (mediafile Ad Video + companionads mediafile VPAID JS) -->
<VAST version="2.0">
<Ad id="2016.03.16">
<InLine>
<AdSystem>TestVpaid</AdSystem>
<AdTitle>2016.03.16</AdTitle>
<Error>
about:blank
</Error>
<Impression>
about:blank
</Impression>
<Creatives>
<Creative sequence="1" >
<Linear>
<Duration>00:00:30</Duration>
<MediaFiles>
<MediaFile delivery="progressive" bitrate="400" width="320" height="180" type="video/mp4">
http://cdn.liverail.com/adasset4/1331/229/7969/hi.mp4
</MediaFile>
</MediaFiles>
</Linear>
</Creative>
<Creative sequence="1" >
<CompanionAds>
<Companion>
<Duration>00:00:30</Duration>
<MediaFiles>
<MediaFile type="application/javascript" apiFramework="VPAID">
https://domain_name/test_vpaid.js
</MediaFile>
</MediaFiles>
</Companion>
</CompanionAds>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>
For my tests I use the google dev page :
https://developers.google.com/interactive-media-ads/docs/sdks/html5/vastinspector
(thanks to them for putting it online)
Do you know how I could do what I want ?
Thanks in advance, and have a great day

Depends on what type of interaction the VPAID should offer. If its functionality is limited to the duration of the video, you can create a linear VPAID that plays the video itself. The video is passed to the VPAID creative in its 'AdParameters' tag.
Check this example on ryanthompson591s github. Load the first sample ('Video') and check its VAST XML.

I'm sure you don't want to launch 2 Ads at the same time in one player. This doesn't make sense and isn't possible at all. But I guess your question is about to launch a VPAID and pass the video URL as AdParameter.
I would like to recommend you not to do so. You can't be 100% sure about the players implementation. If the player (or VPAID plugin) isn't well implemented it's possible that the AdParameter will not be passed correct or not at all. If you have a look into the specs, AdParameter is not a required field, which leads to misunderstandings sometimes.
On the other hand, there is a single benefit to do so. For some specific anti-ad-blocker it would be easier to swap original URLs within the VAST with anti-ad-block (subdomain) URLs. If this is your attempt, AdParameter is appropriate.
If not, let your VPAID-js make the decision where to get the video source from.
Final note:
It is necessary to follow the specs 1000% - meaning especially each event must be fired like prescribed and each getters and setters must be well implemented. If you don't do so, you will run in nasty troubles with your potential customers.
Hope this helps & have a nice day.

Thanks for your answer, but I found the real problem I was having, I just didn't know I needed to fill the 'videoSlot' required property in the vpaid script.

How to greayout back button and view source of browser

How do u greayout backbutton or view source of browser so users can't click backbutton and view source code because javascript contains lot of business logic code. I need to greayout those options so users can't be able to click them. i recently joined banking project and i am beginner in java and development.

Try adding this in the Head section of your html file:
<script type="text/javascript">
window.history.forward();
function noGoingBack() {
window.history.forward();
}
</script>
And add this in your Body section:
<body onload="noGoingBack();" onpageshow="if (event.persisted) noBack();" onunload="">
This prevents the page from going back.

JS how to check if webpage has been added as homepage?

I am trying to make something similar like Google on IE. They create a "Make Google your homepage" script for IE.
This is what I have so far:
<script type="text/javascript">
$(document).ready(function () {
$("#no_thanks").click(function () {
$(".lightbar").hide();
}); });
</script>
<!--[if IE]>
<div class="lightbar">Come here often? Make xxx your homepage.
<span class="sure">Sure!</span>
<span class="nothanks"><a id="no_thanks" href="#" onClick="_gaq.push(['_trackEvent', 'HomePage', 'No', 'Set as Home page']);">No Thanks</a></span>
</div>
<![endif]-->
I also added some Google Analytics.
What happens is that the script works, it does set the homepage, but the "lightbar" doesn't disappear when I restart the browser (i'm not talking about the jQuery script).
Any ideas?

Imho there is no solid way.
the best you could do is to add a querystring to the url that is under the add-as-homepage link. like:
www.example.com/homepage.html?isbookmark=true
or
www.example.com/homepage.html?ishomepage=true
then just check if the querystring exists in the url when the document is called. Then it is initiated from this button or a bookmark or a homepage.

Greybox + Flowplayer problems

Hey all I am having a huge problem here evenafter following every step of the tutorial given here to put in a video on a popup greybox ..
The tutorial
now, the only change i have made is i have a folder inside the folder graybox called graybox which holds the JS and css files.
so my script code reads like this ..
<script>var GB_ROOT_DIR = "/greybox/";</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
there is a folder called video which has a video called video.flv.
now I have linked a text to open as shown in the tutorial .. the code is
<a title="Noodle Demo" href="player.html?filename=videos/noodle.flv">Demo</a>
when i click on the link on the web page the window opens up right but the window reads page not found .. I have the required player.html too and that is a copy paste from the tutorial, i;ve changed all the required version numbers of flowplayer etc. Please help me.

Use the rel tag. :)
<a rel="gb_page_center[560, 450]" href="player.html?filename=videos/noodle.flv">
God bless tutorials. For better centering you can get the middle of the site by jQuery for example.
<a rel="gb_page_center[560, 450]" id="player" href="player.html?filename=videos/noodle.flv">
<script type="text=javascript">
$(document).ready(function(){
cenx = $(window).width();
ceny = $(window).height();
$("#player").attr("rel", "gb_page_center["+cenx/2+", "+ceny/2+"]");
});
</script>
But it requires jquery from jquery website.

Why won't my playlist work?

Cross-posted on the Flowplayer forums, but no response there yet, so I hope someone here could help.
I'm having no success at all using the Playlist plugin. I've followed the examples at http://flowplayer.org/plugins/javascript/playlist.html closely, and I get the initial clip to work, but the Playlist plugin does not seem to register. The video loads and plays, so FlowPlayer is loading properly, but playlist doesn't attach any functionality to my playlist objects.
I confirmed that the playlist script is loading: I added alert("playlist!"); to the top of the flowplayer.playlist-3.0.8.js, just after the initial comment block and before the start of the function code. When I load my web page, I see the alert. I get the same results whether using the minified or normal versions of the scripts, and whether I call the flowplayer function with flowplayer() or $f(). I'm using flowplayer 3.2.3 and playlist 3.0.8.
Here's a dead-simple static page that tries to render a FlowPlayer and two clips in a gallery: FlowPlayer appears, but clicking on either of the gallery links replaces the current page with the video playing directly in the browser window, instead of keeping me on the HTML page and playing the video in the FlowPlayer instance.
If I add a config param to the FlowPlayer call and provide a default clip, then that clip plays, but again the gallery links just take me to the raw clip, rather than pushing the clip into the FlowPlayer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test flowplayer</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="/_library/script/flowplayer/flowplayer-3.2.3.min.js" type="text/javascript"></script>
<script src="/_library/script/flowplayer/flowplayer.playlist-3.0.8.min.js" type="text/javascript"></script>
</head>
<body>
<div id="player" style="display: block; width: 776px; height: 432px;"></div>
<div id="gallery">
video 1
video 2
</div>
<script type="text/javascript">
$(function () {
$f("player", "/_library/script/flowplayer/flowplayer-3.2.3.swf")
.playlist("gallery");
});
</script>
</body>
</html>
Any idea what I'm doing wrong? Any help appreciated, let me know if you need more details.
Thanks!
- Val

$f("player", "/_library/script/flowplayer/flowplayer-3.2.3.swf").playlist("gallery");
maybe?
.playlist() is not a function of $(function () {})

$(function () {})
Is how you register an event handler for the load event. Because of this,The code within it is not executed until the load event is fired by the browser and it is possible that the plugin is not available yet.
Also, you are not following the tutorials closely. The code the have is like this
$(function() {
// setup player without "internal" playlists
$f("player2", "http://releases.flowplayer.org/swf/flowplayer-3.2.3.swf", {
clip: {baseUrl: 'http://blip.tv/file/get'}
// use playlist plugin. again loop is true
}).playlist("div.petrol", {loop:true});
});
Note that .playlist is called on the return of $f(), not on $(function(){...}).

OK, fixed.
Many of the examples use a class on the playlist container. In examples using a class, the playlist function is passed a CSS selector -- usually something like playlist("div.gallery")
I changed my markup to use a class, changed the param to playlist() to a fully-qualified CSS selector, and it works!!!
Now, I don't want to use a class-- I have a single playlist element, so I want to use an ID. I changed the markup back to an ID:
<div id="gallery">
video1
video2
</div>
and changed the caller to use a CSS selector for IDs:
playlist("div#gallery");
And that works too!
Finally, I wondered if I needed to specify the element that has the playlist ID, and I don't -- I can give it just a CSS ID selector:
playlist("#gallery");
I think my problem was that with the main flowplayer script, you can address the placeholder element without the . or # qualifier, like $f("player"); instead of $f("#player");. But the Playlist plugin is more picky, and you have to use the qualifier.
All that pain for a single character!