@skylineos/videojs-clsp
Version:
Video JS plugin for Skyline Technology Solutions' CLSP Player - https://github.com/skylineos/clsp-player
125 lines (121 loc) • 3.34 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>CLSP VideoJS Plugin Simple Demo ~ DIST ~</title>
<link
rel="shortcut icon"
href="../favicon.ico"
>
<link
rel="stylesheet"
href="//use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous"
>
<link
rel="stylesheet"
href="../../dist/videojs-clsp.css"
>
<link
rel="stylesheet"
href="./styles.css"
>
<script
type="text/javascript"
src="//cdn.jsdelivr.net/npm/@babel/polyfill@7.8.7/dist/polyfill.min.js"
></script>
<script
type="text/javascript"
src="//vjs.zencdn.net/7.7.5/video.min.js"
></script>
<script
type="text/javascript"
src="//cdn.jsdelivr.net/npm/videojs-errors@4.3.2/dist/videojs-errors.min.js"
></script>
</head>
<body>
<div class="header">
<img src="../skyline_logo.png" />
<h1 id="page-title">CLSP VideoJS Plugin Simple Demo <br /> ~ DIST ~</h1>
<div class="versions">
<div class="version">
<span class="product">videojs</span>
<span id="videojs-version">v</span>
</div>
<div class="version">
<span class="product">videojs-errors</span>
<span id="videojs-errors-version">v</span>
</div>
</div>
</div>
<div class="content container-fit">
<div class="stream-container">
<input
id="stream-src"
name="stream-src"
value="clsp://172.28.12.57:9001/FairfaxVideo0520"
disabled
/>
<button
onclick="window.clspPlayerControls.changeSrc()"
title="Change Stream"
disabled
>Change Stream</button>
</div>
<div class="video-container container-fit">
<video
id="my-video"
class="video-js vjs-default-skin"
muted
>
<source
src="clsp://172.28.12.57:9001/FairfaxVideo0520"
type="video/mp4; codecs='avc1.42E01E'"
/>
<source
src="http://172.28.12.57:1935/rtplive/FairfaxVideo0510/playlist.m3u8"
type="application/x-mpegURL"
/>
</video>
</div>
<div class="controls">
<button
onclick="window.clspPlayerControls.onPlay()"
title="play"
>
<i class="fas fa-play"></i>
</button>
<button
onclick="window.clspPlayerControls.onStop()"
title="stop"
>
<i class="fas fa-stop"></i>
</button>
<button
onclick="window.clspPlayerControls.onFullscreen()"
title="fullscreen"
>
<i class="fas fa-expand"></i>
</button>
<button
onclick="window.clspPlayerControls.onDestroy()"
title="destroy"
>
<i class="fas fa-bomb"></i>
</button>
</div>
</div>
<script
type="text/javascript"
src="../../dist/videojs-clsp.min.js"
></script>
<script
type="text/javascript"
src="./index.js"
></script>
<script type="text/javascript">
window.clspPlayerControls.initialize();
</script>
</body>
</html>