clappr-level-selector-plugin
clappr-level-selector-plugin copied to clipboard
clappr
How to append source list dynamically?
like this:
[
{ 'src' : 'http://example.com/playlist1-1/index.m3u8', 'label' : '720p' }
{ 'src' : 'http://example.com/playlist1-2/index.m3u8', 'label' : '1080p' }
]
If you have example please show it. Thank you!
Now i'm using this way:
var player = new Clappr.Player({
parentId : '#player',
autoplay : false,
sources : [
'http://example.com/source1/index.m3u8',
'http://example.com/source2/index.m3u8',
'http://example.com/source3/index.m3u8'
],
plugins : { 'core': [LevelSelector] },
levelSelectorConfig: {
labels: {
3 : '1080p',
2 : '720p',
1 : '480p',
0 : '360p'
}
},
});
But in bitrate list i see only first src.
@mikeevstropov and @gabrielirdeb I don't this is a "real" issue, at the best we can see this as a new feature. In theory your variant (master) playlist should be generated in your server, this would provide a smooth playback change.
Besides, this also raises a lot of questions about the expected behavior:
sources : [
'http://example.com/source1/index.m3u8',
'http://example.com/source2/index.m3u8',
'http://example.com/source3/index.m3u8'
],
How should we handle this sources?
- play one after the other (binge watch) ?
- use it as fallback (
a lahtml5 video) ? - use it to compose a playback with different bitrates ?
Maybe we could force a list of qualities (this might be very easy to do), what do you think @clappr/core ?
levelSelectorConfig: {
levels: {
[label: '1080p', src: ''http://example.com/source1/index.m3u8''],
[label: '1080p', src: ''http://example.com/source1/index.m3u8''],
[label: '1080p', src: ''http://example.com/source1/index.m3u8''],
[label: '1080p', src: ''http://example.com/source1/index.m3u8'']
}
},
@leandromoreira , @clappr/core +1 for quality list option May be it helps to define avaliable levels for native HLS? https://github.com/clappr/clappr-level-selector-plugin/issues/23
I agree with @leandromoreira, this would fit better as a specific level selector option. Since the sources parameter is handled by a separate plugin, this would cause a number of weird conflicts that we could avoid by handling this separately.
Taking the suggested config, the plugin could switch sources using load() by itself, and providing an initial seek value, thus avoiding conflicts with other plugins.
@leandromoreira This seems like a good solution. By defining it in the plugin we can write our own hls parsers to pass to the plugin. Nice and clean.
I made a #30 for it after that we also need to provide the documentation, this also relies at clappr PR (which I'm doing now :P )
levelSelectorConfig: {
levels: [
{id: 0, label: '1080p', src: "http://example.com/source1/index.m3u8"},
{id: 1, label: '1080p', src: "http://example.com/source1/index.m3u8"},
{id: 2, label: '1080p', src: "http://example.com/source1/index.m3u8"},
{id: 3, label: '1080p', src: "http://example.com/source1/index.m3u8"}
]
}
@cowai I tried once but then I saw it's not easy... ;/ I'll try that later, the problems rises while you trying to change container (and it gets worst on mobile)