Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTTP Live Streaming detection on mobiles

I want to detect if a mobile phone/tablet can play HTTP Live Streaming (m3u8).

I'm currently testing with this script:

function isHLSEnabled() {
    var videoElement = document.createElement('video'),
        canPlayAppMpeg = videoElement.canPlayType('application/x-mpegURL'),
        canPlayAppleMpeg = videoElement.canPlayType('vnd.apple.mpegURL');

    return (
        (canPlayAppMpeg == 'probably' || canPlayAppMpeg == 'maybe')
        || (canPlayAppleMpeg == 'probably' || canPlayAppleMpeg == 'maybe')
    );
}

But it doesn't work well on some Samsung browsers (stock, dolphin, etc) - it returns false (because the canPlayTypes are empty strings) however it is able to play the video.

Are there any bulletproof(ish) solutions for detecting this kind of streaming support?

like image 231
JoeyKozinsky Avatar asked Apr 23 '14 15:04

JoeyKozinsky


People also ask

How does HTTP Live Streaming work?

Although it is called HTTP "live" streaming, it is used for both on-demand streaming and live streaming. HLS breaks down video files into smaller downloadable HTTP files and delivers them using the HTTP protocol. Client devices load these HTTP files and then play them back as video.

What is live streaming app?

What is live streaming? Live streaming technology lets you watch, create and share videos in real time, a bit like live TV. All you need to be able to live stream is an internet enabled device, like a smart phone or tablet, and a platform (such as a website or app) to live stream from.


1 Answers

I am not sure if there is bulletproof solution available at this point.

Using the video element's canPlayType method is the only thing that really 'works'. There are around +/- 5/6 media formats which have oke support from modern browsers.

So basically you create a list of formats you want to support and test from them. The canPlayType method allows you to also specify which codec. Which you should do since just testing for WebM might no lead to the desired result, an example:

element.canPlayType('video/webm; codecs="vp9"').

After you do so you should generally get three different responses: "probably", "mabye" or ""(the empty string meaning: not supported).

Some resources you might find useful:

Mozilla provides a list of the main stream formats/codec:

Mozilla Media Format List

Modernizr is framework that will test support for the majority of html5 video formats. You might also want to take a look at their source code for the html5 video detection.

Modernizr HTML video detect

like image 154
Niels Avatar answered Oct 21 '22 09:10

Niels