# Configure hls.js
ByteArk Player uses hls.js (opens new window) as the underlying HLS tech provider on browsers that don't have native HLS support. You can pass custom configuration to hls.js via the html5.hls options.
# Configure hls.js options
var player = bytearkPlayer('video-player', {
fluid: true,
html5: {
hls: {
maxBufferLength: 60,
maxMaxBufferLength: 600,
// ... other hls.js options
}
},
sources: [{
title: 'Big Buck Bunny',
src: '<MEDIA_URL>',
type: 'application/x-mpegURL'
}]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
The full list of hls.js options is documented at hls.js API > Fine-tuning (opens new window).
# Common settings
| Name | Type | Default | Description |
|---|---|---|---|
| maxBufferLength | Number | 30 | Maximum buffer length (seconds) |
| maxMaxBufferLength | Number | 600 | Hard cap on the maximum buffer length |
| liveSyncDuration | Number | 3 | How many segments behind live edge to start |
| liveMaxLatencyDuration | Number | - | Maximum latency tolerated from live edge |
| enableWorker | Boolean | true | Enable Web Worker for transmuxing |
Note
Changes to hls.js options usually only apply on browsers that use hls.js (Chrome, Firefox, Edge). On Safari, the native HLS player is used and these settings have no effect.