pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

WIP player debug/test page. #1408

gek/video-test-page
Gabe Kangas 4 years ago
parent
0319651fe8
commit
fc5b69c031
9 changed files with 6255 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      controllers/index.go
  2. 1
      router/middleware/cors.go
  3. 1000
      webroot/test/README.md
  4. 322
      webroot/test/index.html
  5. 150
      webroot/test/old-index.html
  6. 3553
      webroot/test/scripts/dash-manifest-object.json
  7. 380
      webroot/test/scripts/hls-manifest-object.json
  8. 768
      webroot/test/scripts/index.js
  9. 76
      webroot/test/scripts/sources.json

8
controllers/index.go
Unescape View File

@ -35,7 +35,7 @@ type MetadataPage struct {
// IndexHandler handles the default index route. // IndexHandler handles the default index route.
func IndexHandler(w http.ResponseWriter, r *http.Request) { func IndexHandler(w http.ResponseWriter, r *http.Request) {
middleware.EnableCors(w) middleware.EnableCors(w)
isIndexRequest := r.URL.Path == "/" || filepath.Base(r.URL.Path) == "index.html" || filepath.Base(r.URL.Path) == "" isIndexRequest := r.URL.Path == "/" || r.URL.Path == "/test/" || filepath.Base(r.URL.Path) == "index.html" || filepath.Base(r.URL.Path) == ""
// For search engine bots and social scrapers return a special // For search engine bots and social scrapers return a special
// server-rendered page. // server-rendered page.
@ -65,8 +65,10 @@ func IndexHandler(w http.ResponseWriter, r *http.Request) {
// Set a cache control max-age header // Set a cache control max-age header
middleware.SetCachingHeaders(w, r) middleware.SetCachingHeaders(w, r)
// Set our global HTTP headers // Set our global HTTP headers except on our test page
middleware.SetHeaders(w) if r.URL.Path != "/test/" {
middleware.SetHeaders(w)
}
http.ServeFile(w, r, path.Join(config.WebRoot, r.URL.Path)) http.ServeFile(w, r, path.Join(config.WebRoot, r.URL.Path))
} }

1
router/middleware/cors.go
Unescape View File

@ -7,4 +7,5 @@ import (
// EnableCors enables the CORS header on the responses. // EnableCors enables the CORS header on the responses.
func EnableCors(w http.ResponseWriter) { func EnableCors(w http.ResponseWriter) {
w.Header().Set("Access-Control-Allow-Origin", "*") w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Headers", "Range")
} }

1000
webroot/test/README.md
View File

File diff suppressed because it is too large Load Diff

322
webroot/test/index.html
Unescape View File

@ -0,0 +1,322 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Owncast Player Test</title>
<link rel="icon" href="/logo" />
<!-- <link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> -->
<link href="/js/web_modules/tailwindcss/dist/tailwind.min.css" rel="stylesheet" />
<link href="/js/web_modules/videojs/video-js.min.css" rel="stylesheet" />
<style>
.form-check {
background-color: hsl(0, 0%, 90%);
margin-block: 0.5rem;
padding: 0.25em 0.25em 0.25em 1.75em;
width: 700px;
width: fit-content;
}
#player-fixture {
min-height: 250px;
}
#segment-metadata {
list-style: none;
}
#segment-metadata pre {
overflow: scroll;
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/shaka-player@3.2.0/dist/shaka-player.compiled.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mux.js@5.13.0/dist/mux.min.js"></script>
<script defer src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@videojs/http-streaming@2.10.3/dist/videojs-http-streaming.min.js"></script>
</head>
<body class="m-4">
<script>
// if we're on IE, load up the load index page
var result = /MSIE\s(\d+)\.\d/.exec(navigator.userAgent);
var version = result && parseFloat(result[1]);
if (
!version &&
/Trident\/7.0/i.test(navigator.userAgent) &&
/rv:11.0/.test(navigator.userAgent)
) {
// IE 11 has a different user agent string than other IE versions
version = 11.0;
}
if (version) {
window.location.href = './old-index.html';
}
</script>
<nav class="flex items-center justify-between flex-wrap bg-purple-700 p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<img class="fill-current h-8 w-8 mr-2" width="54" height="54" src="/logo">
<span class="font-semibold text-xl tracking-tight">Owncast Player Test</span>
</div>
<div class="block lg:hidden">
<button
class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow">
<a href="https://owncast.onlline/docs"
class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
Docs
</a>
</div>
<div id="clock">
</div>
&nbsp;
<div>
Displayed segment latency: <span id="displayedSegmentLatency"></span>s
<div>
</nav>
<div class="flex flex-wrap -mx-1 overflow-hidden">
<div class="my-1 px-1 w-1/3 overflow-hidden">
<div id="player-fixture" style="aspect-ratio: 16/9; min-height: initial;"></div>
VideoJS (VHS)
</div>
<div class="my-1 px-1 w-1/3 overflow-hidden">
<video id="shaka-player" muted autoplay poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
controls></video>
Shaka (mux.js)
</div>
<div class="my-1 px-1 w-1/3 overflow-hidden">
<div id="clappr-player" style="width: 100%; height: 90%;"></div>
<script>
window.clapprPlayer = new Clappr.Player({
source: window.currentSrc,
parentId: '#clappr-player',
mute: true,
autoPlay: true,
width: '100%',
height: '100%'
});
</script>
Clappr Player (hls.js)
</div>
<div class="my-1 px-1 w-1/3 overflow-hidden">
<video id="native-player" muted autoplay controls></video>
Native HTML5 (Safari/iOS/Mac only)
</div>
<div class="my-1 px-1 w-1/3 overflow-hidden">
<!-- Column Content -->
</div>
<div class="my-1 px-1 w-1/3 overflow-hidden">
<!-- Column Content -->
</div>
</div>
<div class="flex flex-wrap -mx-1 overflow-hidden">
<div class="my-1 px-1 w-1/3 overflow-hidden">
<div class="input-group mb-2">
<span class="input-group-text"><label for="load-source">Test streams</label></span>
<select id="load-source" class="form-select">
<optgroup label="hls"></optgroup>
<optgroup label="live"></optgroup>
</select>
</div>
<label for="url" class="form-label">Source URL</label>
<div class="input-group">
<span class="input-group-text"><label for="url">Url</label></span>
<input id="url" type="url" class="form-control" />
</div>
<label for="type" class="form-label">Source Type</label>
<div class="input-group">
<span class="input-group-text"><label for="type">Type</label></span>
<input id="type" type="text" class="form-control" />
</div>
<select id="representations" class="form-select"></select>
<button id="load-url" type="button" class="btn btn-primary my-2">
Load
</button>
</div>
<div class="my-1 px-1 w-1/3 overflow-hidden">
Current Segment
<ul id="segment-metadata" class="col-8"></ul>
</div>
<div class="my-1 px-1 w-1/3 overflow-hidden">
<div class="player-stats">
<dl>
<dt>Current Time:</dt>
<dd class="current-time-stat">0</dd>
<dt>Buffered:</dt>
<dd class="buffered-stat">-</dd>
<dt>Video Buffered:</dt>
<dd class="video-buffered-stat">-</dd>
<dt>Audio Buffered:</dt>
<dd class="audio-buffered-stat">-</dd>
<dt>Seekable:</dt>
<dd>
<span class="seekable-start-stat">-</span> -
<span class="seekable-end-stat">-</span>
</dd>
<dt>Video Bitrate:</dt>
<dd class="video-bitrate-stat">0 kbps</dd>
<dt>Measured Bitrate:</dt>
<dd class="measured-bitrate-stat">0 kbps</dd>
<dt>Video Timestamp Offset</dt>
<dd class="video-timestampoffset">0</dd>
<dt>Audio Timestamp Offset</dt>
<dd class="audio-timestampoffset">0</dd>
</dl>
</div>
</div>
<div class="my-1 px-1 w-1/3 overflow-hidden">
<div class="options">
<div class="form-check">
<input id="minified" type="checkbox" class="form-check-input" />
<label class="form-check-label" for="minified">Minified VHS (reloads player)</label>
</div>
<div class="form-check">
<input id="sync-workers" type="checkbox" class="form-check-input" />
<label class="form-check-label" for="sync-workers">Synchronous Web Workers (reloads
player)</label>
</div>
<div class="form-check">
<input id="liveui" type="checkbox" class="form-check-input" checked />
<label class="form-check-label" for="liveui">Enable the live UI (reloads player)</label>
</div>
<div class="form-check">
<input id="fluid" type="checkbox" class="form-check-input" />
<label class="form-check-label" for="fluid">Fluid mode</label>
</div>
<div class="form-check">
<input id="debug" type="checkbox" class="form-check-input" />
<label class="form-check-label" for="debug">Debug Logging</label>
</div>
<div class="form-check">
<input id="muted" type="checkbox" class="form-check-input" />
<label class="form-check-label" for="muted">Muted</label>
</div>
<div class="form-check">
<input id="autoplay" type="checkbox" class="form-check-input" />
<label class="form-check-label" for="autoplay">Autoplay</label>
</div>
<div class="form-check">
<input id="llhls" type="checkbox" class="form-check-input" />
<label class="form-check-label" for="llhls">[EXPERIMENTAL] Enables support for ll-hls (reloads
player)</label>
</div>
<div class="form-check">
<input id="buffer-water" type="checkbox" class="form-check-input" />
<label class="form-check-label" for="buffer-water">[EXPERIMENTAL] Use Buffer Level for ABR
(reloads
player)</label>
</div>
<div class="form-check">
<input id="exact-manifest-timings" type="checkbox" class="form-check-input" />
<label class="form-check-label" for="exact-manifest-timings">[EXPERIMENTAL] Use exact manifest
timings for segment choices
(reloads player)</label>
</div>
<div class="form-check">
<input id="pixel-diff-selector" type="checkbox" class="form-check-input" />
<label class="form-check-label" for="pixel-diff-selector">[EXPERIMENTAL] Use the Pixel
difference
resolution selector
(reloads player)</label>
</div>
<div class="form-check">
<input id="override-native" type="checkbox" class="form-check-input" checked />
<label class="form-check-label" for="override-native">Override Native (reloads player)</label>
</div>
<div class="form-check">
<input id="mirror-source" type="checkbox" class="form-check-input" checked />
<label class="form-check-label" for="mirror-source">Mirror sources from player.src (reloads
player,
uses EXPERIMENTAL
sourceset option)</label>
</div>
<div class="input-group">
<span class="input-group-text"><label for="preload">Preload (reloads player)</label></span>
<select id="preload" class="form-select">
<option selected>auto</option>
<option>none</option>
<option>metadata</option>
</select>
</div>
</div>
</div>
</div>
<script src="scripts/index.js"></script>
<script>
window.startDemo(function (player) {
// do something with setup player
});
</script>
<script>
async function setupShaka() {
shaka.polyfill.installAll();
const video = document.getElementById('shaka-player');
const player = new shaka.Player(video);
player.configure('manifest.defaultPresentationDelay', 6.0 /* seconds */);
player.configure('streaming.rebufferingGoal', 5.0 /* seconds */);
window.shaka = player;
try {
await player.load(window.currentSrc);
} catch (e) {
// onError is executed if the asynchronous load fails.
console.error(e);
}
}
setupShaka();
</script>
<script type="text/javascript">
function setupclock() {
var refresh = 1000; // Refresh rate in milli seconds
mytime = setTimeout('displayclock()', refresh)
}
function displayclock() {
var x = new Date().toLocaleTimeString();
document.getElementById('clock').innerHTML = x;
setupclock();
}
setupclock();
</script>
</body>
</html>

150
webroot/test/old-index.html
Unescape View File

@ -0,0 +1,150 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>videojs-http-streaming Demo</title>
<link rel="icon" href="logo.svg">
<link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
<link href="node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.css" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.info {
background-color: #eee;
border: thin solid #333;
border-radius: 3px;
padding: 0 5px;
margin: 20px 0;
}
label {
display: block;
width: 700px;
width: fit-content;
margin-top: 4px;
}
.options label {
background-color: hsl(0, 0%, 90%);
padding: 0.25em;
margin: 0.25em;
}
input[type=url], select {
min-width: 600px;
}
#preload {
min-width: auto;
}
h3 {
margin-bottom: 5px;
}
#keysystems {
display: block;
}
</style>
</head>
<body>
<div id="player-fixture">
</div>
<label>Representations</label>
<select id='representations'></select>
<h3>Options</h3>
<div class="options">
<label>
<input id=minified type="checkbox">
Minified VHS (reloads player)
</label>
<label>
<input id=sync-workers type="checkbox">
Synchronous Web Workers (reloads player)
</label>
<label>
<input id=liveui type="checkbox">
Enable the live UI (reloads player)
</label>
<label>
<input id=debug type="checkbox">
Debug Logging
</label>
<label>
<input id=muted type="checkbox">
Muted
</label>
<label>
<input id=autoplay type="checkbox">
Autoplay
</label>
<label>
<input id=llhls type="checkbox">
[EXPERIMENTAL] Enables support for ll-hls (reloads player)
</label>
<label>
<input id=buffer-water type="checkbox">
[EXPERIMENTAL] Use Buffer Level for ABR (reloads player)
</label>
<label>
<input id=exact-manifest-timings type="checkbox">
[EXPERIMENTAL] Use exact manifest timings for segment choices (reloads player)
</label>
<label>
<input id=pixel-diff-selector type="checkbox">
[EXPERIMENTAL] Use the Pixel difference resolution selector (reloads player)
</label>
<label>
<input id=override-native type="checkbox" checked>
Override Native (reloads player)
</label>
<label>
<input id=mirror-source type="checkbox" checked>
Mirror sources from player.src (reloads player, uses EXPERIMENTAL sourceset option)
</label>
<label>
Preload (reloads player)
<select id=preload>
<option selected>auto</option>
<option>none</option>
<option>metadata</option>
</select>
</label>
</div>
<h3>Load a URL</h3>
<label>Url:</label>
<input id=url type=url>
<label>Type: (uses url extension if blank, usually application/x-mpegURL or application/dash+xml)</label>
<input id=type type=text>
<label>Optional Keystems JSON:</label>
<textarea id=keysystems cols=100 rows=5></textarea>
<button id=load-url type=button>Load</button>
<h3>Load a Source</h3>
<select id=load-source>
<optgroup label="hls">
</optgroup>
<optgroup label="dash">
</optgroup>
<optgroup label="drm">
</optgroup>
<optgroup label="live">
</optgroup>
<optgroup label="low latency live">
</optgroup>
<optgroup label="json manifest object">
</optgroup>
</select>
<h3>Navigation</h3>
<ul>
<li><a href="test/debug.html">Run unit tests in browser.</a></li>
<li><a href="docs/api/">Read generated docs.</a></li>
<li><a href="utils/stats/">Stats</a></li>
</ul>
<script src="scripts/old-index.js"></script>
<script>
window.startDemo(function(player) {
// do something with setup player
});
</script>
</body>
</html>

