HTML5视频canPlay事件第二次无法正常工作

I am working on some site in php. The pages are loaded through ajax. One of the pages has HTML5 video. Before the video can play I show a loader on top of it. Once it goes in the canPlay event I remove the loader div. But the problem is, when I come on this page for the first time it works fine and goes into the canplay function. But if I go to the next page and come back it doesn't go into the canplay function at all show the loading image does not get removed.

Can anyone please help me and tell me a solution for this. Thanks in advance.

var videoObj = document.getElementById('video');
jQuery('.moduleBody').append('<div class="videoLoader" id="videoLoadingDiv"><img src="images/loader.gif" /></div>');
jQuery(videoObj).on('canplay', function(){
    jQuery('#videoLoadingDiv').remove();
});

Regards,

Neha

There is a lot of code missing but I would put your script in side this

$( document ).ready(function() {
    console.log( "ready!" );
});

also consider using .hide(); rather than .remove();

The use the Use the $(window).unload(function(){}); method

I found out what the issue was. The video was getting cached so on refresh also it used to remain cached in the browser. So what I have done is, I am passing a random value as a parameter in the src of the 'video' tag. So now the video does not get cached in the browser and it goes inside the canPlay() function.

Anyways thanks for your answers.

Regards,

Neha

Could not hurt to add this then

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />