Skip to content

Commit

Permalink
Merge branch 'upstream_hls.js/master' into release
Browse files Browse the repository at this point in the history 
* upstream_hls.js/master: (30 commits)
  Handle detach and attach media when calling loadSource with media attached
  Stop loading and reset selected audio track state when reloading a stream
  Add comment describing additional live start gap allowance
  Remove cue duration warning, as this is standard for represending event vs time-ranged based metadata in TextTracks that can be signaled during playback with activeCues change events
  Disable flakey smooth switch test on stream with large start gap
  Require min cue duration of 0.25
  Package lock update.
  Minimal Logging on Functional Tests.
  Handle DTS wrapping in initial AVC CTS calculation
  Apply PTSNormalize to ID3 and Text samples to handle timestamp rollover
  Add method to find start pts video-dev#2930
  Fix PTS calculation on rollover.
  Bump netlify-cli from 2.58.0 to 2.59.0
  Use ES5 in JavaScript executed by webdriver (for IE11)
  Fix chart fragment rendering issue
  Do not flush audio on audio track switch when both tracks are main variant streams video-dev#2837
  Bump @types/mocha from 8.0.0 to 8.0.1
  Bump @babel/plugin-proposal-optional-chaining from 7.10.4 to 7.11.0
  Bump @babel/core from 7.10.5 to 7.11.0
  Improve demo video size menu
  • Loading branch information
