none
Video Streaming Issue On IOS Platforms RRS feed

  • Question

  • Hi I integrated Azure media player v2.1.8 in my Cordova Application. Video player works fine for Android platform but showing following weird behavior on IOS platform.

    Initially when video is uploading and streaming is keep going on, I could not able to do anything like (Play, Pause activity) on IOS device, basically a busy cursor is loading and hides play button and once streaming is done after some time it gives me following error.

    "The video playback was aborted due to a corruption problem or because the video used features your browser did not support (0x400000)"

    For more details or if it helps. I'm using following Video tag, js and css reference to add run time features of AzureMedia player.

    <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls width="100%" height="240" poster="" data-setup='{}' tabindex="0">

            <source src="https://bdpuatmediaaccount-euno.streaming.media.azure.net/b6347cee-f266-4185-9bad-c177d2b8bd1a/4. O Negative_4x3_Texted_v02.ism/manifest" type="application/vnd.ms-sstr+xml" />

    </video>

    https://amp.azure.net/libs/amp/2.1.9/skins/amp-default/azuremediaplayer.min.css

    https://amp.azure.net/libs/amp/2.1.9/azuremediaplayer.min.js

    Pl. assist what can I do to get rid over this issue.

    Wednesday, September 26, 2018 11:09 AM

Answers

  • Sumit,

    Please change the version of AMP you're using to 2.2.1.  I've tried my simple web page without autoplay and the video loads fine on iOS Safari 11.3.1.  You can read more about the new iOS autoplay policies here: https://webkit.org/blog/6784/new-video-policies-for-ios/

    Here's the full source code of my simple webpage:


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Azure Media Player</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="//amp.azure.net/libs/amp/2.2.1/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
        <script src="//amp.azure.net/libs/amp/2.2.1/azuremediaplayer.min.js"></script>

    </head>
    <body>
        <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls width="640" height="400" poster="" data-setup='{}' tabindex="0">
            <source src="//bdpuatmediaaccount-euno.streaming.media.azure.net/b6347cee-f266-4185-9bad-c177d2b8bd1a/4. O Negative_4x3_Texted_v02.ism/manifest" 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>
    </body>
    </html>

    Please note the AMP version change in the code.

    Looks like you're using javascript script to set up the video tag.  That is fine.  But please try to get your webpage working in iOS Safari first without putting it in Cordova.  Once you have it working in Safari, then go ahead and try it in Cordova.

    Friday, October 5, 2018 7:29 PM

