cloudinary-video-player
Version:
Cloudinary Video Player
149 lines (120 loc) • 4.88 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cloudinary Video Player</title>
<link href="https://cloudinary-res.cloudinary.com/image/asset/favicon-32x32-2991a47c2caa80211bf2dbf3f29317c8.png" rel="icon" sizes="32x32" type="image/png">
<!--
We're loading scripts & style dynamically for development/testing.
Real-world usage would look like this:
<link rel="stylesheet" href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.3.0/cloudinary-core-shrinkwrap.js"></script>
<script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js"></script>
-->
<script type="text/javascript" src="./scripts.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/5.1.5/videojs.ads.css" />
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script type="text/javascript">
window.addEventListener('load', function(){
var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
var adTagUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpreonly&cmsid=496&vid=short_onecue&correlator=";
player = cld.videoPlayer('player', {
ads: {
adTagUrl: adTagUrl,
}
});
var sorter = function(a, b) {
if (a.publicId < b.publicId) return 1;
if (a.publicId > b.publicId) return -1;
return 0;
};
player.playlistByTag('video_race', {
sorter: sorter,
autoAdvance: 5,
repeat: true,
presentUpcoming: false
}).then(function(player) {
var divElem = document.querySelector("div#playlist-data");
var list = player.playlist().list().map(function(source) {
return source.publicId()
}).join(', ');
divElem.innerText = "Playlist: " + list
});
}, false);
</script>
</head>
<body>
<div class="container p-4 col-12 col-md-9 col-xl-6">
<nav class="nav mb-2">
<a href="../index.html"><< Back to examples index</a>
</nav>
<h1>Cloudinary Video Player</h1>
<h3 class="mb-4">VAST and VPAID</h3>
<video
id="player"
playsinline
controls
muted
autoplay
class="cld-video-player"
width="500"
></video>
<p class="mt-4">
<a href="https://cloudinary.com/documentation/video_player_ads_monetization">Ads and monetization documentation</a>
</p>
<h3 class="mt-4">Example Code:</h3>
<pre>
<code class="language-html">
<video
id="player"
controls
muted
autoplay
class="cld-video-player"
width="500"
></video>
</code>
<code class="language-javascript">
var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
// Initialize player
var player = cld.videoPlayer('player', {
plugins: {
vastClient: {
adTagUrl: "https://rtr.innovid.com/r1.5554946ab01d97.36996823;cb={random_number}",
adCancelTimeout: 5000,
adsEnabled: true,
playAdAlways: true
}
}
});
// Pass a sorter to sort list in alphabetical order by publicId
var sorter = function(a, b) {
if (a.publicId < b.publicId) return 1;
if (a.publicId > b.publicId) return -1;
return 0;
};
// Fetch playlist by tag. Since this operation involves an API call
// the function returns a Promise when the operation completes.
// The return value is 'player'.
player.playlistByTag('demo', {
sorter: sorter,
autoAdvance: 0,
repeat: true
}).then(function(player) {
var divElem = document.querySelector("div#playlist-data");
var list = player.playlist().list().map(function(source) {
return source.publicId()
}).join(', ');
divElem.innerText = "Playlist: " + list
});
</code>
</pre>
</div>
<!-- Bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- highlight.js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>