HTML5视频canPlay事件第二次不工作

Question

我在一些php网站上工作。这些页面是通过ajax加载的。其中一个页面有HTML5视频。在视频可以播放之前，我会在它上面显示一个加载器。一旦它进入canPlay事件，我就删除加载器div。但问题是，当我第一次进入这个页面时，它工作得很好，并进入了canplay函数。但如果我转到下一页并返回，它根本不会进入canplay函数，显示加载的图像没有被删除。

有没有人能帮帮我，告诉我一个解决方案。提前谢谢。

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();
});

致以敬意，

尼哈

Answer 1

我发现了问题所在。视频会被缓存，所以在刷新时，它也会一直缓存在浏览器中。所以我所做的是，我在'video‘标签的src中传递了一个随机值作为参数。因此，现在视频不会被缓存到浏览器中，而是放在canPlay()函数中。

无论如何，谢谢你的回答。

致以敬意，

尼哈

Answer 2

有很多代码丢失了，但我会把你的脚本放在这里

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

还可以考虑使用.hide();而不是.remove();

使用$(window).unload(function(){});方法

Answer 3

添加这个并不会有什么坏处

<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" />