Is adaptive Streaming possible?

[jankrueger]

Hello there,

does this plugin support adaptive streaming of HLS sources? If i understand it correctly it will select one rendition out of the given manifests and will not utilize the others, right?

[ouija]

I discovered this plugin today when researching the need to combine multiple adapative bitrate/resolution .m3u8 playlist files into a single .m3u8 playlist, and while this plugin does seem to partially do the trick, it doesn't seem to support concating mutiple qualities into a single playlist like you and I hoped.

Making use of the targetVerticalResolution option does allow you define which resolution you'd like to concat from the .m3u8 files defined in the manifest, but this actually doesn't work with the current released version of the plugin available on npm and needs to be manually edited as per this commit

This plugin would be amazing if it could support this.

You could try and set the target quality based on the browser height when the page loads, but this doesn't "adapt" to bandwidth or screen size changes dynamically.

However, for refernce, this could be done with:

$(document).ready(function() {
    changeQuality();
});

function changeQuality() {
    if ($(window).height() <= 240) {
        resolutionTarget = 240;
    } else if ($(window).height() <= 360) {
        resolutionTarget = 360;
    } else if ($(window).height() <= 480) {
        resolutionTarget = 480;
    } else if ($(window).height() <= 720) {
        resolutionTarget = 720;
    } else if ($(window).height() <= 1080) {
        resolutionTarget = 1080;
    }
    player.concat({
        manifests: [{
            url: 'video/Scenes/Scene_01/Scene_01.m3u8',
            mimeType: 'application/x-mpegURL'
        }, {
            url: 'video/Scenes/Scene_02/Scene_02.m3u8',
            mimeType: 'application/x-mpegURL'
        }],
        targetVerticalResolution: resolutionTarget,
        callback: (err, result) => {
            if (err) {
                console.error(err);
                return;
            }
            console.log(result);
            player.src({
                src: `data:application/vnd.videojs.vhs+json,${JSON.stringify(result.manifestObject)}`,
                type: 'application/vnd.videojs.vhs+json'
            });
        }
    });
}