Level selector not working in Safari

[rduque1]

In Safari the level selector menu item is not showing, This is the error message I get in the console:

error performing selector: "a[data-playback-rate-select=\"1.0\""

This is my player configuration:

        var player = new Clappr.Player({
          source: vidUrl,
          parentId: "#player",
          plugins: {
            core: [PlaybackRatePlugin, LevelSelector],
            playback: [Clappr.FlasHLS]
          },
          playbackRateConfig: {
            defaultValue: '1.0',
            options: [
              {value: '2.0', label: '2x'},
              {value: '1.75', label: '1.75x'},
              {value: '1.5', label: '1.5x'},
              {value: '1.0', label: '1x'},
              {value: '0.75', label: '0.75x'},
              {value: '0.5', label: '0.5x'}
            ]
          },
          levelSelectorConfig: {
            labels: {
              3: '1080p',
              2: '720p',
              1: '540p',
              0: '360p'
            }
          },
          autoPlay: true,
          mediacontrol: { background: "#1f697f" },
          width: 700,
          height: 394
        });

I am using clappr 0.2.51 and level selector plugin 0.1.10. My Safari version is Version 9.1 (11601.5.17.1).

It looks like the selector is not working in Safari.

[leandromoreira]

Hi @rduque1 I think this error is due to some possible problem with https://github.com/bikegriffith/clappr-playback-rate-plugin we need check the safari error though. @rduque1 did you see any error on log console? can you paste a log of it?

[andresjuarez]

Hello, @rduque1 @leandromoreira Any solution about this?

[leandromoreira]

@andresjuarez I'd say for to try to remove playbackRateConfig and see if the errors are still happening if there are not we can open an issue at that plugin. (I could not reproduce this bug locally)

[andresjuarez]

Browser: Safari 3.0.2 OS: OSX El Capitan 10.11.2 Clappr Version: Version over CDN level Selector version: Version over CDN

I just test it here http://cdn.clappr.io

With this code:

var playerElement = document.getElementById("player-wrapper"); var player = new Clappr.Player({ source: 'http://content.jwplatform.com/manifests/vM7nH0Kl.m3u8', plugins: { 'core': [LevelSelector] }, levelSelectorConfig: { title: 'Quality', labels: { 2: 'High', // 500kbps 1: 'Med', // 240kbps 0: 'Low', // 120kbps } }, baseUrl: '/latest', poster: 'http://clappr.io/poster.png', mute: true, height: 360, width: 640 }); player.attachTo(playerElement);

I was watching what's happening here, I could watch, any Event is called (PLAYBACK_LEVELS_AVAILABLE, PLAYBACK_LEVEL_SWITCH_START, PLAYBACK_LEVEL_SWITCH_END, etc)

[leandromoreira]

@andresjuarez we use the video tag for safari therefore we don't have an API to switch or see the available levels. But then you can force Clappr to use FlasHLS playback:

var playerElement = document.getElementById("player-wrapper");
var player = new Clappr.Player({
    source: 'http://content.jwplatform.com/manifests/vM7nH0Kl.m3u8',
    plugins: [Clappr.HLS, Clappr.FlasHLS, LevelSelector],
    levelSelectorConfig: {
        title: 'Quality',
        labels: {
            2: 'High', // 500kbps
            1: 'Med', // 240kbps
            0: 'Low', // 120kbps
        }
    },
    baseUrl: '/latest',
    poster: 'http://clappr.io/poster.png',
    mute: true,
    height: 360,
    width: 640
});
player.attachTo(playerElement);

[leandromoreira]

Maybe @clappr/core decide to use HLS for Safari as first playback choice too.

[leandromoreira]

We also can implement this solution https://github.com/clappr/clappr-level-selector-plugin/issues/24 it's not easy though.

[thiagopnts]

I completely lost faith in safari as a browser so would avoid using anything that relies on it

[dientai]

@leandromoreira : I follow your code but it takes too long to load video. Are there any other ways than Clappr.FlasHLS?

[leandromoreira]

@dientai we're about to release a clappr that forces the usage of hls.js

[vuhanguyen]

Hi everybody, is there any solution for this issue yet? Level selector still can't display on Safari with the latest Clappr

[joaopaulovieira]

As @leandromoreira said Clappr uses hls.js as playback on Safari for the desktop in the latest version. I don't reproduce the error anymore. If anyone reproduces this error again, please update here!