All replies

  • Are you using AES with a restricted token? If so, you will need to add a proxy to your service. 

    We look forward to your reply.

    Thursday, September 27, 2018 12:17 AM
    Moderator
  • Sumit,

    I tested your video on a test web page and it plays fine on iOS Safari 11.2.6 and 11.3.1.  The test page uses http rather than https.  Can you put your web code on a webpage and test it from within Safari to see if it works?

    Here's the code that I used:


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Azure Media Player</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="//amp.azure.net/libs/amp/2.1.9/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
        <script src="//amp.azure.net/libs/amp/2.1.9/azuremediaplayer.min.js"></script>
    </head>
    <body>
        <h1>Sample: Clear</h1>
        <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{}' tabindex="0">
            <source src="//bdpuatmediaaccount-euno.streaming.media.azure.net/b6347cee-f266-4185-9bad-c177d2b8bd1a/4. O Negative_4x3_Texted_v02.ism/manifest" type="application/vnd.ms-sstr+xml" />
        </video>
        <footer>
            <br />
            <p>Test</p>
        </footer>
    </body>
    </html>

    Friday, September 28, 2018 12:32 AM
  • Hi,

    Thanks for your feedback.

    Would you pl. let me know how I'll check whether I'm using AES or not.

    Monday, October 1, 2018 10:30 AM
  • Hi Henry,

    Thanks for your feedback,

    I tried your suggestion without autoplay option inside video play as I don't want to play video automatically. But if I eliminate "https" keyword as per you mentioned from video url and as well as from my Js and Css reference then on landing on video page only player is visible but video is not loaded. Pl. verify this with attached screen.

    Pl. suggest what can I do.

    Monday, October 1, 2018 1:42 PM
  • Sumit,

    Did you test your web page in a plain iOS Safari browser?  Let's not do anything with Cordova for now.  Hopefully, we can narrow down the problem area and find a solution.

    P.S. I didn't see a screenshot attached in your reply.

    Tuesday, October 2, 2018 7:48 PM
  • Hi Henry,

    My account is still under verification process so sincere apologize as I unable to attached screen right now.

    Wednesday, October 3, 2018 8:13 AM
  • Hi Henry,

    Regarding to your question i.e., "Did you test your web page...". 

    Yes, the video tag that you mentioned is working in IOS safari browser.

    Wednesday, October 3, 2018 8:17 AM
  • Henry, Pl. let me know in case any further information is required from my side to narrow down this issue.
    Wednesday, October 3, 2018 1:24 PM
  • When you tested the webpage on iOS Safari, did you type in "http://" or "https://"?

    Now that you have the work page working in plain iOS Safari, what happens when you use that webpage in Cordova?  How do you load that webpage in Cordova?  Do you see any error messages in XCode console or any javascript error messages?

    Wednesday, October 3, 2018 10:11 PM
  • In web page I use "https://" with "autoplay" option and it's working fine but autoplay not happens. A play button appears and you can play/pause video as per your convenience:

    <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" data-setup='{}' tabindex="0"><source="https://abc.ism/manifest" type="application/vnd.ms-sstr+xml"/></video>


    But If I remove autoplay option from video tag even for Web page I faced following scenario.

    At page load, initially when video is uploading and streaming is keep going on, I could not able to do anything like (Play, Pause activity) on IOS device, basically a busy cursor is loading and hides play button and once streaming is done after some time it gives me following error.

    "The video playback was aborted due to a corruption problem or because the video used features your browser did not support (0x400000)".


    Following Description to load Video Page in Cordova App:

    I use following script tag to programatically load css and js reference once after my video tag added to my html container as Video tag comes from some service.


    <script>

                    function onbodyload()

                    {

                        var videoContent = "<h1>Sample: Clear</h1><video id='azuremediaplayer' class='azuremediaplayer amp-default-skin amp-big-play-centered' controls width='100%' height='240' poster='' data-setup='{}' tabindex='0'><source src='https://bdpuatmediaaccount-euno.streaming.media.azure.net/b6347cee-f266-4185-9bad-c177d2b8bd1a/4. O Negative_4x3_Texted_v02.ism/manifest' type='application/vnd.ms-sstr+xml' /></video>";

                        

                        

                        $("#videoContainer").append(videoContent);

                        var link = document.createElement("link");

                        link.href = "https://amp.azure.net/libs/amp/2.1.9/skins/amp-default/azuremediaplayer.min.css";

                        link.rel = "stylesheet";

                        document.getElementsByTagName("head")[0].appendChild(link);

                        

                        var script = document.createElement("script");

                        script.src = "https://amp.azure.net/libs/amp/2.1.9/azuremediaplayer.min.js";

                        script.type = "text/javascript";

                        document.getElementsByTagName("head")[0].appendChild(script);

                        

                    }

                

    </script>


    <body onload="onbodyload()">

        

            <div id="videoContainer">

                

            </div>

    </body>



    On App I faced following error while streaming is going on:

    1.) "Failed to load resourse: the server responded with a status of 404 (Not Found)"   "https://amp.azure.net/libs/amp/2.1.9/azuremediaplayer.min.js.map"

    2.) error: video.js: (code:4194304 undefined) [object Object]


    Pl.let me know in case any further information required, I'll be more happy to providing the same.





    • Edited by Sumit Madan Thursday, October 4, 2018 10:14 AM
    Thursday, October 4, 2018 10:13 AM
  • Sumit,

    Please change the version of AMP you're using to 2.2.1.  I've tried my simple web page without autoplay and the video loads fine on iOS Safari 11.3.1.  You can read more about the new iOS autoplay policies here: https://webkit.org/blog/6784/new-video-policies-for-ios/

    Here's the full source code of my simple webpage:


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Azure Media Player</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="//amp.azure.net/libs/amp/2.2.1/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
        <script src="//amp.azure.net/libs/amp/2.2.1/azuremediaplayer.min.js"></script>

    </head>
    <body>
        <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls width="640" height="400" poster="" data-setup='{}' tabindex="0">
            <source src="//bdpuatmediaaccount-euno.streaming.media.azure.net/b6347cee-f266-4185-9bad-c177d2b8bd1a/4. O Negative_4x3_Texted_v02.ism/manifest" 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>
    </body>
    </html>

    Please note the AMP version change in the code.

    Looks like you're using javascript script to set up the video tag.  That is fine.  But please try to get your webpage working in iOS Safari first without putting it in Cordova.  Once you have it working in Safari, then go ahead and try it in Cordova.

    Friday, October 5, 2018 7:29 PM
  • Sumit,

    Disabling of AMP autoplay for iOS was first broken in 2.1.8.  This issue has been resolved in AMP 2.2.1.  Please start using 2.2.1 and this issue should go away.

    Hope this helps.


    • Edited by Henry MSFT Tuesday, October 9, 2018 10:20 PM
    Tuesday, October 9, 2018 7:38 PM
  • Many Thanks Henry,

    Changing version to 2.2.1 is works for me. Thanks and really appreciated.

    I have one more issue in IOS platform, whenever video is playing it always open in full screen mode even I use "playsinline" option but I think that option not works properly. For you information I used below tag.

    <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" playsinline controls width="640" height="400" poster="" data-setup='{}' tabindex="0">
            <source src="//bdpuatmediaaccount-euno.streaming.media.azure.net/b6347cee-f266-4185-9bad-c177d2b8bd1a/4. O Negative_4x3_Texted_v02.ism/manifest" 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> 

    Wednesday, October 10, 2018 1:18 PM
  • Sumit,

    I'm glad 2.2.1 works for you.

    Regarding not playing the video in fullscreen, it's specific to the default playing mode in Safari, and in your case a combination of the Safari webview and Cordova behavior.  Cordova is a layer on top of Safari's webview, I believe.  If Cordova uses iOS SDK's UIWebView, you need to find a way to set the attribute allowsInlineMediaPlayback to true:

    https://developer.apple.com/documentation/uikit/uiwebview/1617960-allowsinlinemediaplayback

    If Cordova uses WkWebview, you need to set WKWebViewConfiguation allowsInlineMediaPlayback to true:

    https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/1614793-allowsinlinemediaplayback

    You may need to check the Cordova documentation on how to get access to the underlying iOS SDK, or ask the Cordova community for assistance.

    Wednesday, October 10, 2018 11:27 PM
  • Thanks Henry, for the time you spend on this ticket.

    Your Suggestion are really very helpful, Thanks again!!

    Thursday, October 11, 2018 7:15 AM