Fix Azure Media Player can't play video in iOS mobile devices

Recently, when we are trying to distribute video from Azure Media Service, we noticed that our video can't be played in iOS mobile devices. But the same web page plays normally in Android devices.

There are multiple reasons for iOS devices to load and play Azure Media Player. As for the player itself is not open source, it might happen some strange effects when I change these settings. But the checklist does help diagnostic the issues for it.

Check the attributes on players

First, ensure your plyer has the following properties:

• autoplay
• playsinline
• controls

Like this:

<video id="player" class="azuremediaplayer amp-default-skin" controls autoplay playsinline></video>

Prevent load with nativeControlsForTouch and some features

Using this may cause the player can't load advertisement and subtitles, but use native HTML5 video player instead of Azure Media Player custom skin.

Somehow iOS does not support those advanced features.

var myPlayer = amp('player', {
            "nativeControlsForTouch": false, // <- Set to false
            "logo": {
                "enabled": false
            },
            "techOrder": [
                "azureHtml5JS",
                "flashSS",
                "silverlightSS",
                "html5"
            ]
        });

Prevent loading the player with advertisement and subtitles:

$.get('/vast/getallads/@Model.Unit.Id',function(ads) {
    var presentation = {
        mainProgram: {
            source: {
                        src: "https://video.domain/url",
                        type: "application/vnd.ms-sstr+xml"
                    },
                    tracks: subtitles
            },
            midRoll: ads.result.midRoll, // < - Do not load ads.
            preRoll: ads.result.preRoll
        };
        myPlayer.presentationLayout(presentation); // < - Do NOT load player like this.
    });
}

Just load the player like this in iOS devices:

    @if(isWechat)
    {
        <script>
            myPlayer.src([{
                src: "https://video.domain/url",
                type: "@Html.Raw(url.EndsWith("mp4") ? "video/mp4": "application/vnd.ms-sstr+xml")"
            }]);
        </script>
    }

Use correct MIME types

As for Azure Media Service resources, consider using type: application/vnd.ms-sstr+xml instead of application/dash+xml.

As for other files, like video.mp4, consider using type: video/mp4.

The wrong MIME type may cause the player loads to fail.

Do not add event listeners

Adding event listeners to the player in other platforms works fine, but on iOS it may cause the player stop working or loads extremely slow.

As we tested the following code:

// Do NOT add this!
myPlayer.addEventListener('error', function playerError() {
    var errorDetails = myPlayer.error();
    var code = errorDetails.code;
    var message = errorDetails.message;
    playRefreshButton();
});

Deleting those codes greatly speeds up the player loads performance on iOS devices.