20

我正在尝试在不播放视频的情况下或在播放视频之前在 HTML5 中获取视频持续时间以显示在视频拇指上，正如您在您的管或任何其他视频网站上看到的那样。

任何帮助将不胜感激。

提前致谢。

4

4 回答 4

29

对于 HTML5，一旦加载了文件的元数据，您应该能够使用视频标签的持续时间属性。请参阅此答案以了解如何做到这一点：

与文件分开检索 HTML5 视频时长

引用 Mikushi 的回答：

myVideoPlayer.addEventListener('loadedmetadata', function() {
    console.log(videoPlayer.duration);
});

通过侦听“loadedmetadata”事件，您将确保已加载持续时间值。

可以在此处找到有关已加载元数据的更多详细信息：http: //www.w3schools.com/tags/av_event_loadedmetadata.asp

编辑

根据@lucas-vasques 的评论，loadmetadata您可以使用durationchangeMDN媒体事件列表描述为 ...

元数据已加载或更改，表明媒体的持续时间发生了变化。例如，当媒体已加载到足以知道持续时间时，就会发送此消息。

于 2013-10-25T14:09:53.260 回答
3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function getDuration() {
            var s = document.getElementById('a');
            alert(s.duration)
        }
    </script>
</head>
<body>
<div>
    <video src="2.mp4" id="a" controls="controls"></video>
    <button onclick="getDuration()">get duration</button>
</div>
</body>

</html>
于 2013-10-25T14:10:30.153 回答
0

视频元素上触发了一个特殊事件，称为“loadedmetadata”。一旦触发了这个，诸如持续时间之类的属性就可以在视频元素上使用。

以下是所有 HTML5 视频事件的详尽列表：http: //www.w3.org/2010/05/video/mediaevents.html

于 2013-10-25T14:11:39.973 回答
0 
// Assume "video" is the video node
var i = setInterval(function() {
    if(video.readyState > 0) {
        var minutes = parseInt(video.duration / 60, 10);
        var seconds = video.duration % 60;

        // (Put the minutes and seconds in the display)

        clearInterval(i);
    }
}, 200);
于 2017-10-02T17:41:14.813 回答