js获取视频总长

在JavaScript中获取视频的总时长，通常是通过HTML5的<video>元素结合JavaScript来实现的。以下是基础概念及相关操作：

基础概念

HTML5 Video Element: <video>元素是HTML5中用于嵌入视频的标签。
Duration Property: videoElement.duration属性返回视频的总时长，单位为秒。

获取视频总长的步骤

创建Video元素：首先，需要在HTML中创建一个<video>元素，并设置其src属性为视频文件的URL。
等待元数据加载：视频的元数据（包括时长）需要加载完成后才能获取。可以通过监听loadedmetadata事件来确保元数据已加载。
获取时长：在loadedmetadata事件的回调函数中，通过videoElement.duration属性获取视频的总时长。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Get Video Duration</title>
</head>
<body>
    <video id="myVideo" width="320" height="240" controls>
        <source src="your-video-file.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <p id="duration"></p>

    <script>
        const video = document.getElementById('myVideo');
        const durationDisplay = document.getElementById('duration');

        video.addEventListener('loadedmetadata', () => {
            const duration = video.duration;
            durationDisplay.textContent = `Video duration: ${duration} seconds`;
        });
    </script>
</body>
</html>