JWPlayer HLSJS Provider

[Denoder]

I have made a github repository for the jwplayer provider, you can find it here:

github: https://github.com/Teranode/jw-provider

cdn: https://cdn.jsdelivr.net/gh/teranode/[email protected]/provider.hlsjs.js

This features the full hls.js API support rather than the limited scope of functions directed by the original jwplayer provider. So you can configure all of what hls.js uses.

This also works with the external hls.js file, but can also use the internal one provided by jwplayer

Installation: append the cdn (or your own self-hosted copy) "before" the jwplayer file (might work after too but to be on the safe side load it before).

afterwards you will condifure p2pml (example):

const iid = setInterval(() => {
    if (window.player.hls && window.player.hls.config) {
        clearInterval(iid);
        p2pml.hlsjs.initHlsJsPlayer(window.player.hls)
    }
}, 200)

I'll be providing updates as the jwplayer release schedule increments. This is currently compatible with JWPlayer 8.18.4

[jhemmmm]

Hello,

I might be doing it wrong. `

<meta charset="UTF-8">

<title>JWPlayer with hls.js engine and P2P demo</title>

<script src="https://cdn.jsdelivr.net/npm/p2p-media-loader-core@latest/build/p2p-media-loader-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p2p-media-loader-hlsjs@latest/build/p2p-media-loader-hlsjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/teranode/[email protected]/provider.hlsjs.js"></script>
<script src="https://content.jwplatform.com/libraries/aG3IMhIy.js"></script>


<style>
    #wrapper {
        width: 720px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

</style>

<script>

    if (p2pml.hlsjs.Engine.isSupported()) {
        var engine = new p2pml.hlsjs.Engine();

        var player = jwplayer("player");

        player.setup({
            preload: "auto",
            file: "http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8"
        });

        const iid = setInterval(() => {
            console.log(player.hls);
            if (player.hls && player.hls.config) {
                clearInterval(iid);
                p2pml.hlsjs.initHlsJsPlayer(player.hls)
            }
        }, 200);
    } else {
        document.write("Not supported :(");
    }

</script>

`

[jhemmmm]

Ops, I was doing it wrong. player.hls.config = { liveSyncDurationCount: 7, loader: engine.createLoaderClass() }

[jhemmmm]

Well, there's a problem on this one. When you try to change a quality, It stopped working, it just keeps loading and won't work anymore.

[hoangvietfreelancer]

player.hls.config = { liveSyncDurationCount: 7, loader: engine.createLoaderClass() }

You can add config through hlsjsConfig when setup player. Using hlsjsConfig will keep default hls config without override like using player.hls.config = { liveSyncDurationCount: 7, loader: engine.createLoaderClass() } Ex:

if (p2pml.hlsjs.Engine.isSupported()) {
    var engine = new p2pml.hlsjs.Engine();

    var player = jwplayer("player");

    player.setup({
        preload: "auto",
        file: "http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8",
        hlsjsConfig: {
            liveSyncDurationCount: 7
            loader: engine.createLoaderClass(),
        },
    });

    const iid = setInterval(() => {
        console.log(player.hls);
        if (player.hls && player.hls.config) {
            clearInterval(iid);
            p2pml.hlsjs.initHlsJsPlayer(player.hls)
        }
    }, 200);
} else {
    document.write("Not supported :(");
}

[hoangvietfreelancer]

Well, there's a problem on this one. When you try to change a quality, It stopped working, it just keeps loading and won't work anymore.

In my case(my test stream), there is no problem when change quality. Had you tried another stream?

[jhemmmm]

player.hls.config = { liveSyncDurationCount: 7, loader: engine.createLoaderClass() }

You can add config through hlsjsConfig when setup player. Using hlsjsConfig will keep default hls config without override like using player.hls.config = { liveSyncDurationCount: 7, loader: engine.createLoaderClass() } Ex:

if (p2pml.hlsjs.Engine.isSupported()) {
    var engine = new p2pml.hlsjs.Engine();

    var player = jwplayer("player");

    player.setup({
        preload: "auto",
        file: "http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8",
        hlsjsConfig: {
            liveSyncDurationCount: 7
            loader: engine.createLoaderClass(),
        },
    });

    const iid = setInterval(() => {
        console.log(player.hls);
        if (player.hls && player.hls.config) {
            clearInterval(iid);
            p2pml.hlsjs.initHlsJsPlayer(player.hls)
        }
    }, 200);
} else {
    document.write("Not supported :(");
}

doing this fixed the change quality change. not really sure why but thanks. :)

[Denoder]

player.hls.config = { liveSyncDurationCount: 7, loader: engine.createLoaderClass() }

You can add config through hlsjsConfig when setup player. Using hlsjsConfig will keep default hls config without override like using player.hls.config = { liveSyncDurationCount: 7, loader: engine.createLoaderClass() } Ex:

if (p2pml.hlsjs.Engine.isSupported()) {
    var engine = new p2pml.hlsjs.Engine();

    var player = jwplayer("player");

    player.setup({
        preload: "auto",
        file: "http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8",
        hlsjsConfig: {
            liveSyncDurationCount: 7
            loader: engine.createLoaderClass(),
        },
    });

    const iid = setInterval(() => {
        console.log(player.hls);
        if (player.hls && player.hls.config) {
            clearInterval(iid);
            p2pml.hlsjs.initHlsJsPlayer(player.hls)
        }
    }, 200);
} else {
    document.write("Not supported :(");
}

doing this fixed the change quality change. not really sure why but thanks. :)

