Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: update the demo page #1184

Merged
merged 18 commits into from
Aug 17, 2021
Merged

chore: update the demo page #1184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
c9e3253
update to VJS 7.15.0
gkatsev Aug 12, 2021
9553f0e
new demo page for experimentation
gkatsev Aug 12, 2021
ae1611c
add bootstrap
gkatsev Aug 12, 2021
c837bde
convert to bootstrap tabs and prettify
gkatsev Aug 12, 2021
4167d0c
add fluid button
gkatsev Aug 13, 2021
1987586
add fluid button, style all existing stuff, remove most css
gkatsev Aug 13, 2021
61155f0
fluid and aspect-ratio and min-height stuff
gkatsev Aug 16, 2021
8ced4eb
sources panel
gkatsev Aug 16, 2021
260a44f
reorder panels and remove unnecessary headings
gkatsev Aug 16, 2021
854714f
player stats
gkatsev Aug 16, 2021
252a0be
segment metadata
gkatsev Aug 16, 2021
926388d
fix linter errors
gkatsev Aug 16, 2021
c939036
better segment metadata style
gkatsev Aug 16, 2021
a11d934
demo->index index->old-index
gkatsev Aug 16, 2021
d5a4d47
re-enable history
gkatsev Aug 16, 2021
9238e98
add bootstrap to netlify copy
gkatsev Aug 17, 2021
271044f
index and old index
gkatsev Aug 17, 2021
15d6fd9
old-index
gkatsev Aug 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
328 changes: 207 additions & 121 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,142 +4,228 @@
<meta charset="utf-8">
<title>videojs-http-streaming Demo</title>
<link rel="icon" href="logo.svg">
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this file was a copy from index.html originally.

<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 {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a lot less custom styles are needed now.

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;
.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;
margin-top: 4px;
}
.options label {
background-color: hsl(0, 0%, 90%);
padding: 0.25em;
margin: 0.25em;
#player-fixture {
min-height: 250px;
}
input[type=url], select {
min-width: 600px;
#segment-metadata {
list-style: none;
}
#preload {
min-width: auto;
#segment-metadata pre {
overflow: scroll;
}
h3 {
margin-bottom: 5px;
</style>
</head>
<body class="m-4">
<script>
// if we're on IE, load up the load index page
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

redirect to the IE11 supporting demo page on IE.

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;
}
#keysystems {
display: block;

if (version) {
window.location.href = './old-index.html';
}
</style>
</script>

</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>
</div>
<header class="container-fluid">
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add a nice header with a link to the github

<a href="https://github.com/videojs/http-streaming" class="d-flex align-items-center pb-3 mb-5 border-bottom" style="height: 4em">
<img src="./logo.svg" alt="VHS logo showcasing a VHS tape with the Video.js logo on the label" class="rounded mh-100">
<span class="fs-1 ps-2">VHS: videojs-http-streaming</span>
</a>
</header>

<div id="player-fixture" class="container-fluid pb-3 mb-3"></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 class="nav nav-tabs container-fluid mb-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#sources" type="button" role="tab" aria-selected="true">Sources</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#options" type="button" role="tab" aria-selected="false">Options</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#levels" type="button" role="tab" aria-selected="false">Representations</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#player-stats" type="button" role="tab" aria-selected="false">Player Stats</button>
</li>
</ul>

<script src="scripts/index-demo-page.js"></script>
<div class="tab-content container-fluid">

<div class="tab-pane active" id="sources" role="tabpanel">

<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 (uses url extension if blank, usually application/x-mpegURL or application/dash+xml)</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>

<label for="keysystems" class="form-label">Optional Keystems JSON:</label>
<div class="input-group">
<span class="input-group-text"><label for=keysystems>keySystems JSON</label></span>
<textarea id=keysystems cols=100 rows=5 class="form-control"></textarea>
</div>

<button id=load-url type=button class="btn btn-primary my-2">Load</button>

<div class="input-group">
<span class="input-group-text"><label for=load-source>Preloaded Sources</label></span>
<select id=load-source class="form-select">
<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>
</div>
</div>

<div class="tab-pane" id="options" role="tabpanel">
<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">
<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 class="tab-pane" id="levels" role="tabpanel">
<div class="input-group">
<span class="input-group-text"><label for=representations>Representations</label></span>
<select id='representations' class="form-select"></select>
</div>
</div>

<div class="tab-pane" id="player-stats" role="tabpanel">
<div class="row">
<div class="player-stats col-4">
<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>
<ul id="segment-metadata" class="col-8"></ul>
</div>
</div>

</div>

<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="scripts/index.js"></script>
<script>
window.startDemo(function(player) {
// do something with setup player
Expand Down
Loading