2

I have a dash and an HLS stream. I can play them separately on safari chrome and edge. However, I want to create one player and detect the browser so I can pass the right configuration as a source to the player.

I tried something like the following 

myPlayer.src([
  { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
  { type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
  { type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
]);

However, it just plays the first one and if the first one is a dash stream and you open it in the safari, it gives an error. The above is just example, my sources has DRM info and lots of options. Can you help me with a sample example.

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
C.Aglar
  • 1,290
  • 2
  • 14
  • 30
  • Is this thread helpful? https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851769 – David Dec 11 '18 at 14:43
  • thanks it worked but I thought there might be a similar solution to example above. I can make playready and widebine work like in the example above but it does not work with playready widevine and fairplay. – C.Aglar Dec 11 '18 at 19:01

2 Answers2

4

The interaction between DRMs and packaging or streaming protocols is a little complex.

HLS and DASH are Adaptive Bit Rate streaming protocols. The sever creates multiple fragmented bit rate versions of the video and this allows the client device or player download the video in chunks, e.g 10 second chunks, and select the next chunk from the bit rate most appropriate to the current network conditions. See some more info in this answer also: https://stackoverflow.com/a/42365034/334402

There is an index or manifest file which is just a text/XML file listing the different video, audio, subtitle etc streams and proving URLs for them. This is the .mpd or .m3u8 file.

Most browsers do not support these HLS and DASH 'manifest' files directly at this time (Safari does support HLS as an exception). You need to use a HTML5 player like video.js, Shaka, BitMovin etc.

DRM's allow the content to be encrypted and the keys for the content to be shared securely between the server and the clients.

As a general rule the following DRM's are supported natively on device and browsers - naively means that the DRM is usually built into the OS or the browser when you purchase the device:

  • Android devices - Widevine
  • Chrome browser on a PC or MAC - Widevine
  • FireFox - Widevine
  • iOS device - FairPlay
  • Safari browser - FairPlay
  • Internet Explorer browser - PlayReady

The interaction between DRMs and packaging gets a bit complicated - MPEG-DASH (often just called DASH) is intended to be the industry standard and both Google and MS seem to favour it, but Apple devices still favour HLS.

DASH supports CENC, which allows a single stream support multiple DRM types. HLS is generally used with FairPlay, although it can support other schemes also.

So, with the caveat that this is not absolute and it is possible to find other examples, the typical case for a service to reach all devices at this time would be:

  • MPEG-DASH - single stream with Widevine and PlayReady DRM
  • HLS with FairPlay DRM

You can see from the above that HTML5 Players like video.js etc, have to check the browser they are running on and the types of streams available to make the best choice of stream.

So going back to your question, you can actually specify HLS and DASH streams in your video.js configuration, rather than mp4, web etc as in your code extract above. This will look like:

var player = videojs('some-video-id');

player.src({
  src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
  type: 'application/x-mpegURL',
  withCredentials: true
});

This example is from the https://github.com/videojs/http-streaming which is now part of the standard video.js build. The documentation an examples are very HLS heavy, but it should work with DASH also.

Mick
  • 24,231
  • 1
  • 54
  • 120
0

I had the same problem. I'm using the VideoJs browser module (https://docs.videojs.com/module-browser.html) to check the browser and use the appropriated source. That module has different functions and you might need to chose a different one according to your needs.

My implementation is like this:

if (videojs.browser.IS_ANY_SAFARI) 
    player.src({src: <HLS source>, type: 'application/x-mpegURL'})
else
    player.src({src: <Dash source>, type: 'application/dash+xml'})
Lucas Silva
  • 81
  • 10