hls as fallback when using shaka plugin

Question

hls as fallback when using shaka plugin

deedos opened this issue 8 years ago · 18 comments

Hi.

My idea is using dash as primary and for old browsers, fallback to an hls with Flash. My code as follow:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/clappr/latest/clappr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/clappr.dash-shaka-playback/latest/dash-shaka-playback.js"></script>
  </head>

  <body>
    <div id="player"></div>
    <script>
      var player = new Clappr.Player(
        {
          source: 'https://shaka-player-demo.appspot.com/assets/angel_one.mpd?_=1446383792251',
          source: 'http://nasatv-lh.akamaihd.net/i/NASA_101@319270/master.m3u8',
          plugins: {
            'playback': [DashShakaPlayback],

          },

          parentId: '#player'
        });
    </script>
  </body>
</html>

Even on browsers with MSE enabled, tha player gives priority to the hls stream. How to state the priority to the MPEG DASH stream ?

many thanks in advance

Answer 1 · 2016-04-07T20:35:43.000Z

@deedos quick solution - check for MSE support in browser and configure mpeg-dash blayback if MSE is supported and HLS if not. In real world you also need to check for flash support etc (Clappr.Browser.hasFlash)

quick and dirty sample

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/clappr/latest/clappr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/clappr.dash-shaka-playback/latest/dash-shaka-playback.js"></script>
  </head>

  <body>
    <div id="player"></div>
    <script>
    window.onload = function() {

      var player, source, playback, hasMSE,
        hls = 'http://nasatv-lh.akamaihd.net/i/NASA_101@319270/master.m3u8',
        mpd = 'https://shaka-player-demo.appspot.com/assets/angel_one.mpd?_=1446383792251';

      hasMSE = function() {
        var mse = "MediaSource" in win || "WebKitMediaSource" in win;
        return !!mse;
      }   

      if ( hasMSE )
      {   
        source = mpd;
        playback = DashShakaPlayback;
      }   
      else
      {   
        source = hls;
        playback = Clappr.FlasHLS;
      }   


      player = new Clappr.Player(
        {   
          source: source,
          plugins: {
            'playback': [playback],
          },  

          parentId: '#player'
        }); 
    }   
    </script>
  </body>
</html>

Answer 2 · 2016-04-08T01:31:42.000Z

I think you can just rely on sources, it'll look for the first valid source. (and you can provide extension for this behavior)

      var player = new Clappr.Player(
        {
          sources: ['http://nasatv-lh.akamaihd.net/i/NASA_101@319270/master.m3u8', 'https://shaka-player-demo.appspot.com/assets/angel_one.mpd?_=1446383792251'],
          plugins: [DashShakaPlayback],
          // now, if you want to force flash you need to put Clappr.FlasHLS on 
          // this list first otherwise it'll use hls.js
          parentId: '#player'
        });

Answer 3 · 2016-04-09T01:44:21.000Z

Thanks @leandromoreira I forgot to mention sources option.

@deedos just keep in mind browsers that reports support for MPEG-DASH and MSE but dash support is unstable (firefox on desktop) or unusable (firefox on android).

IMHO HLS as primary playback and DASH as fallback looks more interesting at the moment.

Answer 4 · 2016-04-11T14:44:02.000Z

Hi @me-vlad and @leandromoreira , thanks you both for the help! It seems like the sources plugin, the cleanest way to go.

I did try with the sources plugin and it works, MPEG-DASH is the priority, but, when using browsers with no MSE support (firefox before 45), Clappr.FlasHLS does not load at all. My code as follow

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/clappr/latest/clappr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/clappr.dash-shaka-playback/latest/dash-shaka-playback.js"></script>
     <!-- <script src="../clappr-youtube-playback/bin/hook.js"></script> -->
  </head>

  <body>
    <div id="player"></div>
    <script>
      var player = new Clappr.Player(
        {
          sources: ['http://yt-dash-mse-test.commondatastorage.googleapis.com/media/feelings_vp9-20130806-manifest.mpd', 'http://nasatv-lh.akamaihd.net/i/NASA_101@319270/master.m3u8'],
          plugins: {
            'playback': [Clappr.FlasHLS, DashShakaPlayback],

          },

          parentId: '#player'
        });
    </script>
  </body>
</html>

When using Firefox older than 45, the player reports that there is no valid sources (If I remove the MPEG-DASH source, it loads FlashHLS and plays correctly)

