Abbas Abbas - 5 months ago 19
jQuery Question

html 5 video not pausing on android device using pause() method

I'm having a problem, i'm trying to pause a video when pressing the android native back button, but it doesn't seem to work.

i have this code and it works fine whenever i press a jquery button (including

data-rel=back
)

but when i press the native back button, the page goes back successfully but the video keeps playing in the background.

here's my code which works with jquery buttons:

$(document).on("pagebeforehide", function () {
$("video").each(function(){
$(this).get(0).pause();
});
});


This code above works and pauses videos whenever i change a page, so long as i'm pressing a jquery button.

I've even tried this, but it doesn't work for some reason?

document.addEventListener("backbutton", goback , false);

function goback() {
$("video").each(function(){
$(this).get(0).pause();
});
navigator.app.backHistory();
}


In theory, i shouldn't need to place this code in the
goback()
function because it should be triggered on
pagebeforehide
, i can't understand why it's not doing this? Any reasons why?

Answer

I've managed to solve it by myself, I used this simple code to fix it:

$(document).on("pagebeforehide", function () {
    $("video").each(function(){
    this.load();
    });
});

So before the page hides, it looks for each tag in that page forcing it to stop playing and then reloads back to the beginning.