Rob Walch committed Aug 6, 2020
2 parents 07d94f0 + 3f92287 commit 0b11cd7
Show file tree
Hide file tree
Showing 13 changed files with 1,391 additions and 2,380 deletions.
13 changes: 9 additions & 4 deletions demo/chart/timeline-chart.ts
View file
Expand Up @@ -274,7 +274,7 @@ export class TimelineChart {
return;
}
// eslint-disable-next-line no-restricted-properties
const fragData = arrayFind(levelDataSet.data, fragData => fragData.relurl === frag.relurl);
const fragData = arrayFind(levelDataSet.data, fragData => fragData.relurl === frag.relurl && fragData.sn === frag.sn);
if (fragData && fragData !== frag) {
Object.assign(fragData, frag);
}
Expand All @@ -289,6 +289,8 @@ export class TimelineChart {
const trackTypes = Object.keys(tracks).sort((type) => type === 'video' ? 1 : -1);
const mediaBufferData = [];

this.removeSourceBuffers();

this.media = media;

trackTypes.forEach((type) => {
Expand Down Expand Up @@ -351,9 +353,12 @@ export class TimelineChart {

removeSourceBuffers () {
const { labels, datasets } = this.chart.data;
while ((labels[0] || '').indexOf('buffer') > -1) {
labels.shift();
datasets.shift();
let i = datasets.length;
while (i--) {
if ((labels[0] || '').indexOf('buffer') > -1) {
datasets.splice(i, 1);
labels.splice(i, 1);
}
}
}

Expand Down
123 changes: 66 additions & 57 deletions demo/index.html
View file
Expand Up @@ -73,11 +73,16 @@ <h3>
<label class="innerControls">
Player size:
<select id="videoSize" style="float:right;">
<option value="240">Tiny (240p)</option>
<option value="384">Small (384p)</option>
<option value="480">Medium (480p)</option>
<option value="720" selected>Large (720p)</option>
<option value="1080">Huge (1080p)</option>
<option value="" selected>Set video width (height will vary according to selected size)</option>
<option value="240px">240 x 135</option>
<option value="426px">426 x 240</option>
<option value="640px">640 x 360</option>
<option value="720px">720 x 405</option>
<option value="854px">854 x 480</option>
<option value="1280px">1280 x 720</option>
<option value="1920px">1920 x 1080</option>
<option value="50%">Responsive (50%)</option>
<option value="100%">Responsive (100%)</option>
</select>
</label>

Expand Down Expand Up @@ -120,57 +125,63 @@ <h3>
<label class="center">Error:</label>
<pre id="errorOut" class="center" style="white-space: pre-wrap;"></pre>

<div class="center" style="text-align: center;" id="toggleButtons">
<div class="center" style="text-align: center; display: none;" id="toggleButtons">
<button type="button" class="btn btn-sm demo-tab-btn" data-tab="playbackControlTab" onclick="toggleTab(this);">Playback</button>
<button type="button" class="btn btn-sm demo-tab-btn" data-tab="timelineTab" onclick="toggleTab(this);">Timeline</button>
<button type="button" class="btn btn-sm demo-tab-btn" data-tab="qualityLevelControlTab" onclick="toggleTab(this);">Quality-levels</button>
<button type="button" class="btn btn-sm demo-tab-btn" data-tab="audioTrackControlTab" onclick="toggleTab(this);">Audio-tracks</button>
<button type="button" class="btn btn-sm demo-tab-btn" data-tab="timelineTab" onclick="toggleTab(this);">Timeline</button>
<button type="button" class="btn btn-sm demo-tab-btn" data-tab="statsDisplayTab" onclick="toggleTab(this);">Buffer &amp; Statistics</button>
<button type="button" class="btn btn-sm demo-tab-btn" data-tab="metricsDisplayTab" onclick="toggleTab(this); showMetrics();">Real-time metrics</button>
<button type="button" class="btn btn-sm demo-tab-btn" data-tab="statsDisplayTab" onclick="toggleTab(this);">Buffer &amp; Statistics</button>
</div>

<div class="center demo-tab" id='playbackControlTab'>
<h4>Playback</h4>
<div class="center demo-tab" id="playbackControlTab" style="display: none;">
<br>
<center>
<p>
<button type="button" class="btn btn-sm btn-info" onclick="$('#video')[0].play()">Play</button>
<button type="button" class="btn btn-sm btn-info" onclick="$('#video')[0].pause()">Pause</button>
</p>

<p>
<button type="button" class="btn btn-sm btn-info" onclick="$('#video')[0].currentTime-=10">- 10 s</button>
<button type="button" class="btn btn-sm btn-info" onclick="$('#video')[0].currentTime+=10">+ 10 s</button>
</p>

<p>
<button type="button" class="btn btn-sm btn-info" onclick="$('#video')[0].currentTime=$('#seek_pos').val()">Seek to </button>
<input type="text" id='seek_pos' size="8" onkeydown="if(window.event.keyCode=='13'){$('#video')[0].currentTime=$('#seek_pos').val();}">
</p>

<p>
<button type="button" class="btn btn-xs btn-warning" onclick="hls.attachMedia($('#video')[0])">Attach media</button>
<button type="button" class="btn btn-xs btn-warning" onclick="hls.detachMedia()">Detach media</button>
</p>

<p>
<button type="button" class="btn btn-xs btn-warning" onclick="hls.startLoad()">Start loading</button>
<button type="button" class="btn btn-xs btn-warning" onclick="hls.stopLoad()">Stop loading</button>
</p>

<p>
<button type="button" class="btn btn-xs btn-warning" onclick="hls.recoverMediaError()">Recover media-error</button>
</p>

<p>
<button type="button" class="btn btn-xs btn-warning" onclick="createfMP4('audio');">Create audio-fmp4</button>
<button type="button" class="btn btn-xs btn-warning" onclick="createfMP4('video')">Create video-fmp4</button>
</p>
<p>
<span>
<button type="button" class="btn btn-sm btn-info" title="video.play()" onclick="$('#video')[0].play()">Play</button>
<button type="button" class="btn btn-sm btn-info" title="video.pause()" onclick="$('#video')[0].pause()">Pause</button>
</span>
<span>
<button type="button" class="btn btn-sm btn-info" title="video.currentTime -= 10" onclick="$('#video')[0].currentTime-=10">- 10 s</button>
<button type="button" class="btn btn-sm btn-info" title="video.currentTime += 10" onclick="$('#video')[0].currentTime+=10">+ 10 s</button>
</span>
<span>
<button type="button" class="btn btn-sm btn-info" title="video.currentTime = text input" onclick="$('#video')[0].currentTime=$('#seek_pos').val()">Seek to </button>
<input type="number" id='seek_pos' size="8" onkeydown="if(window.event.keyCode=='13'){$('#video')[0].currentTime=$('#seek_pos').val();}">
</span>
</p>
<p>
<span>
<button type="button" class="btn btn-xs btn-warning" title="hls.startLoad()" onclick="hls.startLoad()">Start loading</button>
<button type="button" class="btn btn-xs btn-warning" title="hls.stopLoad()" onclick="hls.stopLoad()">Stop loading</button>
</span>
<span>
<button type="button" class="btn btn-xs btn-warning" title="hls.attachMedia(video)" onclick="hls.attachMedia($('#video')[0])">Attach media</button>
<button type="button" class="btn btn-xs btn-warning" title="hls.detachMedia()" onclick="hls.detachMedia()">Detach media</button>
</span>
</p>
<p>
<span>
<button type="button" class="btn btn-xs btn-warning" title="hls.recoverMediaError()" onclick="hls.recoverMediaError()">Recover media-error</button>
<button type="button" class="btn btn-xs btn-warning" title="hls.swapAudioCodec()" onclick="hls.swapAudioCodec()">Swap audio codec</button>
</span>
</p>
<p>
<span>
<button type="button" class="btn btn-xs btn-default" onclick="$('#streamSelect')[0].selectedIndex++;$('#streamSelect').change()">Next video</button>
<button type="button" class="btn btn-xs btn-default btn-dump" title="Save dumped audio mp4 appends" onclick="createfMP4('audio');">Create audio-fmp4</button>
<button type="button" class="btn btn-xs btn-default btn-dump" title="Save dumped video mp4 appends" onclick="createfMP4('video')">Create video-fmp4</button>
</span>
</p>
</center>
</div>

<div class="center demo-tab demo-timeline-chart-container" id="timelineTab" style="display: none;">
<canvas id="timeline-chart"></canvas>
</div>

<div class="center demo-tab" id='qualityLevelControlTab'>
<h4>Quality-levels</h4>
<div class="center demo-tab" id="qualityLevelControlTab" style="display: none;">
<center>
<table>
<tr>
Expand Down Expand Up @@ -209,19 +220,21 @@ <h4>Quality-levels</h4>
</center>
</div>

<div class="center demo-tab" id='audioTrackControlTab'>
<h4>Audio-tracks</h4>
<div class="center demo-tab" id="audioTrackControlTab" style="display: none;">
<table>
<tr>
<td>Current audio-track:</td>
<td width=10px>None selected</td>
<td> <div id="audioTrackControl" style="display: inline;"></div> </td>
<td><div id="audioTrackControl" style="display: inline;"></div></td>
</tr>
<tr>
<td>Language / Name:</td>
<td><div id="audioTrackLabel" style="display: inline;">None selected</div></td>
</tr>
</table>
</div>

<div class="center demo-tab" id='metricsDisplayTab'>
<h4>Real-time metrics</h4>
<div class="center demo-tab" id="metricsDisplayTab" style="display: none;">
<br>
<div id="metricsButton">
<button type="button" class="btn btn-xs btn-info" onclick="$('#metricsButtonWindow').toggle();$('#metricsButtonFixed').toggle();windowSliding=!windowSliding; refreshCanvas()">toggle sliding/fixed window</button><br>
<div id="metricsButtonWindow">
Expand Down Expand Up @@ -255,18 +268,14 @@ <h4>Real-time metrics</h4>
</div>
</div>

<div class="center demo-tab" id='statsDisplayTab'>
<h4>Buffer &amp; Statistics</h4>
<div class="center demo-tab" id="statsDisplayTab" style="display: none;">
<br>
<label>Buffer state:</label>
<pre id="bufferedOut"></pre>
<label>General stats:</label>
<pre id='statisticsOut'></pre>
</div>

<div class="center demo-tab demo-timeline-chart-container" id='timelineTab'>
<canvas id="timeline-chart"></canvas>
</div>

</div>

<footer>
Expand Down

0 comments on commit 0b11cd7

Please sign in to comment.