cloudinary-video-player
Version:
Cloudinary Video Player
295 lines (233 loc) • 10.4 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/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.vjs-control.vjs-playlist-control:before {
font-family: FontAwesome;
font-size: 1.5em;
line-height: 2.0;
}
.vjs-playlist-control.vjs-playlist-next-control:before {
content: "\f050";
}
.vjs-playlist-control.vjs-playlist-previous-control:before {
content: "\f049";
}
</style>
<script type="text/javascript">
window.addEventListener('load', function(){
// Code for creating the VideoJS components
// ===============================================
// Get the ClickableComponent base class from Video.js
var ClickableComponent = videojs.default.getComponent('ClickableComponent');
// Create a common class for playlist buttons
var PlaylistButton = videojs.default.extend(ClickableComponent, {
constructor: function(player, options) {
var type = options.type;
if (!type && type != 'previous' && type != 'next') {
throw new Error("Playlist must be either 'previous' or 'next'");
}
this.type = type;
// It is important to invoke the superclass before anything else,
// to get all the features of components out of the box!
ClickableComponent.apply(this, arguments);
},
// The `createEl` function of a component creates its DOM element.
createEl: function() {
var typeCssClass = 'vjs-playlist-' + this.type + '-control';
return videojs.default.createEl('button', {
// Prefixing classes of elements within a player with "vjs-"
// is a convention used in Video.js.
className: 'vjs-control vjs-playlist-control vjs-button ' + typeCssClass
});
},
});
// Create the NextButton component
var NextButton = videojs.default.extend(PlaylistButton, {
constructor: function(player, options) {
PlaylistButton.apply(this, [player, { type: 'next' }]);
},
handleClick: function() {
PlaylistButton.prototype.handleClick.call(this);
// Since the component has a VideoJS Player object, we use the internal
// Cloudinary plugin to reach to the playlist object.
this.player().cloudinary.playlist().playNext();
}
});
// Create the PreviousButton component
var PreviousButton = videojs.default.extend(PlaylistButton, {
constructor: function(player, options) {
PlaylistButton.apply(this, [player, { type: 'previous' }]);
},
handleClick: function() {
PlaylistButton.prototype.handleClick.call(this);
this.player().cloudinary.playlist().playPrevious();
}
});
// Register the component with Video.js, so it can be used in players.
videojs.default.registerComponent('NextButton', NextButton);
videojs.default.registerComponent('PreviousButton', PreviousButton);
// Cloudinary Video Player related code
// ====================================
var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
// Initialize player with only the controlBar's 'playToggle' and our
// custom components set.
var player = cld.videoPlayer('player', {
videojs: {
controlBar: { children: ['PreviousButton', 'playToggle', 'NextButton'] }
}
});
player.playlist([
{ publicId: 'elephants' },
'sea_turtle'], { autoAdvance: 0, repeat: true });
}, 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">Components</h3>
<video
id="player"
playsinline
controls
muted
autoplay
class="cld-video-player"
width="500"
></video>
<p class="mt-4">
<a href="https://github.com/videojs/video.js/blob/master/docs/guides/components.md">Read more about VideoJS components</a>
</p>
<h3 class="mt-4">Example Code:</h3>
<pre><code class="language-css">
<!-- We used FontAwesome for the 'Previous' and 'Next' controlBar buttons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Add required CSS for displaying the fonts -->
<style type="text/css">
.vjs-control.vjs-playlist-control:before {
font-family: FontAwesome;
font-size: 1.5em;
line-height: 2.0;
}
.vjs-playlist-control.vjs-playlist-next-control:before {
content: "\f050";
}
.vjs-playlist-control.vjs-playlist-previous-control:before {
content: "\f049";
}
</style>
</code>
<code class="language-html">
<video
id="player"
controls
muted
autoplay
class="cld-video-player"
width="500"
></video>
<div id="source-data">
<span id="public-id-placeholder"></span><br>
<span id="source-url-placeholder"></span>
</div>
</code>
<code class="language-javascript">
// Code for creating the VideoJS components
// ===============================================
// Get the ClickableComponent base class from Video.js
var ClickableComponent = videojs.default.getComponent('ClickableComponent');
// Create a common class for playlist buttons
var PlaylistButton = videojs.default.extend(ClickableComponent, {
constructor: function(player, options) {
var type = options.type;
if (!type && type != 'previous' && type != 'next') {
throw new Error("Playlist must be either 'previous' or 'next'");
}
this.type = type;
// It is important to invoke the superclass before anything else,
// to get all the features of components out of the box!
ClickableComponent.apply(this, arguments);
},
// The `createEl` function of a component creates its DOM element.
createEl: function() {
var typeCssClass = 'vjs-playlist-' + this.type + '-control';
return videojs.default.createEl('button', {
// Prefixing classes of elements within a player with "vjs-"
// is a convention used in Video.js.
className: 'vjs-control vjs-playlist-control vjs-button ' + typeCssClass
});
},
});
// Create the NextButton component
var NextButton = videojs.default.extend(PlaylistButton, {
constructor: function(player, options) {
PlaylistButton.apply(this, [player, { type: 'next' }]);
},
handleClick: function() {
PlaylistButton.prototype.handleClick.call(this);
// Since the component has a VideoJS Player object, we use the internal
// Cloudinary plugin to reach to the playlist object.
this.player().cloudinary.playlist().playNext();
}
});
// Create the PreviousButton component
var PreviousButton = videojs.default.extend(PlaylistButton, {
constructor: function(player, options) {
PlaylistButton.apply(this, [player, { type: 'previous' }]);
},
handleClick: function() {
PlaylistButton.prototype.handleClick.call(this);
this.player().cloudinary.playlist().playPrevious();
}
});
// Register the component with Video.js, so it can be used in players.
videojs.default.registerComponent('NextButton', NextButton);
videojs.default.registerComponent('PreviousButton', PreviousButton);
// Cloudinary Video Player related code
// ====================================
var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
// Initialize player with only the controlBar's 'playToggle' and our
// custom components set.
var player = cld.videoPlayer('player', {
videojs: {
controlBar: { children: ['PreviousButton', 'playToggle', 'NextButton'] }
}
});
player.playlist([
{ publicId: 'elephants' },
'sea_turtle'], { autoAdvance: 0, repeat: true });
function updateSource() {
var divElem = document.querySelector("div#source-data");
publicIdElem = divElem.querySelector("#public-id-placeholder");
sourceUrlElem = divElem.querySelector("#source-url-placeholder");
publicIdElem.innerText = "Public Id: " + player.currentPublicId();
sourceUrlElem.innerText = "Source URL: " + player.currentSourceUrl();
divElem.style.display = 'block';
}
player.on('sourcechanged', updateSource);
</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>