点击指定Div获取视频当前播放时间并显示至另一Div的实现问题

看起来你是想把「点击指定Div时获取视频当前播放时间」这个操作单独触发，而不是实时更新对吧？我帮你调整了代码逻辑，完美适配你的需求：

完整代码示例 #

HTML结构 #

<!-- 你的视频元素 -->
<video id="video-preview" src="你的视频地址.mp4" controls></video>

<!-- 用来触发获取时间的点击Div -->
<div id="trigger-time" style="cursor: pointer; padding: 8px; background: #eee;">点击我获取当前播放时间</div>

<!-- 显示时间的目标Div -->
<div>当前播放时间：<span id="current-time"></span></div>
<div>视频总时长：<span id="total-duration"></span></div>

JavaScript（jQuery）代码 #

$(document).ready(function(){
    // 先获取视频总时长（等视频元数据加载完成后）
    $("#video-preview").on("loadedmetadata", function(){
        // 转为保留两位小数的数字格式，避免显示冗长的浮点数
        $("#total-duration").text(this.duration.toFixed(2));
    });

    // 给目标Div绑定点击事件
    $("#trigger-time").on("click", function(){
        const video = $("#video-preview")[0];
        // 先判断视频是否已加载到可获取时间的状态
        if(video.readyState >= 2){
            const currentTime = video.currentTime.toFixed(2);
            $("#current-time").text(currentTime);
        } else {
            $("#current-time").text("视频还没加载好哦");
        }
    });
});

关键细节说明 #

• 我添加了loadedmetadata事件，解决了页面刚加载时总时长显示NaN的问题，等视频元数据加载完成后再显示总时长。
• 点击事件里加了readyState判断，防止视频还没加载就点击导致的报错。
• 用toFixed(2)把时间转为带两位小数的数字格式，比直接显示原始浮点数更美观易读。
• 如果你不需要显示总时长，直接删掉loadedmetadata相关的代码就行，只保留点击获取当前时间的逻辑。

内容的提问来源于stack exchange，提问作者730wavy