如何在 html5 视频播放器中获取视频的持续时间..？

Posted 2023-03-07

【中文标题】如何在 html5 视频播放器中获取视频的持续时间..？

【英文标题】：How to get time duration of video in html5 video player..?

【发布时间】：2015-07-10 09:03:12

【问题描述】：

您好，我正在使用 html5 视频播放器，我想获取播放列表数组中每个视频的持续时间。 下面是我正在使用的代码，但它在控制台中显示了 NaN。 请帮帮我...谢谢大家。

        $.each(self._playlist.videos_array, function(key ) 
        if(1) 
            self.dummy_video = $("<video />");  
            console.log(self._playlist.videos_array[key].Levels[0].mp4);
            self.dummy_video.attr('src', self._playlist.videos_array[key].Levels[0].mp4);
            //self.dummy_video.load();
            //self.dummy_video[0].play();
             //self.dummy_video[0].pause();         
             var video = self.dummy_video.get(0);
             console.log(video.duration);               
                   
      );   

【参考方案1】：

有两种方法可以解决这个问题：

使用 setInterval：Problem retrieving HTML5 video duration

使用事件：current/duration time of html5 video?

【参考方案2】：

来自W3C#mediaevents：

事件loadedmetadata的描述：

用户代理刚刚确定了媒体资源的持续时间和尺寸，并且文本轨道已准备就绪。

您可以收听该事件，在此之前，视频的持续时间为NaN。

下面的演示：

$(function() 
    var video = $("<video>");
    video[0].addEventListener("loadedmetadata", function() 
      // Here you will get a valid duration now.
      console.log("Video duration now: " + video[0].duration);
    );
    video.attr("controls", "controls").attr("src", "https://avvimeo-a.akamaihd.net/68093/485/101309641.mp4?token2=1436525964_a8966f84e4a514fdb7a406a9ee6f1e30&amp;aksessionid=6475e4121b60d4cf");
    video.appendTo($("#playblock"));

    // Here's the position of your console.log, it'll put NaN here.
    console.log("Video duration now: " + video[0].duration);
     
     
  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="playblock"></div>