VideoJS select the source according to browser - browser

Question

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.

Answer 1

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.

Answer 2

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'})