Html 不播放视频的 HTML5 视频时长
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19592009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Video duration without playing video
提问by Sajal
I am trying to get video duration in HTML5 with out playing video or before playing video to show on video thumb as you seen on you tube or any other video sites.
我试图在不播放视频的情况下获得 HTML5 中的视频持续时间,或者在播放视频之前在视频拇指上显示您在 YouTube 或任何其他视频网站上看到的内容。
Any help will be really appreciate.
任何帮助将不胜感激。
Thanks in Advance.
提前致谢。
回答by ToddBFisher
For HTML5 you should be able to use the video tag's duration property, once the file's metadata is loaded. See this answer for a good way to do it:
对于 HTML5,一旦加载了文件的元数据,您应该能够使用视频标签的持续时间属性。请参阅此答案以了解执行此操作的好方法:
Problem retrieving HTML5 video duration
To quote the anwser by Mikushi:
引用 Mikushi 的回答:
myVideoPlayer.addEventListener('loadedmetadata', function() {
console.log(videoPlayer.duration);
});
By listening for the 'loadedmetadata' event you will ensure the duration value has been loaded.
通过侦听 'loadedmetadata' 事件,您将确保已加载持续时间值。
More details on the loadedmetadata can be found here: http://www.w3schools.com/tags/av_event_loadedmetadata.asp
可以在此处找到有关加载元数据的更多详细信息:http: //www.w3schools.com/tags/av_event_loadedmetadata.asp
回答by Vicky Gonsalves
<!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>
回答by steven_ght
There is a special event triggered on video elements called "loadedmetadata". Once this one is triggered, properties such as duration are available on the video element.
在视频元素上触发了一个特殊事件,称为“loadedmetadata”。一旦触发了这个,视频元素上的诸如持续时间之类的属性就可用了。
Here's an exhaustive list of all HTML5 video events : http://www.w3.org/2010/05/video/mediaevents.html
这是所有 HTML5 视频事件的详尽列表:http: //www.w3.org/2010/05/video/mediaevents.html
回答by Mwkthang Brahma
// 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);