html 获取视频时长_获取HTML5视频时长

红太狼 2023-02-22 03:41 2阅读 0赞

html 获取视频时长

HTML5 video is exciting, if only for the reason that we no longer need Flash or other third party plugins to render media.  We can also create custom controls and displays around the video, and one of those displays should be the duration of the video.  Let me show you how to get and display the video duration!

HTML5视频令人兴奋，即使仅仅是因为我们不再需要Flash或其他第三方插件来呈现媒体。 我们还可以在视频周围创建自定义控件和显示，这些显示之一应该是视频的持续时间。 让我告诉您如何获取和显示视频时长！

## JavaScript **(**The JavaScript**)** ##

`video` elements have a `duration` property which represents the number of seconds in the video.  To display the duration in a pretty fashion, you'll need to use `parseInt` and modulus (`%`):

`video`元素具有`duration`属性，该属性表示视频中的秒数。 要以一种漂亮的方式显示持续时间，您需要使用`parseInt`和模数( `%` )：

// 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);

It's important to use `setInterval` and check the video's `readyState` in case the video hasn't loaded by the time you attempt to pull the duration.  `parseInt` is used to get the minute number and modulus is used to get the second count.

重要的是使用`setInterval`并检查视频的`readyState` ，以防在您尝试拉长持续时间之前尚未加载视频。 `parseInt`用于获取分钟数，而模数用于获取第二个计数。

> 翻译自: [https://davidwalsh.name/html5-video-duration][https_davidwalsh.name_html5-video-duration]

html 获取视频时长

[https_davidwalsh.name_html5-video-duration]: https://davidwalsh.name/html5-video-duration