Can you give a complete example?Use your code in github to not display level-selector button

FairyWorld commented 5 years ago

akr4m commented 5 years ago

Try this html.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Live</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@latest/dist/level-selector.min.js"></script>
    <style>
        .player-poster[data-poster] .poster-background[data-poster] {
            height: initial !important;
        }
    </style>
</head>

<body>
<div id="player" style="position:absolute;top:0;right:0;bottom:0;left:0"></div>

<script>
    var playerElement = document.getElementById("player");

    var player = new Clappr.Player({
        source: 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8',
  poster: 'http://clappr.io/poster.png',
        plugins: [LevelSelector],
        // levelSelectorConfig: {
        //     title: 'Quality',
        //     labels: {
        //         1: 'HD',
        //         0: 'Standard',
        //     },
        //     labelCallback: function(playbackLevel, customLabel) {
        //         return customLabel + playbackLevel.level.height+'p';
        //     }
        // },
        mute: false,
        autoplay:false,
        mediacontrol: {'seekbar': '#c70724', 'buttons': '#c70724'},
        height: '100%',
        width: '100%'
    });

    player.attachTo(playerElement);
</script>
</body>
</html>

leandromoreira commented 5 years ago

Because this url https://v6.438vip.com/2019/01/07/irORUIGPfkirwuZ3/playlist.m3u8 is a single level (or bitrate) therefore there is no need for a level selector.

~/
$ curl -s https://v6.438vip.com/2019/01/07/irORUIGPfkirwuZ3/playlist.m3u8 | head
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:11
#EXTINF:10.510511,
out000.ts
#EXTINF:3.545211,
out001.ts
#EXTINF:1.835178,

~/
$ curl -s https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8 | head
#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2149280,CODECS="mp4a.40.2,avc1.64001f",RESOLUTION=1280x720,NAME="720"
url_0/193039199_mp4_h264_aac_hd_7.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=246440,CODECS="mp4a.40.5,avc1.42000d",RESOLUTION=320x184,NAME="240"
url_2/193039199_mp4_h264_aac_ld_7.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=460560,CODECS="mp4a.40.5,avc1.420016",RESOLUTION=512x288,NAME="380"
url_4/193039199_mp4_h264_aac_7.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=836280,CODECS="mp4a.40.2,avc1.64001f",RESOLUTION=848x480,NAME="480"
url_6/193039199_mp4_h264_aac_hq_7.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=6221600,CODECS="mp4a.40.2,avc1.640028",RESOLUTION=1920x1080,NAME="1080"

akr4m commented 5 years ago

Yes this is single. Provide multi bitarate m3u8 link. You can check from here Clappr Demo http://clappr.io/demo/#dmFyIHBsYXllckVsZW1lbnQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgicGxheWVyLXdyYXBwZXIiKTsKCnZhciBwbGF5ZXIgPSBuZXcgQ2xhcHByLlBsYXllcih7CiAgc291cmNlOiAnaHR0cHM6Ly92aWRlby1kZXYuZ2l0aHViLmlvL3N0cmVhbXMveDM2eGh6ei94MzZ4aHp6Lm0zdTgnLAogIHBvc3RlcjogJ2h0dHA6Ly9jbGFwcHIuaW8vcG9zdGVyLnBuZycsCiAgcGx1Z2luczogW0xldmVsU2VsZWN0b3JdLAogIG11dGU6IHRydWUsCiAgaGVpZ2h0OiAzNjAsCiAgd2lkdGg6IDY0MAp9KTsKCnBsYXllci5hdHRhY2hUbyhwbGF5ZXJFbGVtZW50KTsK

Add this plugin: http://cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@latest/dist/level-selector.min.js

clappr / clappr-level-selector-plugin

Can you give a complete example?Use your code in github to not display level-selector button #81