CODEWITHSUNDEEP
jqueryvideo-streaminghtml5-videojwplayermp4
dev
dev

Reputation: 565

How to toggle different resolution for the same video file on jwplayer

I just want to toggle different resolutions for the same file like on youtube. This is what I mean I have a file of 1080p and it is playing then I need to provide the toggle resolution options below then 1080 like 720p,480p,360p . I have been exploring this and I found that we have to provide different sources for each resolution but I think it can be done using the same file. I am working hard and tried so many things but still no success. This is what I am doing

$file = '[{"type": "video/mp4", "label": "360p", "file": "test.mp4"}]';
$file2 = '[{"type": "video/mp4", "label": "480p", "file": "test.mp4"}]';
<script type="text/javascript">
        jwplayer("myElement").setup({
            playlist: [{
                "sources":<?php echo $file?>,

            },
            {
                "sources":<?php echo $file2?>,

            }],
            allowfullscreen: true,
            width: '100%',
            aspectratio: '16:9',
        });
    </script>

File is playing but not showing any resolution toggle option.any solution?

Upvotes: 1

Views: 1699

Answers (1)

jherrieven
jherrieven

Reputation: 425

List your different source "qualities" in a single playlist item rather than as separate playlist items.

Where the media type is the same in an array of sources, JW Player will use this to provide a quality selector for that single item.

Where they are different, JW Player assumes a waterfall fallback of media types - in order to cover cross-browser support:

jwplayer("myElement").setup({
    ...
    playlist: [{
        ...
        "sources": [
            {"type": "mp4", "label": "Quality 1", "file": "test.mp4"},
            {"type": "mp4", "label": "Quality 2", "file": "test.mp4"},
            {"type": "mp4", "label": "Quality 3", "file": "test.mp4"}
        ],
        ....
    }],
    ...
});

NOTE: You need to include 3 quality variations in order for the Quality Selector popup menu to appear - otherwise the "HD" button simply acts as a toggle button.

Upvotes: 1

Related Questions