YouTube video in an iframe continues to play after navigation - Android and Phonegap

Question

The question is similar to YouTube video in an iframe in Webview continues to play after navigation asked on windows 8

I am creating an android app using Phonegap. I was able to show a Youtube video using Childbrowser plugin and with the help Youtube iframe code which is present inside a php file on my server.

However if a user hits the back button, the application screen is displayed and you can hear the sound of the video.

The code to invoke childbrowser is as follows:

    $('#videobutton').attr('onclick', 'javascript:window.plugins.childBrowser.showWebPage("http://example.com/sundeep/video.php?trailer='+trailer+'", { showLocationBar: false });');

I know to close childbrowser you need to place the following code:

window.plugins.childBrowser.onClose();

But I don't know where to place the above code.

Workaround I even tried a workaround by using childbrowser to open a local page(video.html) that contains the iframe code as follows:

    $('#videobutton').attr('onclick', 'javascript:window.plugins.childBrowser.showWebPage("file:///android_asset/www/video.html", { showLocationBar: false });');

and using window.localStorage.setItem I was able to pass and display the video. I have the below code that should theoretically solve the original problem but does not work:

    <script type="text/javascript" charset="utf-8">

// Call onDeviceReady when Cordova is loaded.
//
// At this point, the document has loaded but cordova-2.3.0.js has not.
// When Cordova is loaded and talking with the native device,
// it will call the event `deviceready`.
//
function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}

// Cordova is loaded and it is now safe to call Cordova methods
//
function onDeviceReady() {
    // Register the event listener
    document.addEventListener("backbutton", onBackKeyDown, false);
}

// Handle the back button
//
function onBackKeyDown() {

    window.plugins.childBrowser.onClose();
}

</script>

• Apache Cordova (Phonegap) - 2.3.0 Jquery Mobile - 1.2 Android - Jelly bean (4.2)

Any help is appreciated!! Really stuck on this one.

Answer 1

I also had the same problem. The workaround that I used is to override onBackPressed() and load "about:blank" in the same webview which was playing the video. Works perfectly for me! Just try it out. Good luck :-)

-Yogesh