我正在构建具有自定义界面的HTML5视频播放器,但是在显示视频时长信息时遇到一些问题。
我的HTML很简单:
<video id="video" poster="image.jpg" controls> <source src="video_path.mp4" type="video/mp4" /> <source src="video_path.ogv" type="video/ogg" /> </video> <ul class="controls"> <li class="time"><p><span id="timer">0</span> of <span id="duration">0</span></p></li> </ul>
我用来获取和插入持续时间的javascript是
var duration = $('#duration').get(0); var vid_duration = Math.round(video.duration); duration.firstChild.nodeValue = vid_duration;
问题是什么也没有发生。我知道视频文件包含持续时间数据,因为如果我仅使用默认控件,则显示正常。
但是真正奇怪的是,如果我像这样在我的代码中放置alert(duration)
alert(duration); var vid_duration = Math.round(video.duration); duration.firstChild.nodeValue = vid_duration;
那么它就可以正常工作(减去弹出的烦人警报)。任何想法在这里发生了什么或我如何解决?
更新:好的,虽然我还没有完全解决这个问题,但是我确实找到了解决我最大问题的解决方法……用户体验。
首先,只有在观众按下播放按钮后,视频才开始加载,因此我假设无法获取持续时间信息(我不知道如何解决此特定问题……尽管我认为这将涉及仅将视频元数据与视频分开加载,但我什至不知道是否可行)。
因此,为了避免没有持续时间数据的事实,我决定完全隐藏持续时间信息(实际上是整个控件),直到您点击播放。
就是说,如果有人知道如何将视频元数据与视频文件分开加载,请共享。我认为应该完全解决这个问题。
问题出在WebKit浏览器中。视频元数据在视频之后加载,因此当JS运行时不可用。您需要查询readyState属性;它具有从0到4的一系列值,让您知道视频处于什么状态;加载元数据后,您将获得1的值。
因此,您需要执行以下操作:
window.setInterval(function(t){ if (video.readyState > 0) { var duration = $('#duration').get(0); var vid_duration = Math.round(video.duration); duration.firstChild.nodeValue = vid_duration; clearInterval(t); } },500);
我没有测试过该代码,但是它(或类似的东西)应该可以工作。