@me-vlad It seems to me that MSE and MPEG-DASH on google Chrome has support and it's stable for quite a while now, isn't it ?

Thanks again

Answer 5 · 2016-04-11T21:06:50.000Z

@deedos try this:

          plugins: [DashShakaPlayback, Clappr.FlasHLS]

Answer 6 · 2016-04-12T00:26:04.000Z

@deedos yes, on desktop version of the Chrome MSE support is more stable than on FF.

Answer 7 · 2016-04-12T18:13:13.000Z

@leandromoreira I did try plugins: [DashShakaPlayback, Clappr.FlasHLS] and it didn't work!
thanks

Answer 8 · 2016-04-12T19:08:47.000Z

@leandromoreira @deedos there was an issue on Clappr (clappr/clappr/issues/941) that prevented the fallback behavior to work properly.

It's been fixed already, and will be included in the next release.

Answer 9 · 2016-04-12T22:15:47.000Z

can you test pointing clappr to the header @deedos ?

Answer 10 · 2016-04-13T17:35:25.000Z

Hi @leandromoreira . Do you men build clappr after @towerz commit and use it locally for testing ?

Answer 11 · 2016-04-13T17:39:03.000Z

yes @deedos 👍

git clone clappr
npm install
npm run release
use dist/ folder

=)

Since we didn't release a new version yet.

Answer 12 · 2016-04-13T18:34:43.000Z

@deedos and try to use latest FF with MSE fixes:
https://www.mozilla.org/en-US/firefox/45.0.2/releasenotes/
https://bugzilla.mozilla.org/show_bug.cgi?id=1258562

Answer 13 · 2016-04-13T21:17:53.000Z

@leandromoreira Having some issues building:

npm run release

> clappr@0.2.47 build /var/www/html/clappr
> webpack --progress


module.js:340
    throw err;
          ^
Error: Cannot find module 'webpack'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/var/www/html/clappr/webpack.config.js:2:15)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

npm ERR! clappr@0.2.47 build: `webpack --progress`
npm ERR! Exit status 8
npm ERR! 
npm ERR! Failed at the clappr@0.2.47 build script.
npm ERR! This is most likely a problem with the clappr package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --progress
npm ERR! You can get their info via:
npm ERR!     npm owner ls clappr
npm ERR! There is likely additional logging output above.
npm ERR! System Linux 4.2.0-16-generic
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "run" "build"
npm ERR! cwd /var/www/html/clappr
npm ERR! node -v v0.10.25
npm ERR! npm -v 1.4.21
npm ERR! code ELIFECYCLE
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian

I have tried to install nodejs-legacy but does not work neither. S.O Ubuntu 15.10

thanks

Answer 14 · 2016-04-13T23:32:12.000Z

@deedos you need to use node (v5.10.1) in a higher version:

$ rm -rf node_modules
$ npm install

I built a version locally, you can use it to test. http://s000.tinyupload.com/?file_id=75972455017971560158

Answer 15 · 2016-04-30T02:20:16.000Z

@deedos do you think you can close this one?

Answer 16 · 2016-05-02T15:07:47.000Z

Hi @leandromoreira

Sorry for the lack of resposne, Was offline for a couple of days.
I could not maks it work as expected: a new error with today hosted versions. When using firefox withou media source support

The error:

The code;

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/clappr/latest/clappr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/clappr.dash-shaka-playback/latest/dash-shaka-playback.js"></script>
  </head>

  <body>
    <div id="player"></div>
    <script>
      var player = new Clappr.Player(
        {
          sources: ['http://yt-dash-mse-test.commondatastorage.googleapis.com/media/feelings_vp9-20130806-manifest.mpd', 'http://nasatv-lh.akamaihd.net/i/NASA_101@319270/master.m3u8'],
          plugins: {
            'playback': [DashShakaPlayback, Clappr.FlasHLS],
          },
          parentId: '#player'
        });
    </script>
  </body>
</html>

If I change the sources positions ad make the hls first, It works for FF without MSE but for Chrome with MSE, it plays the hls first as well.

Thanks again

Answer 17 · 2016-05-02T16:19:28.000Z

Thanks @deedos that's another issue :D

Answer 18 · 2016-05-02T19:26:51.000Z

@deedos I just released a new version fixing that behavior (FF with no MSE working), can you test it again?