html5读取网页视频时长

来源：互联网发布：用手机网络给电脑上网编辑：程序博客网时间：2024/06/05 10:38

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>

0 0