Azure Media Service HLS stream plays on laptop/desktop but not on mobile devices

Question

I am using the Azure Media Player to play back Azure Media Services HLS encoded files. It is working on a desktop/laptop browser, but not on iOS or Android in Chrome. The player loads, but the video itself does not. It just sits at 00:00 and clicking the play icon does nothing.

Here is the code for the head of the document:

<link href="//amp.azure.net/libs/amp/2.3.10/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet"><script src= "//amp.azure.net/libs/amp/2.3.10/azuremediaplayer.min.js"></script>  

The URL to the test video page is here: https://uhhm.org/uhhm-video-2

I encoded using Adaptive Streaming. I found that H265AdaptiveStreaming wasn't supported by my browser.

I set Predefined_DownloadAndClearStreaming as the Policy.

Here is the code I have arrived at after reading a tutorial about changing the mime type and adding playsinline

<video id="vid1" class="azuremediaplayer amp-default-skin" data-setup='{"fluid": true}' autoplay controls playsinline poster="poster.jpg" data-setup='{"nativeControlsForTouch": false}'>  
        <source src="https://uhhmvideo-usea.streaming.media.azure.net/8684039f-af4a-440e-a13f-9d3f74b3288a/Dapper Dan - A Fashion Legend.ism/manifest(format=m3u8-cmaf)" type="application/vnd.ms-sstr+xml" />  
        <p class="amp-no-js">  
            To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video  
        </p>  
    </video>  

I did test the video use the https://hls-js.netlify.app/ on mobile and it returned this error:

your browser does not support media source extension / mp4 media source

So, do HLS files now work on mobile devices? Should I use another method?

I hesitate to do progressive download with mp4 but may have to. I really don't know what to do here.

Answer 1

This stream appears to be playing correctly in AMP - http://ampdemo.azureedge.net/?url=https%3A%2F%2Fuhhmvideo-usea.streaming.media.azure.net%2F41e53b30-bd01-4315-8366-292b95d16376%2FBackstage%20at%20Madison%20Square%20Gard.ism%2Fmanifest

Keep in mind that AMP does not actually support HLS playback directly... it will hand off to the native iOS AVPlayer for playback.

The HLS content appears to also playback fine in Shaka player:
https://nightly-dot-shaka-player-demo.appspot.com/demo/#audiolang=en-US;textlang=en-US;uilang=en-US;asset=https://uhhmvideo-usea.streaming.media.azure.net/41e53b30-bd01-4315-8366-292b95d16376/Backstage%20at%20Madison%20Square%20Gard.ism/manifest(format=m3u8-cmaf);panel=CUSTOM%20CONTENT;build=uncompiled

And in HLS.js https://hls-js.netlify.app/demo/
https://uhhmvideo-usea.streaming.media.azure.net/41e53b30-bd01-4315-8366-292b95d16376/Backstage at Madison Square Gard.ism/manifest(format=m3u8-cmaf).m3u8

Sometimes it helps the player if you add the .m3u8 extension to the end.

One thing I noted above is the mime type you used for HLS appears to be wrong. type="application/vnd.ms-sstr+xml"
I believe that is the Smooth Streaming XML manifest mime type. HLS does not use XML, so that is a clue.
HLS uses "vnd.apple.mpegURL" - see https://developer.apple.com/documentation/http_live_streaming/deploying_a_basic_http_live_streaming_hls_stream

On mobile devices, you should be using the native video tag with the HLS m3u8 source instead of HLS.js player.
I believe that there are some samples for providing fallback to video tag in the HLS.js docs. https://hls-js.netlify.app/api-docs/
If you playback HLS in HLS.js on the browser in Safari or Chrome on iOS you should see an error message that says "Your Browser does not support MediaSourceExtension/MP4 mediasource" in the Status line below the player on the hls-js.netlify.app.
That should be your primary issue...

Check this stackblitz using your original HLS and a standard <video> tag on an iPhone device.
Application URL - https://js-cugush.stackblitz.io
Editor stackblitz - https://stackblitz.com/edit/js-cugush?file=index.html

iOS Safari on iPhone does not support the MediaSource API. This includes all browsers on iOS as well as apps using UIWebView and WKWebView.
Safari browsers (iOS, iPadOS, and macOS) have built-in HLS support through the plain video "tag" source URL.

When a platform has neither MediaSource nor native HLS support, the browser cannot play HLS.

Find a support matrix of the MediaSource API here: https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

Answer 2

Okay, so let me remove autoplay from the string and see if that does anything to help,

Answer 3

On mobile devices, you should be using the native video tag with the HLS m3u8 source instead of HLS.js player.
I believe that there are some samples for providing fallback to video tag in the HLS.js docs. https://hls-js.netlify.app/api-docs/
If you playback HLS in HLS.js on the browser in Safari or Chrome on iOS you should see an error message that says "Your Browser does not support MediaSourceExtension/MP4 mediasource" in the Status line below the player on the hls-js.netlify.app.
That should be your primary issue...

Check this stackblitz using your original HLS and a standard <video> tag on an iPhone device.
Application URL - https://js-cugush.stackblitz.io
Editor stackblitz - https://stackblitz.com/edit/js-cugush?file=index.html