I am having issues with video support in Chrome. My web page must run in Chrome and I am using the following code to check periodically if the web page has to play a video or not… but the problem is that after I remove the element, I still hear the audio and when I recreate the eleemnt, the audio of the new video and the old overlaps.
function showVideo() {
var video = videodata;
var videobox = $('#videobox').first();
var videoplayer = $('#videoplayer').first();
if (video.Enabled) {
if ((videoplayer.length > 0 && videoplayer[0].currentSrc != video.Location) || videoplayer.length == 0) {
videobox.empty();
videobox.append('<video id="videoplayer" preload="auto" src="' + video.Location + '" width="100%" height="100%" autoplay="autoplay" loop="loop" />');
videobox.show();
}
} else {
videobox.hide();
videobox.empty(); // Clear any children.
}
}
How can I solve?
Thank you.
Best Answer
The following was the minimum I had to go to get this to work. I was actually experiencing a stall due to the buffering while spawning ajax requests when the user pressed the back button. Pausing the video in Chrome and the Android browser kept it buffering. The non-async ajax request would get stuck waiting for the buffering to finish, which it never would.
Binding this to the beforepagehide event fixed it.
This will clear every video tag on the page.