javascript - 带有自定义控件的 HTML 5 视频 : show duration before playing

Question

我正在构建一个自定义控件 HTML5 视频播放器。可以看到HERE 。 我遇到的问题是无法在播放之前显示视频的持续时间。

HTML:

<div class="video-container">
    <video poster="img/flamenco.jpg">
        <source src="flamenco.mp4" type="video/mp4" />
        <source src="flamenco.ogg" type="video/ogg" />
    </video>
    <div class="controls-wrapper">
        <div class="progress-bar">
            <div class="progress"></div>
        </div>
        <ul class="video-controls">
            <li><input type="button" name="play-pause" value="Play" class="play"></li>
            <li><input type="button" name="prev" value="Previous video" class="previous"></li>
            <li><input type="button" name="next" value="Next video" class="next"></li>
            <li class="mute-toggle unmuted"><input type="checkbox" name="mute" value="Mute"></li>
            <li class="volume-container"><input class="volume-slider" type="range" value="1" max="1" step="0.01"></li>
            <li class="show-time disable-select"><span class="current-time">00:00</span><span>/</span><span class="duration"></span></li>
            <li class="fullscreen-container"><input type="button" name="toggle-fullscreen" value="Fullscreen" class="fullscreen"></li>
        </ul>
    </div>
</div>

JavaScript:

var currentTimeDuration = function(){
    var currTimeStr = Math.round(video.currentTime).toString();
    var durationStr = Math.round(video.duration).toString();
    $('.current-time').text(currTimeStr.timeFormat());
    $('.duration').text(durationStr.timeFormat());
}

$(video).on('timeupdate', function(){
    currentTimeDuration();
});

上述功能的问题在于，它仅在视频开始后显示当前时间和时长。我希望它会在页面加载时显示类似 00:00/02:22 的内容。

有什么提示吗？谢谢!

Answer 1

video.duration 在“loadedmetadata”事件后正确。尝试添加元数据加载处理程序:

$(video).on('loadedmetadata', function(){
    currentTimeDuration();
});