locked
Win 8 App crashes when the youtube video is playing and tries to navigate from the page using HTM5/JS

    Question

  • Hi,

    I am trying to play a youtube video in windows 8 app using HTML5/JS. I have embedded the video using the below tag and it loads and plays fine. But, when the video is playing, if I click on backbutton in the header page, application crashes and throws 'Nan' is undefined error as mentioned below.

    Here is the embed tag I have used:

    <iframe width="560" height="315" src="http://www.youtube.com/embed/YpjReEqcR9U" frameborder="0" allowfullscreen></iframe>
    

    Steps:

    1. Create a new Grid App using windows store-->JavaScript language.

    2. Open ItemDetail.html page and add the above iframe to the content section.

    3. Run the app and tap on any of the item to navigate to the itemdetails page.

    4. Play the youtube video and click on back button in the header to navigate to Home page.

     

    Error: 

    Unhandled exception at line 667, column 194 inhttp://s.ytimg.com/yts/jsbin/html5player-vflTmL8df.js
    0x800a1391 - JavaScript runtime error: 'NaN' is undefined

    
    
    

    Monday, April 08, 2013 12:31 AM

Answers

  • I met this problem too. After several hours I found the workaround.

    In navigator.js file change _updateBackButton function:

                        var backButton = this.pageElement.querySelector("header[role=banner] .win-backbutton");
                        var pageElement = this.pageElement;
                        if (backButton) {
                            backButton.onclick = function () {
                                var iframe = pageElement.querySelector("iframe");
                                if (iframe) {
                                    iframe.src = "";
                                }
                                nav.back();
                            };
    
                            if (nav.canGoBack) {
                                backButton.removeAttribute("disabled");
                            } else {
                                backButton.setAttribute("disabled", "disabled");
                            }
                        }

    it is work for me.

    • Marked as answer by SurfaceRocks Tuesday, May 07, 2013 6:58 AM
    Monday, May 06, 2013 11:41 AM

All replies

  • Hi,

    This is a problem with a 3rd party script.  Something is undefining this variable.  You would need to debug this script and other scripts loaded by your navigation and see how this is happening.

    Fiddler is a great tool to capture and see what scripts are coming down (ensure you clear the cache first).  http://fiddler2.com

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, April 10, 2013 1:36 PM
    Moderator
  • Thanks Jeff ! I didn't add any scripts/3rd party scripts to my project. I have just embedded a Youtube video using <Iframe> which was provided by youtube.

    As suggested, will check out using fiddler If I can debug anything and update here..

    Thursday, April 11, 2013 6:49 AM
  • I checked out using fiddler and its failing with Youtube api . But, I haven't loaded any scripts other than just youtube embed tag in my html file. Not sure what is the problem here. :(

    HTTP/1.1 404 Not Found

    Date: Fri, 12 Apr 2013 02:59:09 GMT

    Server: Apache

    Expires: Tue, 27 Apr 1971 19:44:06 EST

    X-Content-Type-Options: nosniff

    X-Frame-Options: SAMEORIGIN

    Cache-Control: no-cache

    Content-Length: 0

    Content-Type: video/x-flv

    Friday, April 12, 2013 5:00 AM
  • I met this problem too. After several hours I found the workaround.

    In navigator.js file change _updateBackButton function:

                        var backButton = this.pageElement.querySelector("header[role=banner] .win-backbutton");
                        var pageElement = this.pageElement;
                        if (backButton) {
                            backButton.onclick = function () {
                                var iframe = pageElement.querySelector("iframe");
                                if (iframe) {
                                    iframe.src = "";
                                }
                                nav.back();
                            };
    
                            if (nav.canGoBack) {
                                backButton.removeAttribute("disabled");
                            } else {
                                backButton.setAttribute("disabled", "disabled");
                            }
                        }

    it is work for me.

    • Marked as answer by SurfaceRocks Tuesday, May 07, 2013 6:58 AM
    Monday, May 06, 2013 11:41 AM
  • Thanks a lot Ivan...This worked like charm ! This is really very useful ....
    Tuesday, May 07, 2013 6:59 AM