TASK: Add preview page for player testings (a19aae7d) · Commits · medialib.tv 1.0 / player

Dockerfile

+1 −0

Original line number	Diff line number	Diff line
		@@ -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

docker/data/preview.html

0 → 100644

+157 −0

Original line number	Diff line number	Diff line
		<!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>