我一直在尝试使用
HTML5和
Jquery创建自定义媒体播放器.
我遵循不同的方法,并根据我刷新页面的方式遇到了一些麻烦.
第一个案例
$(document).ready(function(){
duration = Math.ceil($('audio')[0].duration);
$('#duration').html(duration);
});
在这种情况下,当我通过按地址栏中的ENTER键将页面重定向到同一URL时,持续时间返回NaN.但是,当我使用重新加载按钮或按F5按钮刷新时,它完全正常.
第二个案例
我在一些答案中读到了在loadedMetadataevent之后加载持续时间可能会有所帮助.所以我尝试了以下内容：
$(document).ready(function(){
$('audio').on('loadedMetadata',function(){
duration = Math.ceil($('audio')[0].duration);
$('#duration').html(duration);
});
});
令人惊讶的是,在这种情况下,发生了第一种情况的反转.在重定向的情况下,持续时间显示完全正常,即在地址栏中按ENTER.但是,在使用F5按钮或重新加载按钮刷新的情况下,持续时间根本不会显示,甚至NaN也不会导致我认为代码根本没有被执行.
进一步阅读建议这可能是webkit浏览器中的一个错误,但我找不到任何结论性或有用的东西.
这种奇特行为背后的原因是什么？
如果你能解释一下这个问题,那就太棒了.
编辑：
我主要是在寻找这种行为差异背后的解释.我想了解在重定向和刷新的情况下渲染页面背后的机制.
解决方法
听起来问题是事件处理程序设置得太晚,即音频文件在文档准备就绪之前加载了元数据.
尝试通过删除$(document).ready调用尽快设置事件处理程序：
$('audio').on('loadedMetadata',function(){
duration = Math.ceil($('audio')[0].duration);
$('#duration').html(duration);
});
请注意,这需要< script>标签在< audio>之后文档中的标记.
或者,您可以稍微调整一下您的逻辑,以便更新持续时间的代码始终运行(但如果它获得NaN则优雅地失败)：
function updateDuration() {
var duration = Math.ceil($('audio')[0].duration);
if (duration)
$('#duration').html(duration);
}
$(document).ready(function(){
$('audio').on('loadedMetadata',updateDuration);
updateDuration();
});