3553
webroot/test/scripts/dash-manifest-object.json
View File

File diff suppressed because it is too large Load Diff

380
webroot/test/scripts/hls-manifest-object.json
Unescape View File

@ -0,0 +1,380 @@
{
"mediaGroups": {
"AUDIO": {
"audio": {
"default": {
"autoselect": true,
"default": true,
"language": "",
"uri": "combined-audio-playlists",
"playlists": [
{
"attributes": {},
"segments": [
{
"duration": 4.011,
"uri": "a-eng-0128k-aac-2c-s1.mp4",
"timeline": 0,
"map": {
"uri": "a-eng-0128k-aac-2c-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-s1.mp4",
"number": 0
},
{
"duration": 3.989,
"uri": "a-eng-0128k-aac-2c-s2.mp4",
"timeline": 0,
"map": {
"uri": "a-eng-0128k-aac-2c-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-s2.mp4",
"number": 1
},
{
"duration": 4.011,
"uri": "a-eng-0128k-aac-2c-s3.mp4",
"timeline": 0,
"map": {
"uri": "a-eng-0128k-aac-2c-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-s3.mp4",
"number": 2
},
{
"duration": 3.989,
"uri": "a-eng-0128k-aac-2c-s4.mp4",
"timeline": 0,
"map": {
"uri": "a-eng-0128k-aac-2c-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-s4.mp4",
"number": 3
},
{
"duration": 4.011,
"uri": "a-eng-0128k-aac-2c-s5.mp4",
"timeline": 0,
"map": {
"uri": "a-eng-0128k-aac-2c-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-s5.mp4",
"number": 4
},
{
"duration": 3.989,
"uri": "a-eng-0128k-aac-2c-s6.mp4",
"timeline": 0,
"map": {
"uri": "a-eng-0128k-aac-2c-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-s6.mp4",
"number": 5
},
{
"duration": 4.011,
"uri": "a-eng-0128k-aac-2c-s7.mp4",
"timeline": 0,
"map": {
"uri": "a-eng-0128k-aac-2c-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-s7.mp4",
"number": 6
},
{
"duration": 3.989,
"uri": "a-eng-0128k-aac-2c-s8.mp4",
"timeline": 0,
"map": {
"uri": "a-eng-0128k-aac-2c-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-s8.mp4",
"number": 7
},
{
"duration": 4.011,
"uri": "a-eng-0128k-aac-2c-s9.mp4",
"timeline": 0,
"map": {
"uri": "a-eng-0128k-aac-2c-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-s9.mp4",
"number": 8
},
{
"duration": 3.989,
"uri": "a-eng-0128k-aac-2c-s10.mp4",
"timeline": 0,
"map": {
"uri": "a-eng-0128k-aac-2c-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-s10.mp4",
"number": 9
},
{
"duration": 4.011,
"uri": "a-eng-0128k-aac-2c-s11.mp4",
"timeline": 0,
"map": {
"uri": "a-eng-0128k-aac-2c-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-s11.mp4",
"number": 10
},
{
"duration": 3.989,
"uri": "a-eng-0128k-aac-2c-s12.mp4",
"timeline": 0,
"map": {
"uri": "a-eng-0128k-aac-2c-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-s12.mp4",
"number": 11
},
{
"duration": 4.011,
"uri": "a-eng-0128k-aac-2c-s13.mp4",
"timeline": 0,
"map": {
"uri": "a-eng-0128k-aac-2c-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-s13.mp4",
"number": 12
},
{
"duration": 3.989,
"uri": "a-eng-0128k-aac-2c-s14.mp4",
"timeline": 0,
"map": {
"uri": "a-eng-0128k-aac-2c-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-s14.mp4",
"number": 13
},
{
"duration": 4,
"uri": "a-eng-0128k-aac-2c-s15.mp4",
"timeline": 0,
"map": {
"uri": "a-eng-0128k-aac-2c-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac-2c-s15.mp4",
"number": 14
}
],
"uri": "combined-playlist-audio",
"resolvedUri": "combined-playlist-audio",
"playlistType": "VOD",
"endList": true,
"mediaSequence": 0,
"discontinuitySequence": 0,
"discontinuityStarts": []
}
]
}
}
},
"VIDEO": {},
"CLOSED-CAPTIONS": {},
"SUBTITLES": {}
},
"uri": "http://localhost:10000/",
"playlists": [
{
"attributes": {
"BANDWIDTH": 8062646,
"CODECS": "avc1.4d401f,mp4a.40.2",
"AUDIO": "audio"
},
"segments": [
{
"duration": 4,
"uri": "v-0576p-1400k-libx264-s1.mp4",
"timeline": 0,
"map": {
"uri": "v-0576p-1400k-libx264-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-s1.mp4",
"number": 0
},
{
"duration": 4,
"uri": "v-0576p-1400k-libx264-s2.mp4",
"timeline": 0,
"map": {
"uri": "v-0576p-1400k-libx264-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-s2.mp4",
"number": 1
},
{
"duration": 4,
"uri": "v-0576p-1400k-libx264-s3.mp4",
"timeline": 0,
"map": {
"uri": "v-0576p-1400k-libx264-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-s3.mp4",
"number": 2
},
{
"duration": 4,
"uri": "v-0576p-1400k-libx264-s4.mp4",
"timeline": 0,
"map": {
"uri": "v-0576p-1400k-libx264-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-s4.mp4",
"number": 3
},
{
"duration": 4,
"uri": "v-0576p-1400k-libx264-s5.mp4",
"timeline": 0,
"map": {
"uri": "v-0576p-1400k-libx264-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-s5.mp4",
"number": 4
},
{
"duration": 4,
"uri": "v-0576p-1400k-libx264-s6.mp4",
"timeline": 0,
"map": {
"uri": "v-0576p-1400k-libx264-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-s6.mp4",
"number": 5
},
{
"duration": 4,
"uri": "v-0576p-1400k-libx264-s7.mp4",
"timeline": 0,
"map": {
"uri": "v-0576p-1400k-libx264-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-s7.mp4",
"number": 6
},
{
"duration": 4,
"uri": "v-0576p-1400k-libx264-s8.mp4",
"timeline": 0,
"map": {
"uri": "v-0576p-1400k-libx264-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-s8.mp4",
"number": 7
},
{
"duration": 4,
"uri": "v-0576p-1400k-libx264-s9.mp4",
"timeline": 0,
"map": {
"uri": "v-0576p-1400k-libx264-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-s9.mp4",
"number": 8
},
{
"duration": 4,
"uri": "v-0576p-1400k-libx264-s10.mp4",
"timeline": 0,
"map": {
"uri": "v-0576p-1400k-libx264-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-s10.mp4",
"number": 9
},
{
"duration": 4,
"uri": "v-0576p-1400k-libx264-s11.mp4",
"timeline": 0,
"map": {
"uri": "v-0576p-1400k-libx264-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-s11.mp4",
"number": 10
},
{
"duration": 4,
"uri": "v-0576p-1400k-libx264-s12.mp4",
"timeline": 0,
"map": {
"uri": "v-0576p-1400k-libx264-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-s12.mp4",
"number": 11
},
{
"duration": 4,
"uri": "v-0576p-1400k-libx264-s13.mp4",
"timeline": 0,
"map": {
"uri": "v-0576p-1400k-libx264-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-s13.mp4",
"number": 12
},
{
"duration": 4,
"uri": "v-0576p-1400k-libx264-s14.mp4",
"timeline": 0,
"map": {
"uri": "v-0576p-1400k-libx264-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-s14.mp4",
"number": 13
},
{
"duration": 4,
"uri": "v-0576p-1400k-libx264-s15.mp4",
"timeline": 0,
"map": {
"uri": "v-0576p-1400k-libx264-init.mp4",
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-init.mp4"
},
"resolvedUri": "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0576p-1400k-libx264-s15.mp4",
"number": 14
}
],
"uri": "combined-playlist",
"resolvedUri": "combined-playlist",
"playlistType": "VOD",
"endList": true,
"mediaSequence": 0,
"discontinuitySequence": 0,
"discontinuityStarts": []
}
]
}

768
webroot/test/scripts/index.js
Unescape View File

@ -0,0 +1,768 @@
/* global window document */
/* eslint-disable vars-on-top, no-var, object-shorthand, no-console */
(function (window) {
var representationsEl = document.getElementById('representations');
representationsEl.addEventListener('change', function () {
var selectedIndex = representationsEl.selectedIndex;
if (!selectedIndex || selectedIndex < 1 || !window.vhs) {
return;
}
var selectedOption =
representationsEl.options[representationsEl.selectedIndex];
if (!selectedOption) {
return;
}
var id = selectedOption.value;
window.vhs.representations().forEach(function (rep) {
rep.playlist.disabled = rep.id !== id;
});
window.mpc.fastQualityChange_();
});
var isManifestObjectType = function (url) {
return /application\/vnd\.videojs\.vhs\+json/.test(url);
};
var hlsOptGroup = document.querySelector('[label="hls"]');
var dashOptGroup = document.querySelector('[label="dash"]');
var drmOptGroup = document.querySelector('[label="drm"]');
var liveOptGroup = document.querySelector('[label="live"]');
var llliveOptGroup = document.querySelector('[label="low latency live"]');
var manifestOptGroup = document.querySelector(
'[label="json manifest object"]'
);
var sourceList;
var hlsDataManifest;
var dashDataManifest;
var addSourcesToDom = function () {
if (!sourceList || !hlsDataManifest || !dashDataManifest) {
return;
}
sourceList.forEach(function (source) {
var option = document.createElement('option');
option.innerText = source.name;
option.value = source.uri;
if (source.keySystems) {
option.setAttribute(
'data-key-systems',
JSON.stringify(source.keySystems, null, 2)
);
}
if (source.mimetype) {
option.setAttribute('data-mimetype', source.mimetype);
}
if (source.features.indexOf('live') !== -1) {
liveOptGroup.appendChild(option);
} else if (source.mimetype === 'application/x-mpegurl') {
hlsOptGroup.appendChild(option);
}
});
var hlsOption = document.createElement('option');
var dashOption = document.createElement('option');
dashOption.innerText =
'Dash Manifest Object Test, does not survive page reload';
dashOption.value = `data:application/vnd.videojs.vhs+json,${dashDataManifest}`;
hlsOption.innerText =
'HLS Manifest Object Test, does not survive page reload';
hlsOption.value = `data:application/vnd.videojs.vhs+json,${hlsDataManifest}`;
// manifestOptGroup.appendChild(hlsOption);
// manifestOptGroup.appendChild(dashOption);
};
var sourcesXhr = new window.XMLHttpRequest();
sourcesXhr.addEventListener('load', function () {
sourceList = JSON.parse(sourcesXhr.responseText);
addSourcesToDom();
});
sourcesXhr.open('GET', './scripts/sources.json');
sourcesXhr.send();
var hlsManifestXhr = new window.XMLHttpRequest();
hlsManifestXhr.addEventListener('load', function () {
hlsDataManifest = hlsManifestXhr.responseText;
addSourcesToDom();
});
hlsManifestXhr.open('GET', './scripts/hls-manifest-object.json');
hlsManifestXhr.send();
var dashManifestXhr = new window.XMLHttpRequest();
dashManifestXhr.addEventListener('load', function () {
dashDataManifest = dashManifestXhr.responseText;
addSourcesToDom();
});
dashManifestXhr.open('GET', './scripts/dash-manifest-object.json');
dashManifestXhr.send();
// all relevant elements
var urlButton = document.getElementById('load-url');
var sources = document.getElementById('load-source');
var stateEls = {};
var getInputValue = function (el) {
if (
el.type === 'url' ||
el.type === 'text' ||
el.nodeName.toLowerCase() === 'textarea'
) {
if (isManifestObjectType(el.value)) {
return '';
}
return encodeURIComponent(el.value);
} else if (el.type === 'select-one') {
return el.options[el.selectedIndex].value;
} else if (el.type === 'checkbox') {
return el.checked;
}
console.warn('unhandled input type ' + el.type);
return '';
};
var setInputValue = function (el, value) {
if (
el.type === 'url' ||
el.type === 'text' ||
el.nodeName.toLowerCase() === 'textarea'
) {
el.value = decodeURIComponent(value);
} else if (el.type === 'select-one') {
for (var i = 0; i < el.options.length; i++) {
if (el.options[i].value === value) {
el.options[i].selected = true;
}
}
} else {
// get the `value` into a Boolean.
el.checked = JSON.parse(value);
}
};
var newEvent = function (name) {
var event;
if (typeof window.Event === 'function') {
event = new window.Event(name);
} else {
event = document.createEvent('Event');
event.initEvent(name, true, true);
}
return event;
};
// taken from video.js
var getFileExtension = function (path) {
var splitPathRe;
var pathParts;
if (typeof path === 'string') {
splitPathRe =
/^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]*?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/i;
pathParts = splitPathRe.exec(path);
if (pathParts) {
return pathParts.pop().toLowerCase();
}
}
return '';
};
var saveState = function () {
var query = '';
if (!window.history.replaceState) {
return;
}
Object.keys(stateEls).forEach(function (elName) {
var symbol = query.length ? '&' : '?';
query += symbol + elName + '=' + getInputValue(stateEls[elName]);
});
window.history.replaceState({}, 'vhs demo', query);
};
window.URLSearchParams =
window.URLSearchParams ||
function (locationSearch) {
this.get = function (name) {
var results = new RegExp('[?&]' + name + '=([^&#]*)').exec(
locationSearch
);
return results ? decodeURIComponent(results[1]) : null;
};
};
// eslint-disable-next-line
var loadState = function () {
var params = new window.URLSearchParams(window.location.search);
return Object.keys(stateEls).reduce(function (acc, elName) {
acc[elName] =
typeof params.get(elName) !== 'object'
? params.get(elName)
: getInputValue(stateEls[elName]);
return acc;
}, {});
};
// eslint-disable-next-line
var reloadScripts = function (urls, cb) {
console.log('blah')
var el = document.getElementById('reload-scripts');
if (!el) {
el = document.createElement('div');
el.id = 'reload-scripts';
document.body.appendChild(el);
}
while (el.firstChild) {
el.removeChild(el.firstChild);
}
var loaded = [];
var checkDone = function () {
if (loaded.length === urls.length) {
cb();
}
};
urls.forEach(function (url) {
console.log(url)
var script = document.createElement('script');
// scripts marked as defer will be loaded asynchronously but will be executed in the order they are in the DOM
script.defer = true;
// dynamically created scripts are async by default unless otherwise specified
// async scripts are loaded asynchronously but also executed as soon as they are loaded
// we want to load them in the order they are added therefore we want to turn off async
script.async = false;
script.src = url;
script.onload = function () {
loaded.push(url);
checkDone();
};
el.appendChild(script);
});
};
var regenerateRepresentations = function () {
while (representationsEl.firstChild) {
representationsEl.removeChild(representationsEl.firstChild);
}
var selectedIndex;
window.vhs.representations().forEach(function (rep, i) {
var option = document.createElement('option');
option.value = rep.id;
option.innerText = JSON.stringify({
id: rep.id,
videoCodec: rep.codecs.video,
audioCodec: rep.codecs.audio,
bandwidth: rep.bandwidth,
heigth: rep.heigth,
width: rep.width,
});
if (window.mpc.media().id === rep.id) {
selectedIndex = i;
}
representationsEl.appendChild(option);
});
representationsEl.selectedIndex = selectedIndex;
};
function getBuffered(buffered) {
var bufferedText = '';
if (!buffered) {
return bufferedText;
}
if (buffered.length) {
bufferedText += buffered.start(0) + ' - ' + buffered.end(0);
}
for (var i = 1; i < buffered.length; i++) {
bufferedText += ', ' + buffered.start(i) + ' - ' + buffered.end(i);
}
return bufferedText;
}
var setupSegmentMetadata = function (player) {
// setup segment metadata
var segmentMetadata = document.querySelector('#segment-metadata');
player.one('loadedmetadata', function () {
var tracks = player.textTracks();
var segmentMetadataTrack;
for (var i = 0; i < tracks.length; i++) {
if (tracks[i].label === 'segment-metadata') {
segmentMetadataTrack = tracks[i];
}
}
while (segmentMetadata.children.length) {
segmentMetadata.removeChild(segmentMetadata.firstChild);
}
if (segmentMetadataTrack) {
segmentMetadataTrack.addEventListener('cuechange', function () {
var cues = segmentMetadataTrack.activeCues || [];
let activeCue = segmentMetadataTrack.activeCues[0].value;
try {
const latency =
(new Date().getTime() - activeCue.dateTimeObject.getTime()) /
1000;
document.getElementById('displayedSegmentLatency').innerHTML =
latency;
} catch (err) {
console.error(err);
}
while (segmentMetadata.children.length) {
segmentMetadata.removeChild(segmentMetadata.firstChild);
}
for (var j = 0; j < cues.length; j++) {
var text = JSON.stringify(JSON.parse(cues[j].text), null, 2);
var li = document.createElement('li');
var pre = document.createElement('pre');
pre.classList.add('border', 'rounded', 'p-2');
pre.textContent = text;
li.appendChild(pre);
segmentMetadata.appendChild(li);
}
});
}
});
};
var setupPlayerStats = function (player) {
player.on('dispose', () => {
if (window.statsTimer) {
window.clearInterval(window.statsTimer);
window.statsTimer = null;
}
});
var currentTimeStat = document.querySelector('.current-time-stat');
var bufferedStat = document.querySelector('.buffered-stat');
var videoBufferedStat = document.querySelector('.video-buffered-stat');
var audioBufferedStat = document.querySelector('.audio-buffered-stat');
var seekableStartStat = document.querySelector('.seekable-start-stat');
var seekableEndStat = document.querySelector('.seekable-end-stat');
var videoBitrateState = document.querySelector('.video-bitrate-stat');
var measuredBitrateStat = document.querySelector('.measured-bitrate-stat');
var videoTimestampOffset = document.querySelector('.video-timestampoffset');
var audioTimestampOffset = document.querySelector('.audio-timestampoffset');
player.on('timeupdate', function () {
currentTimeStat.textContent = player.currentTime().toFixed(1);
});
window.statsTimer = window.setInterval(function () {
var oldStart;
var oldEnd;
var seekable = player.seekable();
if (seekable && seekable.length) {
oldStart = seekableStartStat.textContent;
if (seekable.start(0).toFixed(1) !== oldStart) {
seekableStartStat.textContent = seekable.start(0).toFixed(1);
}
oldEnd = seekableEndStat.textContent;
if (seekable.end(0).toFixed(1) !== oldEnd) {
seekableEndStat.textContent = seekable.end(0).toFixed(1);
}
}
// buffered
bufferedStat.textContent = getBuffered(player.buffered());
// exit early if no VHS
if (!player.tech(true).vhs) {
videoBufferedStat.textContent = '';
audioBufferedStat.textContent = '';
videoBitrateState.textContent = '';
measuredBitrateStat.textContent = '';
videoTimestampOffset.textContent = '';
audioTimestampOffset.textContent = '';
return;
}
videoBufferedStat.textContent = getBuffered(
player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_
.sourceUpdater_.videoBuffer &&
player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_
.sourceUpdater_.videoBuffer.buffered
);
// demuxed audio
var audioBuffer = getBuffered(
player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_
.sourceUpdater_.audioBuffer &&
player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_
.sourceUpdater_.audioBuffer.buffered
);
// muxed audio
if (!audioBuffer) {
audioBuffer = getBuffered(
player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_
.sourceUpdater_.audioBuffer &&
player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_
.sourceUpdater_.audioBuffer.buffered
);
}
audioBufferedStat.textContent = audioBuffer;
if (
player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_
.sourceUpdater_.audioBuffer
) {
audioTimestampOffset.textContent =
player.tech(
true
).vhs.masterPlaylistController_.audioSegmentLoader_.sourceUpdater_.audioBuffer.timestampOffset;
} else if (
player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_
.sourceUpdater_.audioBuffer
) {
audioTimestampOffset.textContent =
player.tech(
true
).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.audioBuffer.timestampOffset;
}
if (
player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_
.sourceUpdater_.videoBuffer
) {
videoTimestampOffset.textContent =
player.tech(
true
).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.videoBuffer.timestampOffset;
}
// bitrates
var playlist = player.tech_.vhs.playlists.media();
if (playlist && playlist.attributes && playlist.attributes.BANDWIDTH) {
videoBitrateState.textContent =
(playlist.attributes.BANDWIDTH / 1024).toLocaleString(undefined, {
maximumFractionDigits: 1,
}) + ' kbps';
}
if (player.tech_.vhs.bandwidth) {
measuredBitrateStat.textContent =
(player.tech_.vhs.bandwidth / 1024).toLocaleString(undefined, {
maximumFractionDigits: 1,
}) + ' kbps';
}
}, 100);
};
[
'debug',
'autoplay',
'muted',
'fluid',
'minified',
'sync-workers',
'liveui',
'llhls',
'url',
'type',
'buffer-water',
'exact-manifest-timings',
'pixel-diff-selector',
'override-native',
'preload',
'mirror-source',
].forEach(function (name) {
stateEls[name] = document.getElementById(name);
});
window.startDemo = function (cb) {
var state = loadState();
Object.keys(state).forEach(function (elName) {
setInputValue(stateEls[elName], state[elName]);
});
Array.prototype.forEach.call(sources.options, function (s, i) {
if (s.value === state.url) {
sources.selectedIndex = i;
}
});
// stateEls that reload the player and scripts
[
'mirror-source',
'sync-workers',
'preload',
'llhls',
'buffer-water',
'override-native',
'liveui',
'pixel-diff-selector',
'exact-manifest-timings',
].forEach(function (name) {
stateEls[name].addEventListener('change', function (event) {
saveState();
stateEls.minified.dispatchEvent(newEvent('change'));
});
});
stateEls.debug.addEventListener('change', function (event) {
saveState();
window.videojs.log.level(event.target.checked ? 'debug' : 'info');
});
stateEls.minified.addEventListener('change', function (event) {
// let urls = [];
var urls = [].map(function (url) {
return url + (event.target.checked ? '.min' : '') + '.js';
});
// if (stateEls['sync-workers'].checked) {
// urls.push('dist/videojs-http-streaming-sync-workers.js');
// } else {
urls.push(
'https://vjs.zencdn.net/7.15.4/video.min.js',
'https://cdn.jsdelivr.net/npm/@videojs/http-streaming@2.10.3/dist/videojs-http-streaming.min.js'
);
// }
saveState();
if (window.player) {
window.player.dispose();
delete window.player;
}
if (window.videojs) {
delete window.videojs;
}
reloadScripts(urls, function () {
console.log('reloadScripts')
var player;
var fixture = document.getElementById('player-fixture');
var videoEl = document.createElement('video-js');
videoEl.setAttribute('controls', '');
videoEl.setAttribute('preload', 'auto');
videoEl.setAttribute('autoplay', '');
videoEl.setAttribute('muted', '');
videoEl.setAttribute('fluid', 'true');
videoEl.className = 'vjs-default-skin';
fixture.appendChild(videoEl);
player = window.player = window.videojs(videoEl, {
html5: {
vhs: {
overrideNative: true,
experimentalBufferBasedABR: getInputValue(
stateEls['buffer-water']
),
experimentalExactManifestTimings: getInputValue(
stateEls['exact-manifest-timings']
),
experimentalLeastPixelDiffSelector: getInputValue(
stateEls['pixel-diff-selector']
),
},
},
});
window.player = player;
setupPlayerStats(player);
setupSegmentMetadata(player);
// save player muted state interation
player.on('volumechange', function () {
if (stateEls.muted.checked !== player.muted()) {
stateEls.muted.checked = player.muted();
saveState();
}
});
player.on('sourceset', function () {
var source = player.currentSource();
if (source.keySystems) {
var copy = JSON.parse(JSON.stringify(source.keySystems));
// have to delete pssh as it will often make keySystems too big
// for a uri
Object.keys(copy).forEach(function (key) {
if (copy[key].hasOwnProperty('pssh')) {
delete copy[key].pssh;
}
});
stateEls.keysystems.value = JSON.stringify(copy, null, 2);
}
if (source.src) {
stateEls.url.value = encodeURI(source.src);
}
if (source.type) {
stateEls.type.value = source.type;
}
saveState();
});
player.width(640);
player.height(264);
stateEls.debug.dispatchEvent(newEvent('change'));
stateEls.muted.dispatchEvent(newEvent('change'));
stateEls.fluid.dispatchEvent(newEvent('change'));
stateEls.autoplay.dispatchEvent(newEvent('change'));
// run the load url handler for the intial source
if (stateEls.url.value) {
urlButton.dispatchEvent(newEvent('click'));
} else {
sources.dispatchEvent(newEvent('change'));
}
player.on('loadedmetadata', function () {
if (player.tech_.vhs) {
window.vhs = player.tech_.vhs;
window.mpc = player.tech_.vhs.masterPlaylistController_;
window.mpc.masterPlaylistLoader_.on(
'mediachange',
regenerateRepresentations
);
regenerateRepresentations();
} else {
window.vhs = null;
window.mpc = null;
}
});
cb(player);
});
});
var urlButtonClick = function (event) {
var ext;
var type = stateEls.type.value;
// reset type if it's a manifest object's type
if (type === 'application/vnd.videojs.vhs+json') {
type = '';
}
if (isManifestObjectType(stateEls.url.value)) {
type = 'application/vnd.videojs.vhs+json';
}
if (!type.trim()) {
ext = getFileExtension(stateEls.url.value);
if (ext === 'mpd') {
type = 'application/dash+xml';
} else if (ext === 'm3u8') {
type = 'application/x-mpegURL';
}
}
saveState();
var source = {
src: stateEls.url.value,
type: type,
};
sources.selectedIndex = -1;
Array.prototype.forEach.call(sources.options, function (s, i) {
if (s.value === stateEls.url.value) {
sources.selectedIndex = i;
}
});
window.player.src(source);
const src = source.src;
window.currentSrc = src;
window.shaka.load(src);
window.clapprPlayer.load(src);
const nativePlayer = document.getElementById('native-player');
nativePlayer.setAttribute('src', src);
};
urlButton.addEventListener('click', urlButtonClick);
urlButton.addEventListener('tap', urlButtonClick);
sources.addEventListener('change', function (event) {
var selectedOption = sources.options[sources.selectedIndex];
if (!selectedOption) {
return;
}
var src = selectedOption.value;
stateEls.url.value = src;
stateEls.type.value = selectedOption.getAttribute('data-mimetype');
// stateEls.keysystems.value = selectedOption.getAttribute('data-key-systems');
urlButton.dispatchEvent(newEvent('click'));
});
stateEls.url.addEventListener('keyup', function (event) {
if (event.key === 'Enter') {
urlButton.click();
}
});
stateEls.url.addEventListener('input', function (event) {
if (stateEls.type.value.length) {
stateEls.type.value = '';
}
});
stateEls.type.addEventListener('keyup', function (event) {
if (event.key === 'Enter') {
urlButton.click();
}
});
// run the change handler for the first time
stateEls.minified.dispatchEvent(newEvent('change'));
};
})(window);

76
webroot/test/scripts/sources.json
Unescape View File

@ -0,0 +1,76 @@
[
{
"name": "This Owncast instance",
"uri": "/hls/stream.m3u8",
"mimetype": "application/x-mpegurl",
"features": ["live"]
},
{
"name": "Owncast Demo Server",
"uri": "https://watch.owncast.online/hls/stream.m3u8",
"mimetype": "application/x-mpegurl",
"features": ["live"]
},
{
"name": "Big Buck Bunny - Adaptive",
"uri": "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
"mimetype": "application/x-mpegurl",
"features": []
},
{
"name": "Bipbop - Muxed TS with 1 alt Audio, 5 captions",
"uri": "https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8",
"mimetype": "application/x-mpegurl",
"features": []
},
{
"name": "Coit Tower drone footage - 4 8 second segment",
"uri": "https://d2zihajmogu5jn.cloudfront.net/CoitTower/master_ts_segtimes.m3u8",
"mimetype": "application/x-mpegurl",
"features": []
},
{
"name": "Boat Video Only",
"uri": "https://d2zihajmogu5jn.cloudfront.net/video-only/out.m3u8",
"mimetype": "application/x-mpegurl",
"features": []
},
{
"name": "Boat Misaligned - 3, 5, 7, second segment playlists",
"uri": "https://d2zihajmogu5jn.cloudfront.net/misaligned-playlists/master.m3u8",
"mimetype": "application/x-mpegurl",
"features": []
},
{
"name": "BBB-CMIF: Big Buck Bunny Dark Truths - demuxed, fmp4",
"uri": "https://storage.googleapis.com/shaka-demo-assets/bbb-dark-truths-hls/hls.m3u8",
"mimetype": "application/x-mpegurl",
"features": []
},
{
"name": "Pseudo-Live PDT test source",
"uri": "https://d2zihajmogu5jn.cloudfront.net/pdt-test-source/no-endlist.m3u8",
"mimetype": "application/x-mpegurl",
"features": [
"live"
]
},
{
"name": "PDT test source",
"uri": "https://d2zihajmogu5jn.cloudfront.net/pdt-test-source/endlist.m3u8",
"mimetype": "application/x-mpegurl",
"features": []
},
{
"name": "audio only dash, two groups",
"uri": "https://d2zihajmogu5jn.cloudfront.net/audio-only-dash/dash.mpd",
"mimetype": "application/dash+xml",
"features": []
},
{
"name": "video only dash, two renditions",
"uri": "https://d2zihajmogu5jn.cloudfront.net/video-only-dash/dash.mpd",
"mimetype": "application/dash+xml",
"features": []
}
]
Write Preview
Loading…
Cancel
Save