mirror of
				https://github.com/videojs/video.js.git
				synced 2025-10-31 00:08:01 +02:00 
			
		
		
		
	fix(liveui): make edge detection less strict, add docs for option (#5661)
Use double the seekable increment for live edge detection. Add liveui option.
This commit is contained in:
		
				
					committed by
					
						 Gary Katsevman
						Gary Katsevman
					
				
			
			
				
	
			
			
			
						parent
						
							98b4a1cf16
						
					
				
				
					commit
					dce4a2c7d4
				
			| @@ -247,6 +247,18 @@ Learn more about [languages in Video.js][languages] | ||||
|  | ||||
| > **Note**: Generally, this option is not needed and it would be better to pass your custom languages to `videojs.addLanguage()`, so they are available in all players! | ||||
|  | ||||
| ### `liveui` | ||||
|  | ||||
| > Type: `boolean` | ||||
| > Default: `false` | ||||
|  | ||||
| Allows the player to use the new live ui that includes: | ||||
| * A progress bar for seeking within the live window | ||||
| * A button that can be clicked to seek to the live edge with a circle indicating if you are at the live edge or not. | ||||
|  | ||||
| Without this option the progress bar will be hidden and in its place will be text that indicates `LIVE` playback. There will be no progress control | ||||
| and you will not be able click the text to seek to the live edge. `liveui` will default to `true` in a future version! | ||||
|  | ||||
| ### `nativeControlsForTouch` | ||||
|  | ||||
| > Type: `boolean` | ||||
|   | ||||
| @@ -28,7 +28,7 @@ class LiveTracker extends Component { | ||||
|     // that a player can be, but still be considered live. | ||||
|     // we add 0.07 because the live tracking happens every 30ms | ||||
|     // and we want some wiggle room for short segment live playback | ||||
|     const liveEdgeWindow = seekableIncrement + 0.07; | ||||
|     const liveEdgeWindow = (seekableIncrement * 2) + 0.07; | ||||
|  | ||||
|     // on Android liveCurrentTime can bee Infinity, because seekableEnd | ||||
|     // can be Infinity, so we handle that case. | ||||
|   | ||||
| @@ -66,6 +66,8 @@ QUnit.module('LiveTracker', () => { | ||||
|   }); | ||||
|  | ||||
|   QUnit.test('Triggers liveedgechange when we fall behind and catch up', function(assert) { | ||||
|  | ||||
|     this.liveTracker.seekableIncrement_ = 6; | ||||
|     this.player.trigger('timeupdate'); | ||||
|     this.player.currentTime = () => 0; | ||||
|     this.clock.tick(20000); | ||||
| @@ -107,7 +109,7 @@ QUnit.module('LiveTracker', () => { | ||||
|       return 0; | ||||
|     }; | ||||
|  | ||||
|     this.clock.tick(3000); | ||||
|     this.clock.tick(6000); | ||||
|  | ||||
|     assert.ok(this.liveTracker.pastSeekEnd() > 2, 'pastSeekEnd should be over 2s'); | ||||
|  | ||||
| @@ -154,7 +156,7 @@ QUnit.module('LiveTracker', () => { | ||||
|   QUnit.test('single seekable, helpers should be correct', function(assert) { | ||||
|     // simple | ||||
|     this.player.seekable = () => createTimeRanges(10, 50); | ||||
|     assert.strictEqual(this.liveTracker.liveWindow(), 40.03, 'liveWindow is 40s'); | ||||
|     assert.strictEqual(Math.round(this.liveTracker.liveWindow()), 40, 'liveWindow is ~40s'); | ||||
|     assert.strictEqual(this.liveTracker.seekableStart(), 10, 'seekableStart is 10s'); | ||||
|     assert.strictEqual(this.liveTracker.seekableEnd(), 50, 'seekableEnd is 50s'); | ||||
|   }); | ||||
| @@ -162,7 +164,7 @@ QUnit.module('LiveTracker', () => { | ||||
|   QUnit.test('multiple seekables, helpers should be correct', function(assert) { | ||||
|     // multiple | ||||
|     this.player.seekable = () => createTimeRanges([[0, 1], [2, 3], [4, 5]]); | ||||
|     assert.strictEqual(this.liveTracker.liveWindow(), 5.03, 'liveWindow is 5s'); | ||||
|     assert.strictEqual(Math.round(this.liveTracker.liveWindow()), 5, 'liveWindow is ~5s'); | ||||
|     assert.strictEqual(this.liveTracker.seekableStart(), 0, 'seekableStart is 0s'); | ||||
|     assert.strictEqual(this.liveTracker.seekableEnd(), 5, 'seekableEnd is 5s'); | ||||
|   }); | ||||
|   | ||||
		Reference in New Issue
	
	Block a user