html5读取网页视频时长

最新推荐文章于 2024-12-09 10:45:00 发布

原创最新推荐文章于 2024-12-09 10:45:00 发布 · 1.9w 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 video 时长

收录于

JavaWeb项目开发专栏收录该内容

36 篇文章

订阅专栏

本文介绍了如何使用HTML5的video元素结合JavaScript或jQuery获取视频的时长。当视频元数据加载完成并且可以流畅播放时，通过监听oncanplaythrough事件来获取时长，并展示了具体的JS和jQuery代码示例。

1、html5 <video>元素的属性中包括了时长（duration）属性。单位为秒。只支持mp4、ogv格式。

http://www.w3school.com.cn/html5/html_5_video_dom.asp

在视频的元数据已加载后，时长属性才可用。

2、视频加载事件处理

当视频可以正常播放且无需停顿时执行，oncanplaythrough 事件。

http://www.ziqiangxuetang.com/jsref/event-oncanplaythrough.html

3、js代码示例

<html>
<body>
<video id="aa" controls oncanplaythrough="myFunction()">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 元素。
</source></source></video>

var a=document.getElementById("aa");
function myFunction() {

document.getElementById("demo").innerHTML="视频时长："+a.duration+"秒";

}
</script>
</body>
</html>

4、jQuery代码

<video id="videoplay" oncanplaythrough="myFunction()" src="" controls>
</video><br>
<p id="demo">111</p>
<script>
function myFunction() {
var a=$("#videoplay").attr("duration");
$("#demo").text("视频时长："+a+"秒");
}
</script>