TASK: Add preview page for player testings

parent ec3c5bf5
Pipeline #1475 passed with stage
in 1 minute and 44 seconds
......@@ -128,6 +128,7 @@ RUN GPG_KEYS=B0F4253373F8F6F510D42178520A9993A1C052F8 \
COPY docker/nginx.conf /etc/nginx/nginx.conf
COPY docker/default.conf /etc/nginx/conf.d/default.conf
COPY docker/data /data
COPY sandbox /sandbox
COPY dist/* /data/
EXPOSE 80
......
<!DOCTYPE html>
<html>
<head>
<title>medialib.tv video player - preview sandbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.3">
<!-- STYLES -->
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-weight: 700;
font-family: "Roboto";
max-width:1000px;
margin: 0 auto;
padding:0 50px 50px;
}
.header {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
a {
color: #00B8D4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.header svg {
width: 120px !important;
}
svg {
width: 30vw;
height: auto;
}
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.help-links {
margin-top: 1rem;
}
.help-link {
font-size: 18px;
color: rgb(0, 184, 212);
text-decoration: none;
}
</style>
<!-- SCRIPTS -->
<script type="text/javascript" src="https://player.medialib.tv/player.full.min.js"></script>
</head>
<body>
<header class="header">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 462 462">
<g fill="none" fill-rule="evenodd">
<path fill="#00B8D4" d="M0 0h462v462H0z"/>
<path fill="#FFF" d="M33.484 299v-25.74h9.792c7.056 0 10.332 3.132 10.332 8.604v.144c0 5.4-3.636 8.316-10.008 8.316h-2.772V299h-7.344zm7.344-13.716h2.124c2.376 0 3.636-1.116 3.636-3.24v-.144c0-2.196-1.296-3.096-3.6-3.096h-2.16v6.48zM56.956 299h17.136v-5.724h-9.72V273.26h-7.416V299zm18.864 0l8.244-25.74h9.54l8.172 25.74h-7.812l-1.368-4.788h-8.532L82.696 299H75.82zm12.528-19.764l-2.844 9.9h5.652l-2.808-9.9zM107.86 299v-11.016l-8.388-14.724h8.028l4.356 8.676 4.356-8.676h7.056l-7.992 14.724V299h-7.416zm18.18 0h18.36v-5.688h-11.016v-4.68h8.316v-5.256h-8.316v-4.428h10.44v-5.688H126.04V299zm22.032 0v-25.74h10.08c6.732 0 10.476 2.736 10.476 8.172v.144c0 3.672-1.944 5.724-4.644 6.768L170.14 299h-7.776l-5.22-9.216h-1.728V299h-7.344zm7.344-14.004h2.376c2.484 0 3.708-1.044 3.708-3.132v-.144c0-2.088-1.296-2.916-3.672-2.916h-2.412v6.192zm-67.154-63.85c6.072 0 7.994 5.26 7.994 11.84v25.5h15.28V230.25c0-12.648-6.173-23.172-21.25-23.172-7.79 0-13.256 3.238-16.19 6.173-3.542-3.842-8.4-6.17-14.37-6.17-4.25 0-8.6 1.518-11.534 3.845v-3.035h-15.28v50.593h15.28v-33.29c2.023-2.53 5.06-4.05 8.398-4.05 6.072 0 7.994 5.263 7.994 11.84v25.5h15.28V230.25c0-1.62-.203-3.136-.405-4.654 2.02-2.732 5.36-4.453 8.8-4.453zm58.386 24.184c5.363 0 8.804-2.63 10.828-6.375l12.142 8.196c-4.654 7.29-12.85 12.147-22.868 12.147-13.357 0-25.804-10.524-25.804-26.107 0-14.876 10.524-26.108 26.107-26.108 12.85 0 24.387 8.4 24.387 24.388 0 1.416-.1 2.934-.304 4.452H135.62c.707 6.78 6.475 9.41 11.028 9.41zm-.506-26.006c-3.642 0-9.005 1.62-10.422 7.69h20.643c-.81-5.363-5.262-7.69-10.22-7.69zm32.18 13.863c0-13.863 9.51-26.107 24.486-26.107 4.15 0 8.197 1.417 11.13 3.845V186.64h15.28v71.844h-15.28v-2.934c-2.933 2.428-6.98 3.744-11.13 3.744-14.976 0-24.487-12.244-24.487-26.107zm27.016 12.143c3.744 0 6.476-1.417 8.6-4.15v-15.886c-2.124-2.732-4.856-4.25-8.6-4.25-7.286 0-11.637 5.464-11.637 12.143 0 6.678 4.355 12.143 11.64 12.143zm35.416 13.154h15.38V207.89h-15.38v50.594zm0-56.92h15.38V186.69h-15.38v14.876zm114.158-.05h15.38V186.64h-15.38v14.875zm-89.164 31.673c0-13.863 9.512-26.107 24.488-26.107 4.148 0 8.196 1.417 11.13 3.845v-3.035h15.28v50.594h-15.28v-2.934c-2.934 2.428-6.982 3.744-11.13 3.744-14.976 0-24.488-12.244-24.488-26.107zm27.017 12.143c3.744 0 6.476-1.417 8.6-4.15v-15.886c-2.124-2.732-4.856-4.25-8.6-4.25-7.285 0-11.636 5.464-11.636 12.143 0 6.678 4.35 12.143 11.632 12.143zm33.415 39.31h20v-120h-20v120zm28.732-26.406h15.38V207.64h-15.38v50.594zm76-25.047c0 13.863-9.512 26.107-24.488 26.107-4.148 0-8.196-1.316-11.13-3.744v2.934h-15.28V186.64h15.28v24.285c2.934-2.428 6.982-3.845 11.13-3.845 14.976 0 24.488 12.244 24.488 26.107zm-25.017 12.143c7.285 0 11.636-5.465 11.636-12.143 0-6.68-4.35-12.143-11.632-12.143-3.744 0-6.578 1.518-8.602 4.25v15.887c2.024 2.736 4.858 4.15 8.602 4.15z"/>
</g>
</svg>
<div class="help-links">
medialib.tv video player - preview sandbox
</div>
</header>
<main class="main">
<!-- YOUTUBE TEST -->
<h2>Youtube video</h2>
<video id="video1" class="player" width="1920" height="1080" data-youtube-id="YE7VzlLtp-4" data-skin="dark" poster="/sandbox/video/snapshots/player_local.jpg"></video>
<!-- VIMEO TEST -->
<h2>Vimeo video</h2>
<video id="video-vimeo" class="player" width="1920" height="1080" data-vimeo-id="1084537" poster="/sandbox/video/snapshots/player_local.jpg"> </video>
<!-- HLS TEST -->
<h2>HLS stream</h2>
<video id="video-hsl" class="player" width="1920" height="1080" poster="/sandbox/video/snapshots/player_local.jpg" preload="none">
<source type="application/x-mpegURL" src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8" />
</video>
<!-- LOCAL TEST -->
<h2>Local video, single source, with poster and bound play event</h2>
<video id="video2" class="player" width="1920" height="1080" poster="/sandbox/video/snapshots/player_local.jpg" preload="none" src="/sandbox/video/mp4/sintel_trailer-1080p.mp4"></video>
<!-- LOCAL TEST -->
<h2>Local video with poster and resolution test, dark skin</h2>
<video id="video-subtitles" class="sublime" width="640" height="360" poster="/sandbox/video/snapshots/player_local.jpg" data-volume="0.7" data-skin="dark">
<source src="/sandbox/video/mp4/sintel_trailer-1080p.mp4" type="video/mp4" data-quality="hd" />
<source src="/sandbox/video/mp4/sintel_trailer-480p.mp4" type="video/mp4"/>
<source src="/sandbox/video/webm/sintel_trailer-1080p.webm" type="video/webm" data-quality="hd" />
<source src="/sandbox/video/webm/sintel_trailer-480p.webm" type="video/webm" />
</video>
<!-- LIGHTBOX TEST -->
<!-- LOCAL TEST -->
<h2>Local video with poster opened in lightbox</h2>
<a href="#video3" class="player">Open the lightbox</a>
<video id="video3" data-skin="dark" width="640" height="360" poster="/sandbox/video/snapshots/player_local.jpg" data-skin="dark">
<source src="/sandbox/video/mp4/sintel_trailer-480p.mp4" type="video/mp4" />
<source src="/sandbox/video/mp4/sintel_trailer-1080p.mp4" type="video/mp4" data-quality="hd" />
<source src="/sandbox/video/webm/sintel_trailer-480p.webm" type="video/webm" />
<source src="/sandbox/video/webm/sintel_trailer-1080p.webm" type="video/webm" data-quality="hd" />
</video>
<!-- LOCAL TEST -->
<h2>Youtube opened in lightbox</h2>
<a href="#video4" class="player">Open the lightbox</a>
<video id="video4" width="1920" height="1080" data-youtube-id="YE7VzlLtp-4" data-skin="dark" ></video>
<!-- LOCAL TEST -->
<h2>Vimeo opened in lightbox</h2>
<a href="#videovimeol" class="player">Open the lightbox</a>
<video id="videovimeol" width="1920" height="1080" data-vimeo-id="1084537" data-skin="dark" ></video>
<script>
var events = ['play', 'paused', 'ended', 'volume-changed', 'ready', 'lightbox-launched', 'lightbox-closed', 'fullscreen-entered', 'fullscreen-left', 'fullscreen-changed'];
for (var i = 0; i < events.length; i++) {
var eventname = events[i];
console.log('Binding ' + eventname);
player.on('video2',eventname,function(e){
console.log('EVENT video2: ' + e.type);
});
player.on('video3',eventname,function(e){
console.log('EVENT video3 (LB): ' + e.type);
});
player.on('video1',eventname,function(e){
console.log('EVENT video1 (YT): ' + e.type);
});
player.on('video-vimeo',eventname,function(e){
console.log('EVENT video1 (YT): ' + e.type);
});
player.on('videovimeol',eventname,function(e){
console.log('EVENT video1 (YT): ' + e.type);
});
}
</script>
</main>
</body>
</html>
......@@ -1294,22 +1294,22 @@
/* Poster Styles */
.vjs-poster {
/* Cross browser opacity */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
.transition(all 0.2s);
}
&:hover .vjs-poster{
/* Cross browser opacity */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
&:hover .vjs-poster{
/* Cross browser opacity */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
// make youtube player fullscreen
&.vjs-youtube > div:first-child{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment