Add Support for Managed Media Source Extensions in MediaElement.js to Enhance Compatibility with iOS 17.1+

[DimaDemchenko]

Issue:
When attempting to play HLS streams on iOS devices using hls renderer in MediaElement.js, the player fails and displays an error. This issue is critical as it affects user experience on iOS devices.

Description:
We are developing a project that leverages P2P video delivery integrated with MediaElement.js and Hls.js. Our goal is to ensure broad compatibility across devices, including iPhones. However, the current implementation encounters compatibility issues on iOS, primarily due to the lack of Managed Media Source Extensions support.

Player configuration:

const player = new MediaElementPlayer(videoElement.id, {
    renderers: ["native_hls"],
    // additional configuration...
});

Proposed Solution:
After I got the error I tried to modify build file.

var HlsNativeRenderer = {
    name: 'native_hls',
    options: {
        prefix: 'native_hls',
        hls: {
            path: 'https://cdn.jsdelivr.net/npm/hls.js@latest',
            autoStartLoad: false,
            debug: false
        }
    },

    canPlayType: function canPlayType(type) {

         // here I added a check for MMS
        return (_constants.HAS_MSE || ("ManagedMediaSource" in window)) && 
               ['application/x-mpegurl', 'application/vnd.apple.mpegurl', 'audio/mpegurl', 'audio/hls', 'video/hls'].indexOf(type.toLowerCase()) > -1;
    },
};

After implementing the above modification in build file, the player successfully played HLS content on an iPhone using hls renderer, resolving the compatibility issue.

Screenshots:

• Error before build file modification
  
• Successful playback after modification