cloudinary-video-player
Version:
Cloudinary Video Player
135 lines (112 loc) • 5.29 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' });
players = cld.videoPlayers('.cld-video-player', {
autoplay: true,
controls: true,
transformation: { width: 700, crop: 'limit' },
// We use html data-attr to set colors, but you can also do it here:
// colors: { "base": "#111", "accent": "#03a9f4", "text": "#ffeb3b" }
});
}, 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">Colors API</h3>
<p>Set custom colors via JS config or HTML data attributes</p>
<h3 class="text-primary">Player 1</h3>
<div class="video-container mt-4 mb-4">
<video
muted
playsinline
data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
data-cld-colors='{ "base": "#f44336", "accent": "#a70b00", "text": "#fff" }'
class="cld-video-player cld-video-player-skin-light"
></video>
</div>
<h3 class="text-primary">Player 2</h3>
<div class="video-container mt-4 mb-4">
<video
muted
playsinline
data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
data-cld-colors='{ "base": "#111", "accent": "#03a9f4", "text": "#ffeb3b" }'
class="cld-video-player cld-video-player-skin-dark"
></video>
</div>
<h3 class="text-primary">Player 3</h3>
<div class="video-container mt-4 mb-4">
<video
muted
playsinline
data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
data-cld-colors='{ "base": "#eef9ee", "accent": "#00e64c", "text": "#009688" }'
class="cld-video-player cld-video-player-skin-light"
></video>
</div>
<p class="mt-4">
<a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
</p>
<h3 class="mt-4">Example Code:</h3>
<pre>
<code class="language-html">
<video
muted
data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
data-cld-colors='{ "base": "#3b4146", "accent": "#17a2b8", "text": "#e83e8c" }'
class="cld-video-player cld-video-player-skin-light"
></video>
<video
muted
data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
data-cld-colors='{ "base": "#111", "accent": "#03a9f4", "text": "#ffeb3b" }'
class="cld-video-player cld-video-player-skin-dark"
></video>
<video
muted
data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
data-cld-colors='{ "base": "#eef9ee", "accent": "#00e64c", "text": "#009688" }'
class="cld-video-player cld-video-player-skin-light"
></video>
</code>
<code class="language-javascript">
var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
// Initialize players
var players = cld.videoPlayers('.cld-video-player', {
autoplay: true,
controls: true,
transformation: { width: 700, crop: 'limit' },
// We use html data-attr to set colors, but you can also do it here:
// colors: { "base": "#111", "accent": "#03a9f4", "text": "#ffeb3b" }
});
</code>
</pre>
</div>
</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>