Outstream ad demo
Demonstrates outstream ads with Flowplayer Native. Please scoll down to see the ad unfold when it enters the viewport.
Sample implementation
outstream ad
Pretium cras et ante leo mattis aptent. Pharetra pulvinar praesent sapien, suspendisse rutrum senectus duis justo. Pretium ac lobortis aptent. Cursus sociis ullamcorper id ultricies fames? Lobortis egestas pellentesque pretium conubia felis. Vitae, tempus odio nostra rhoncus. Erat eget natoque vulputate quis. Donec molestie ligula mi mus pharetra faucibus at augue nullam viverra fusce ornare. Donec bibendum nunc commodo ridiculus sociis adipiscing nascetur. Primis phasellus curabitur aliquet curabitur vel habitasse maecenas posuere. Quis sodales euismod ultricies ac montes sodales donec ornare blandit et. Condimentum auctor, varius integer bibendum vulputate nibh magnis dictumst cursus malesuada mi torquent. Luctus pharetra torquent turpis orci ridiculus mi. Magnis nisl facilisis platea convallis.
Morbi bibendum mollis primis. Blandit ut luctus lobortis suscipit laoreet primis. Magna amet hendrerit id vestibulum sapien eget? Orci rhoncus dui arcu sagittis maecenas per per ultrices. Habitasse ultrices mattis nisi magnis conubia suspendisse. Accumsan interdum tempus tellus lacinia, ligula volutpat. Scelerisque nam, diam montes morbi quam. Luctus himenaeos velit dignissim, leo.
Nascetur penatibus pretium ornare dis faucibus. Volutpat dictum adipiscing nisl facilisis, sodales sollicitudin at aliquet. Ad pulvinar odio imperdiet per ac natoque massa. Phasellus molestie magnis tempor? Taciti elit metus viverra penatibus posuere sit mollis fringilla. Facilisis integer praesent adipiscing egestas tellus accumsan ultricies risus dictum aliquet turpis! Penatibus quam leo interdum lacus risus, auctor elit ligula. Dictum amet phasellus varius a sem.
Est consequat morbi est, lacinia congue sit dolor. Cursus et duis consequat conubia velit. Morbi aliquam orci id amet? Duis quis turpis ultricies aliquam potenti rhoncus dictum ligula diam. Non porttitor tristique curae; pellentesque. Potenti lacus vulputate porta ut mauris mattis ornare senectus adipiscing ornare velit. Vitae netus donec, pretium vivamus. Mollis nisl neque nec pretium class dis lobortis dictum et montes sem. Et viverra nibh himenaeos conubia torquent integer torquent enim? Imperdiet erat massa sollicitudin sem dapibus commodo sodales platea ipsum sociosqu gravida parturient. Hac bibendum, ullamcorper praesent nec ante sodales! Mi est aliquam velit curae;.
Nisl hac nunc praesent cras taciti et accumsan elit fusce magnis convallis. Habitasse quis in integer odio mauris vestibulum sed dictumst ridiculus cum felis eros? Rhoncus semper placerat, sociis himenaeos lorem. Erat tincidunt leo nullam mollis. Sem pulvinar platea auctor per dolor ad facilisis purus mollis. Ante sagittis duis volutpat aptent porta!
Aliquet praesent vitae odio sagittis rutrum at morbi aliquet proin? Nostra nunc molestie risus sagittis primis lacus vehicula torquent condimentum mollis eros. Potenti blandit netus aenean phasellus dictumst ac. Fames vel donec blandit per tempus venenatis sagittis iaculis tortor pulvinar euismod. Ultricies praesent massa tempus elit condimentum nisi varius aliquam at sagittis ultricies. Pellentesque praesent ridiculus.
Consequat eleifend donec bibendum habitasse dis risus amet vehicula risus turpis facilisi. Sodales tempor in placerat et est magnis cum nulla bibendum ipsum auctor curae;. Urna natoque ad auctor sed ut senectus quis in magna consequat libero habitasse. Nunc curae; vulputate natoque eleifend fusce, dolor dictum. Felis, nibh elementum placerat lorem curae; magna litora quisque rhoncus. Amet congue dictum, augue elit nascetur faucibus. Cubilia cursus taciti sed dapibus blandit lectus tellus. Imperdiet, laoreet ante sodales in. Penatibus imperdiet mus consequat semper aptent eu ultrices. Aliquam cras felis?
Convallis cursus tempor est. Sociosqu dolor parturient hendrerit, maecenas fusce dictum aenean. Sed condimentum elementum facilisi donec ornare suspendisse maecenas tortor sagittis. Consectetur montes nullam non accumsan maecenas. Nec non placerat magna porta egestas montes leo penatibus, sit laoreet quis euismod. Ultrices dictum dapibus aliquam suscipit cursus aliquet. Rhoncus blandit rhoncus ac nunc molestie lacus primis. Donec massa placerat risus placerat posuere condimentum sit libero?
Facilisis ornare mollis purus quisque natoque fringilla torquent, sem ultricies tempor accumsan. Augue integer tortor fermentum diam pellentesque rhoncus netus mus iaculis dignissim viverra erat. Volutpat pretium accumsan pharetra hendrerit massa consectetur. Habitant mauris semper porta litora condimentum morbi natoque aliquam maecenas id! Hac dis ligula velit elit. Risus nulla velit dapibus sem urna pellentesque tempor eget nullam. Molestie lorem per ridiculus egestas id sapien nostra semper volutpat mollis sociosqu. Justo luctus, hendrerit convallis convallis ut iaculis neque lacinia lacus. Praesent.
Pretium cras et ante leo mattis aptent. Pharetra pulvinar praesent sapien, suspendisse rutrum senectus duis justo. Pretium ac lobortis aptent. Cursus sociis ullamcorper id ultricies fames? Lobortis egestas pellentesque pretium conubia felis. Vitae, tempus odio nostra rhoncus. Erat eget natoque vulputate quis. Donec molestie ligula mi mus pharetra faucibus at augue nullam viverra fusce ornare. Donec bibendum nunc commodo ridiculus sociis adipiscing nascetur. Primis phasellus curabitur aliquet curabitur vel habitasse maecenas posuere. Quis sodales euismod ultricies ac montes sodales donec ornare blandit et. Condimentum auctor, varius integer bibendum vulputate nibh magnis dictumst cursus malesuada mi torquent. Luctus pharetra torquent turpis orci ridiculus mi. Magnis nisl facilisis platea convallis.
Morbi bibendum mollis primis. Blandit ut luctus lobortis suscipit laoreet primis. Magna amet hendrerit id vestibulum sapien eget? Orci rhoncus dui arcu sagittis maecenas per per ultrices. Habitasse ultrices mattis nisi magnis conubia suspendisse. Accumsan interdum tempus tellus lacinia, ligula volutpat. Scelerisque nam, diam montes morbi quam. Luctus himenaeos velit dignissim, leo.
Consequat eleifend donec bibendum habitasse dis risus amet vehicula risus turpis facilisi. Sodales tempor in placerat et est magnis cum nulla bibendum ipsum auctor curae;. Urna natoque ad auctor sed ut senectus quis in magna consequat libero habitasse. Nunc curae; vulputate natoque eleifend fusce, dolor dictum. Felis, nibh elementum placerat lorem curae; magna litora quisque rhoncus. Amet congue dictum, augue elit nascetur faucibus. Cubilia cursus taciti sed dapibus blandit lectus tellus. Imperdiet, laoreet ante sodales in. Penatibus imperdiet mus consequat semper aptent eu ultrices. Aliquam cras felis?
Convallis cursus tempor est. Sociosqu dolor parturient hendrerit, maecenas fusce dictum aenean. Sed condimentum elementum facilisi donec ornare suspendisse maecenas tortor sagittis. Consectetur montes nullam non accumsan maecenas. Nec non placerat magna porta egestas montes leo penatibus, sit laoreet quis euismod. Ultrices dictum dapibus aliquam suscipit cursus aliquet. Rhoncus blandit rhoncus ac nunc molestie lacus primis. Donec massa placerat risus placerat posuere condimentum sit libero?
Facilisis ornare mollis purus quisque natoque fringilla torquent, sem ultricies tempor accumsan. Augue integer tortor fermentum diam pellentesque rhoncus netus mus iaculis dignissim viverra erat. Volutpat pretium accumsan pharetra hendrerit massa consectetur. Habitant mauris semper porta litora condimentum morbi natoque aliquam maecenas id! Hac dis ligula velit elit. Risus nulla velit dapibus sem urna pellentesque tempor eget nullam. Molestie lorem per ridiculus egestas id sapien nostra semper volutpat mollis sociosqu. Justo luctus, hendrerit convallis convallis ut iaculis neque lacinia lacus. Praesent.
Pretium cras et ante leo mattis aptent. Pharetra pulvinar praesent sapien, suspendisse rutrum senectus duis justo. Pretium ac lobortis aptent. Cursus sociis ullamcorper id ultricies fames? Lobortis egestas pellentesque pretium conubia felis. Vitae, tempus odio nostra rhoncus. Erat eget natoque vulputate quis. Donec molestie ligula mi mus pharetra faucibus at augue nullam viverra fusce ornare. Donec bibendum nunc commodo ridiculus sociis adipiscing nascetur. Primis phasellus curabitur aliquet curabitur vel habitasse maecenas posuere. Quis sodales euismod ultricies ac montes sodales donec ornare blandit et. Condimentum auctor, varius integer bibendum vulputate nibh magnis dictumst cursus malesuada mi torquent. Luctus pharetra torquent turpis orci ridiculus mi. Magnis nisl facilisis platea convallis.
Morbi bibendum mollis primis. Blandit ut luctus lobortis suscipit laoreet primis. Magna amet hendrerit id vestibulum sapien eget? Orci rhoncus dui arcu sagittis maecenas per per ultrices. Habitasse ultrices mattis nisi magnis conubia suspendisse. Accumsan interdum tempus tellus lacinia, ligula volutpat. Scelerisque nam, diam montes morbi quam. Luctus himenaeos velit dignissim, leo.
.flowplayer {
max-width: 90%;
}
window.player = flowplayer("#player", {
autoplay: false
, autopause: true
, ima: {
ads: [
// must be in preroll position
{"time": 0
// your ad tag
, "adTag":"https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=l"
// mark that this ad is outstream.
, "outstream": true
}
]
}
})
Libraries
<!-- <head> -->
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css" />
<!-- <body> -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/ads.min.js"></script>HTML code
<div>
<p>Pretium cras et ante leo mattis aptent. Pharetra pulvinar praesent sapien, suspendisse rutrum senectus duis justo. Pretium ac lobortis aptent. Cursus sociis ullamcorper id ultricies fames? Lobortis egestas pellentesque pretium conubia felis. Vitae, tempus odio nostra rhoncus. Erat eget natoque vulputate quis. Donec molestie ligula mi mus pharetra faucibus at augue nullam viverra fusce ornare. Donec bibendum nunc commodo ridiculus sociis adipiscing nascetur. Primis phasellus curabitur aliquet curabitur vel habitasse maecenas posuere. Quis sodales euismod ultricies ac montes sodales donec ornare blandit et. Condimentum auctor, varius integer bibendum vulputate nibh magnis dictumst cursus malesuada mi torquent. Luctus pharetra torquent turpis orci ridiculus mi. Magnis nisl facilisis platea convallis.
</p>
<!-- cut for readability, add more lore ipsum if needed -->
<p>
Morbi bibendum mollis primis. Blandit ut luctus lobortis suscipit laoreet primis. Magna amet hendrerit id vestibulum sapien eget? Orci rhoncus dui arcu sagittis maecenas per per ultrices. Habitasse ultrices mattis nisi magnis conubia suspendisse. Accumsan interdum tempus tellus lacinia, ligula volutpat. Scelerisque nam, diam montes morbi quam. Luctus himenaeos velit dignissim, leo.
</p>
</div>
<div id="player">/</div>Javascript
<script>
window.player = flowplayer("#player", {
// use your own token in production
token: "eyJraWQiOiJxaEZ6dWR4dmJuTDMiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJxaEZ6dWR4dmJuTDNcIixcImRvbWFpblwiOltcImZsb3dwbGF5ZXIuY29tXCJdfSIsImlzcyI6IkZsb3dwbGF5ZXIifQ.pdpIEfbRN_6P-ayyNsEazPPPjr0RSmd8SjJyqp8w8BYXTYsg11FjCODutzLZ6jkSm5hHTqfg05cCVuHcFIfI1w"
, autoplay: false
, autopause: true
, ima: {
ads: [
// must be in preroll position
{"time": 0
// your ad tag
, "adTag":"https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=l"
// mark that this ad is outstream.
, "outstream": true
}
]
}
})
</script>