在不播放视频的情况下获取HTML5视频总时长显示,可以通过以下步骤实现:
<video>
标签或JavaScript中的getElementById()
方法获取视频元素。loadedmetadata
事件监听器,以便在视频的元数据加载完成后执行相应的操作。loadedmetadata
事件回调函数中,通过视频元素的duration
属性获取视频的总时长。以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取HTML5视频总时长</title>
</head>
<body>
<video id="myVideo" src="video.mp4"></video>
<script>
var video = document.getElementById('myVideo');
video.addEventListener('loadedmetadata', function() {
var totalDuration = video.duration; // 获取视频总时长
console.log('视频总时长:', totalDuration);
// 在此可以将总时长显示在页面的某个元素上或进行其他处理
});
</script>
</body>
</html>
在上述代码中,<video>
标签指定了一个视频源文件(video.mp4
),JavaScript部分通过getElementById()
方法获取了视频元素,并为其添加了loadedmetadata
事件监听器。当视频元数据加载完成后,事件回调函数将获取视频的总时长,并可根据需求进行显示或其他操作。
推荐的腾讯云相关产品:如果在实际开发中需要视频处理和存储的功能,可以使用腾讯云的云点播服务(https://cloud.tencent.com/product/vod),该服务提供了全面的视频上传、转码、播放、管理等解决方案。
领取专属 10元无门槛券
手把手带您无忧上云