CODEWITHSUNDEEP
androidjquerycordovavideo
Mick Byrne
Mick Byrne

Reputation: 14484

Phonegap can't pause <video> when backing out of view (on Android)

I've inherited a Phonegap app on Android, also using jquery mobile, from a couple of years ago and I've got a problem with trying to stop videos playing when backing out of pages.

The videos I'm playing are hosted externally, so the HTML is really simple like:

<p>
  <video width="100%" controls><source src="http://website.com/video.mp4" type="video/mp4">Your browser does not support the video tag.</video>
</p>

I've been trying to just call the pause() method on the video's DOM element when the page is getting hidden. I've got this code listening for the pagebeforehide event. This code is definitely getting called, but doesn't work:

$(document).bind( "pagebeforehide", function( e, data ) {
    var videos = $('.ui-page-active').find('video');
    if(videos.length > 0)
    {
        videos.each(function() {
            alert('about to stop video : ' + $(this).html());
            this.pause();
            alert('should be stopped.');
        });
    }
});

Any help would be appreciated.

EDIT

Weirdly, if I add a link directly in the HTML to pause the video, it works. Once I've paused the video with javascript in the page, the code to pause the video as the page hides starts working!?

Upvotes: 0

Views: 204

Answers (1)

Varsha Vijayvargiya
Varsha Vijayvargiya

Reputation: 771

 var myVideo = document.getElementById("video1"); 

 function playPause() 
{ 
if (myVideo.paused) 
    myVideo.play(); 
else 
    myVideo.pause(); 
} 

function makeBig()
{ 
 myVideo.width = 560; 
} 

function makeSmall() 
{ 
 myVideo.width = 320; 
} 


 function makeNormal() 
{ 
  myVideo.width = 420; 
} 




<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>

Upvotes: 1

Related Questions