cloudinary-video-player
Version:
Cloudinary Video Player
301 lines (240 loc) • 11.1 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>
<script type="text/javascript">
window.addEventListener('load', function(){
var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
player = cld.videoPlayer('player');
player.playlist([
'snow_deer',
'sea_turtle',
'snow_horses'
], { autoAdvance: 0 }).play();
// Button 'click' event handlers
document.querySelector("#vid-seek-minus").addEventListener('click', function() {
player.currentTime(player.currentTime() - 10);
});
document.querySelector("#vid-seek-plus").addEventListener('click', function() {
player.currentTime(player.currentTime() + 10);
});
document.querySelector("#vid-play-prev").addEventListener('click', function() {
player.playPrevious();
});
document.querySelector("#vid-play").addEventListener('click', function() {
player.play();
});
document.querySelector("#vid-play-next").addEventListener('click', function() {
player.playNext();
});
document.querySelector("#vid-pause").addEventListener('click', function() {
player.pause();
});
document.querySelector("#vid-stop").addEventListener('click', function() {
player.stop();
});
document.querySelector("#vid-mute").addEventListener('click', function() {
player.mute();
});
document.querySelector("#vid-unmute").addEventListener('click', function() {
player.unmute();
});
document.querySelector("#vid-volume-minus").addEventListener('click', function() {
player.volume(player.volume() - 0.1);
});
document.querySelector("#vid-volume-plus").addEventListener('click', function() {
player.volume(player.volume() + 0.1);
});
document.querySelector("#vid-maximize").addEventListener('click', function() {
player.maximize();
});
document.querySelector("#vid-toggle-controls").addEventListener('click', function() {
player.controls(!player.controls());
});
// Register to some video player events
var eventTypes = ['play', 'pause', 'volumechange', 'mute', 'unmute', 'fullscreenchange',
'seek', 'sourcechanged', 'percentsplayed', 'ended'];
var eventsDiv = document.querySelector('#vid-events');
eventTypes.forEach(function(eventType) {
player.on(eventType, function(event) {
var eventStr = eventType;
if (event.eventData) {
eventStr = eventStr + ": " + JSON.stringify(event.eventData);
}
var text = document.createTextNode(eventStr);
var textDiv = document.createElement('div');
textDiv.appendChild(text);
eventsDiv.appendChild(textDiv);
updateEvents();
})
});
function updateEvents() {
var eventsDiv = document.querySelector('#vid-events');
eventsDiv.scrollTop = eventsDiv.scrollHeight;
}
}, 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">API and Events</h3>
<div class="video-container">
<video
id="player"
playsinline
controls
muted
class="cld-video-player"
width="600"
></video>
<div class="mt-4">
<div class="btn-group">
<button id="vid-seek-minus" class="btn btn-outline-primary mb-2">-10 seconds</button>
<button id="vid-seek-plus" class="btn btn-outline-primary border-primary mb-2">+10 seconds</button>
</div>
<div class="btn-group">
<button id="vid-play-prev" class="btn btn-outline-primary mb-2">Previous</button>
<button id="vid-play-next" class="btn btn-outline-primary mb-2">Next</button>
<button id="vid-play" class="btn btn-outline-primary mb-2">Play</button>
<button id="vid-pause" class="btn btn-outline-primary mb-2">Pause</button>
<button id="vid-stop" class="btn btn-outline-primary mb-2">Stop</button>
</div>
</div>
<div>
<div class="btn-group">
<button id="vid-mute" class="btn btn-outline-primary mb-2">Mute</button>
<button id="vid-unmute" class="btn btn-outline-primary mb-2">Unmute</button>
<button id="vid-volume-minus" class="btn btn-outline-primary mb-2">Volume -10%</button>
<button id="vid-volume-plus" class="btn btn-outline-primary mb-2">Volume +10%</button>
</div>
<div class="btn-group">
<button id="vid-maximize" class="btn btn-outline-primary mb-2">Maximize</button>
<button id="vid-toggle-controls" class="btn btn-outline-primary mb-2">Toggle Controls</button>
</div>
</div>
<div id="vid-events" class="alert alert-secondary text-center mt-4 p-4 w-100" style="overflow: scroll; height: 150px"></div>
<p class="mt-4">
<a href="https://cloudinary.com/documentation/video_player_api_reference#events">API and Events documentation</a>
</p>
</div>
<h3>Example Code:</h3>
<pre>
<code class="language-html">
<video
id="player"
controls
muted
class="cld-video-player"
width="600"
></video>
<div>
<button id="vid-seek-minus" class="btn btn-default">-10 seconds</button>
<button id="vid-seek-plus" class="btn btn-default">+10 seconds</button>
<button id="vid-play-prev" class="btn btn-default">Previous</button>
<button id="vid-play-next" class="btn btn-default">Next</button>
<button id="vid-play" class="btn btn-default">Play</button>
<button id="vid-pause" class="btn btn-default">Pause</button>
<button id="vid-stop" class="btn btn-default">Stop</button>
<button id="vid-mute" class="btn btn-default">Mute</button>
<button id="vid-unmute" class="btn btn-default">Unmute</button>
<button id="vid-volume-minus" class="btn btn-default">Volume -10%</button>
<button id="vid-volume-plus" class="btn btn-default">Volume +10%</button>
<button id="vid-maximize" class="btn btn-default">Maximize</button>
<button id="vid-toggle-controls" class="btn btn-default">Toggle Controls</button>
</div>
<div id="vid-events" class="alert alert-secondary text-center mt-4 p-4 w-100" style="overflow: scroll; height: 150px"></div>
</code>
<code class="language-javascript">
var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
var player = cld.videoPlayer('player');
player.playlist([
'snow_deer',
'sea_turtle',
'snow_horses'
], { autoAdvance: 0 }).play();
// Button 'click' event handlers
document.querySelector("#vid-seek-minus").addEventListener('click', function() {
player.currentTime(player.currentTime() - 10);
});
document.querySelector("#vid-seek-plus").addEventListener('click', function() {
player.currentTime(player.currentTime() + 10);
});
document.querySelector("#vid-play-prev").addEventListener('click', function() {
player.playPrevious();
});
document.querySelector("#vid-play").addEventListener('click', function() {
player.play();
});
document.querySelector("#vid-play-next").addEventListener('click', function() {
player.playNext();
});
document.querySelector("#vid-pause").addEventListener('click', function() {
player.pause();
});
document.querySelector("#vid-stop").addEventListener('click', function() {
player.stop();
});
document.querySelector("#vid-mute").addEventListener('click', function() {
player.mute();
});
document.querySelector("#vid-unmute").addEventListener('click', function() {
player.unmute();
});
document.querySelector("#vid-volume-minus").addEventListener('click', function() {
player.volume(player.volume() - 0.1);
});
document.querySelector("#vid-volume-plus").addEventListener('click', function() {
player.volume(player.volume() + 0.1);
});
document.querySelector("#vid-maximize").addEventListener('click', function() {
player.maximize();
});
document.querySelector("#vid-toggle-controls").addEventListener('click', function() {
player.controls(!player.controls());
});
// Register to some video player events
var eventTypes = ['play', 'pause', 'volumechange', 'mute', 'unmute', 'fullscreenchange',
'seek', 'sourcechanged', 'percentsplayed', 'ended'];
var eventsDiv = document.querySelector('#vid-events');
eventTypes.forEach(function(eventType) {
player.on(eventType, function(event) {
var eventStr = eventType;
if (event.eventData) {
eventStr = eventStr + ": " + JSON.stringify(event.eventData);
}
var text = document.createTextNode(eventStr);
var textDiv = document.createElement('div');
textDiv.appendChild(text);
eventsDiv.appendChild(textDiv);
updateEvents();
})
});
function updateEvents() {
var eventsDiv = document.querySelector('#vid-events');
eventsDiv.scrollTop = eventsDiv.scrollHeight;
}
</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>