right sorry about that i forgot to say that you needed to add this to the player setup:

        hlsjsConfig: {
            liveSyncDurationCount: 7
            loader: engine.createLoaderClass(),
        },

[jazz1611]

@Teranode can you give some optimize setting for VOD stream with JWPlayer ? Related: https://github.com/Novage/p2p-media-loader/blob/master/FAQ.md#how-to-achieve-better-p2p-ratio-for-vod-streams

[jazz1611]

@Teranode hello, i see your new HLS provider v2 but if run P2P loader with v8.19.0 will error code 232000 "Unknown manifest loading error.", i can run normal jwplayer v8.19.0 without P2P loader

[Denoder]

@Teranode hello, i see your new HLS provider v2 but if run P2P loader with v8.19.0 will error code 232000 "Unknown manifest loading error.", i can run normal jwplayer v8.19.0 without P2P loader

@jazz1611 you have to use https://cdn.jsdelivr.net/npm/hls.js@latest now, not sure why I have to debug it at some other time, but the entire codebase changed so i need to look through things.

[Denoder]

It also might have to do with: https://github.com/Novage/p2p-media-loader/pull/178

[Denoder]

I've provided a release for the fix in the pull request, feel free to use that: https://github.com/Teranode/jw-provider/releases/tag/0.0.3

[jazz1611]

I've provided a release for the fix in the pull request, feel free to use that: https://github.com/Teranode/jw-provider/releases/tag/0.0.3

hello,

your update is working with jwplayer v8.19.0 + P2P loader. also can you fix this error in Firefox browser?

[Denoder]

If anyone's reading this, can anyone run debug mode and tell me if it's working.

[hoangvietfreelancer]

@Teranode It's not working due to JWPlayer 8.19.0 Provider(maybe hls.js) adding this rangeStart: 0 and rangeEnd: 0 to xhr instead of nothing(undefined) So this line https://github.com/Novage/p2p-media-loader/blob/85adce9b0edbc00dfa073321d93a61590af3afc8/p2p-media-loader-hlsjs/lib/hlsjs-loader.ts#L41 should be:

((context.rangeStart == undefined) || (context.rangeEnd == undefined)) || (context.rangeStart === 0 && context.rangeEnd === 0)

I haven't tested on other player and hls.js so I won't make a pull request now

[Denoder]

Thanks m8, it works for me on flowplayer and jwplayer so ill release an update.

[jazz1611]

Thanks m8, it works for me on flowplayer and jwplayer so ill release an update.

hello, do i need //cdn.jsdelivr.net/npm/hls.js@latest in jwplayer setting when run your script provider.hlsjs v4, p2p-media-loader-hlsjs.min.js ?

[hoangvietfreelancer]

@jazz1611 You can add it if you want but it's not necessary

[jazz1611]

@jazz1611 You can add it if you want but it's not necessary

hello, okay. without that hls.js the player still work at normal but this issues still not fixed.

I've provided a release for the fix in the pull request, feel free to use that: https://github.com/Teranode/jw-provider/releases/tag/0.0.3

hello,

your update is working with jwplayer v8.19.0 + P2P loader. also can you fix this error in Firefox browser?

[afdah]

Using this provider seems to ignore the below settings. requiredSegmentsPriority

[alexwuan96]

Well, there's a problem on this one. When you try to change a quality, It stopped working, it just keeps loading and won't work anymore.

In my case(my test stream), there is no problem when change quality. Had you tried another stream? Hi @hoangvietfreelancer hoangvietfreelancer Some devices not support, the player can't initial. How to fix ? } else { document.write("Not supported :("); // How to load native player if not supported p2p ? }

[hoangvietfreelancer]

You can using native player if not support using this:

if (p2pml.hlsjs.Engine.isSupported()) {
    var engine = new p2pml.hlsjs.Engine();

    var player = jwplayer("player");

    player.setup({
        preload: "auto",
        file: "http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8",
        hlsjsConfig: {
            liveSyncDurationCount: 7
            loader: engine.createLoaderClass(),
        },
    });

    const iid = setInterval(() => {
        console.log(player.hls);
        if (player.hls && player.hls.config) {
            clearInterval(iid);
            p2pml.hlsjs.initHlsJsPlayer(player.hls)
        }
    }, 200);
} else {
    var player = jwplayer("player");

    player.setup({
        preload: "auto",
        file: "http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8",
    });
}

Simply if it not support just init the player like normal

[jazz1611]

the p2p lib and your script still working in jwplayer?

[jazz1611]

@Teranode hello, i just tested again. p2p lib and your script working with jwplayer v8.20.2. in Firefox can play with alot client p2p but in Chrome i open 2 tab with same URL but no stream from p2p. what wrong with Chrome ?

[pedro0606]

You can using native player if not support using this:

if (p2pml.hlsjs.Engine.isSupported()) {
    var engine = new p2pml.hlsjs.Engine();

    var player = jwplayer("player");

    player.setup({
        preload: "auto",
        file: "http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8",
        hlsjsConfig: {
            liveSyncDurationCount: 7
            loader: engine.createLoaderClass(),
        },
    });

    const iid = setInterval(() => {
        console.log(player.hls);
        if (player.hls && player.hls.config) {
            clearInterval(iid);
            p2pml.hlsjs.initHlsJsPlayer(player.hls)
        }
    }, 200);
} else {
    var player = jwplayer("player");

    player.setup({
        preload: "auto",
        file: "http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8",
    });
}

Simply if it not support just init the player like normal

Thank for your template. I was used it but the video loading and warn [email protected]:1 [warn] > playback not stuck anymore @52.014543, after 2736ms JW Player Warning 330000. JW Player Warning 334001 what are problems ?