Identifying HTTP Live Streaming on mobile devices

I am seeking a reliable method to determine if a mobile device can play HTTP Live Streaming (m3u8).

Currently, I am using the following script for testing purposes:

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

However, this script does not perform well on certain Samsung browsers (such as stock, dolphin, etc) - it returns false because the canPlayTypes are empty strings even though the video can still be played.

Are there any foolproof solutions for accurately detecting support for this type of streaming?

javascriptandroidmobilehttp-live-streaming

Answer №1

Currently, there is no foolproof solution available.

The canPlayType method of the video element seems to be the most reliable option. There are approximately 5 to 6 media formats that receive adequate support from modern browsers.

To ensure compatibility, you should create a list of preferred formats and test them using the canPlayType method, specifying codecs when necessary. For example, 

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

Upon testing, you will likely receive one of three responses: "probably," "maybe," or "" (indicating lack of support).

For additional resources:

Refer to Mozilla's list of supported media formats and codecs:

Mozilla Media Format List

Consider utilizing Modernizr, which tests for html5 video format support. You can also explore their source code for html5 video detection:

Modernizr HTML video detect

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the value of the object within the mysterious index loop in JavaScript

I have retrieved search results from the data, and each time the index of my search result varies. At one point, the result may appear in the 4th index, while at another time it might be in the 100th index. How can I retrieve the rank value from within t ...

javascriptangulartypescript

Implementing AngularJS directives with jQuery

Utilizing Jquery Selectric to enhance the select box in my AngularJS app led me to create a directive for rendering the element. Below you'll find the directive code along with how it's implemented. The Directive: angular.module('shoeReva ...

javascriptjqueryangularjsjquery-selectric

Using jQuery to crop an SVG view box

I'm currently working on a sticker website project for a client who requires the ability to crop an image within a specific SVG shape, resembling a Halloween face (shown below). The uploaded image should be displayed only within this shape while hidi ...

javascriptjqueryimagesvgcrop

Vue component doesn't update reactively until the template value changes

I have a child component in my Vue application that utilizes Vuex for managing certain values. Currently, when I trigger an action in the parent component, it should also trigger the child component. This is achieved by passing an active boolean prop to t ...

javascriptvue.js

I have observed that the form on an ASP.NET MVC Partial View can only be submitted after pressing the Enter key twice on the

**** Update - This issue seems to be specific to MS Edge. It functions properly with just one Enter key press on Chrome and Firefox.** I encountered a strange problem where a form only gets submitted after pressing Enter key twice in a text box. The form ...

javascriptjqueryasp.net-mvcmicrosoft-edgeajax.beginform

Sort ng-repeat based on the initial character

Working in AngularJS, I am handling an array of objects and aiming to display filtered data based on the first letter. My initial method used was as follows. HTML: <p ng-repeat="film in filmList | startsWith:'C':'title'">{{film. ...

javascriptangularjsangularjs-ng-repeatangular-filters

Alert from Google Play: A Cross-App Scripting Vulnerability has been found in your application

Hello everyone, I recently received an email from Google Play regarding a Cross-App Scripting Vulnerability in one or more of my published apps. The issue identified was related to the use of WebView in my apps, which could potentially allow malicious app ...

androidandroid-webviewandroid-securitygoogle-play-console

"Customizing the Material-ui TextField DOM Element: A Step-by-Step

After trying the code below, I was expecting to see a yellowish "Hi," but instead received [object Object]. Is there a way to correct this issue? Possibly utilizing InputProps would help, but I haven't been able to locate a comprehensive tutorial on ...

javascripthtmlcssreactjsmaterial-ui

Organize divs based on their attributes

Using inspiration from this SO post, my goal is to group divs based on their "message-id" attribute. The idea is to wrap all divs with the same "message-id" in a div with the class name "group". <div class="message" message-id="1"> ...

javascriptjquery

TS1086: Attempting to declare an accessor within an ambient context is not allowed

While using Angular, I encountered the error TS1086: An accessor cannot be declared in an ambient context. when using Javascript getters and setters in this Abstract Typescript class. Here is the code snippet causing the issue: /** * The current id ...

javascriptangulartypescript

Is there a specific regular expression that can be used for validating Credit Card Expiry dates in Javascript/Ang

I am currently working on a textfield where users can enter their credit card expiry date in the format mm/yy. To ensure the validity of this input, I have implemented JavaScript validation using regular expressions. Here is an example of what I have tried ...

javascriptangularjs

Generate real-time dynamic line charts using data pulled directly from a MySQL database

I am in search of guidance on developing a real-time line chart that can dynamically update based on data fetched from MySQL. I need an example or reference on how to achieve this functionality without having to refresh the webpage every time new data is ...

javascripthtmlmysql

Encountering an issue while attempting to read JSON data. The error message displayed is: "W/System.err: org.json.JSONException: No value

I need help retrieving customer objects from my REST API that was generated using Spring Data JPA. I have used Volley to access the information, but I am having trouble parsing the data as I am new to Android development. Can someone assist me in extractin ...

javaandroidjsonrestandroid-volley

Troubleshooting a Custom Menu Control in HTML

Would you mind taking a look at the menu I have set up in this fiddle: http://jsfiddle.net/Gk_999/mtfhptwo/3 (function ($) { $.fn.menumaker = function (options) { var cssmenu = $(this), settings = $.extend({ title: "Menu", ...

javascripthtmlcssmenuhtml-lists

Scheduling a cron job to run at a particular date and time

Our express js application includes a feature in the admin module where users can send emails at specific dates and times they select. For example, if the chosen date and time is [email protected], we need to execute the email code at that exact time ...

javascriptnode.jsexpresscron

What is the best way to extract items from a JSON object that have the same key?

Currently, I have implemented PHP code that retrieves a list of employees from a table on my server: The function in DB_Functions.php file looks like this: public function getEmployeeList($name) { $stmt = $this->con->prepare("SELECT employee_na ...

phpandroidjson

What causes the reflection of JavaScript variables when there is a change in ng-model?

By declaring the object globally and assigning it during an HTTP call when the Angular controller loads, I am able to update the values of this object in the Angular scope variables and access them through ng-models. When a button is clicked and one of the ...

javascriptangularjsasp.net-mvc

Using async/await in React to retrieve data after a form submission

I am currently facing an issue with displaying data fetched from an API on the screen. My goal is to retrieve data when a user types something in a form and clicks the submit button. The error message I am encountering is: TypeError: Cannot read propert ...

javascriptreactjsasync-await

The Axios-generated string I created is returning a 403 forbidden error due to a broken URL, however, it works perfectly fine

When Axios creates a string that combines multiple values to form a URL, it sometimes returns a 403 forbidden error due to a broken URL. For example, the following code works fine: const inventory = await axios.get("http://steamcommunity.com/inventory/765 ...

javascriptnode.jsasynchronousasync-awaitaxios

In JavaScript, use the href property to redirect to an external URL and then automatically scroll to a specific class on the page

I have a specific scenario where I need to create a link that redirects to an external website, of which I do not own. However, I am aware that there is a div with a particular class located at the bottom of their page, linking to an article. My goal is to ...

javascripthtmlurlhref