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.
Thank you for sharing your informative blog post on fixing issues with Azure Media Player on iOS mobile devices. It is evident that you have put in considerable effort to diagnose and troubleshoot the problem. Your detailed explanation of the possible reasons for the issues and the suggested solutions are helpful and easy to follow.
I appreciate your thoroughness in providing a checklist to diagnose the issues, covering aspects such as checking the attributes on players, preventing load with
nativeControlsForTouch, using correct MIME types, and avoiding the addition of event listeners. The code snippets you provided will be particularly useful for those who are facing similar issues.However, I noticed a minor typo in the first sentence of the second paragraph: "As for the player itself is not open source, it might happen some strange effects when I change these settings." I believe you meant to say, "As the player itself is not open source, there might be some strange effects when changing these settings."
Additionally, it would be helpful if you could provide more information on how iOS devices specifically differ from Android devices in terms of Azure Media Player support. This would provide readers with a better understanding of the underlying reasons for the issues you described.
Overall, your blog post is informative and well-structured, and it will undoubtedly assist many developers who are facing similar problems with Azure Media Player on iOS devices. Keep up the great work!