html video timeupdate监听用户观看视频时长

HTML视频时长监听实现
原创 于 2025-09-05 10:08:45 发布 · 231 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #音视频 #css

html video timeupdate监听用户观看视频时长

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频观看时长监控系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            color: #333;
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .container {
            width: 100%;
            max-width: 1000px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            margin-top: 30px;
        }
        
        header {
            background: linear-gradient(to right, #4a69bd, #6a89cc);
            color: white;
            padding: 25px;
            text-align: center;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .video-container {
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .video-wrapper {
            width: 100%;
            max-width: 800px;
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        video {
            width: 100%;
            display: block;
            background: #000;
        }
        
        .controls {
            display: flex;
            justify-content: space-between;
            width: 100%;
            max-width: 800px;
            margin-top: 20px;
            gap: 15px;
        }
        
        .control-btn {
            flex: 1;
            background: #4a69bd;
            color: white;
            border: none;
            padding: 12px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .control-btn:hover {
            background: #3d56a0;
            transform: translateY(-2px);
        }
        
        .control-btn:active {
            transform: translateY(0);
        }
        
        .stats-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 30px;
            width: 100%;
            max-width: 800px;
        }
        
        .stat-card {
            flex: 1;
            min-width: 200px;
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .stat-title {
            color: #4a69bd;
            font-size: 1.1rem;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: #333;
        }
        
        .progress-container {
            width: 100%;
            max-width: 800px;
            margin-top: 20px;
        }
        
        .progress-title {
            margin-bottom: 10px;
            font-weight: 600;
            color: #4a69bd;
        }
        
        .progress-bar {
            height: 12px;
            background: #e9ecef;
            border-radius: 6px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(to right, #4a69bd, #6a89cc);
            border-radius: 6px;
            transition: width 0.5s ease;
        }
        
        .time-display {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            font-size: 0.9rem;
            color: #6c757d;
        }
        
        .events-container {
            width: 100%;
            max-width: 800px;
            margin-top: 30px;
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .events-title {
            color: #4a69bd;
            font-size: 1.2rem;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .events-list {
            max-height: 200px;
            overflow-y: auto;
        }
        
        .event-item {
            padding: 10px;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            justify-content: space-between;
        }
        
        .event-time {
            font-weight: 600;
            color: #4a69bd;
        }
        
        .event-desc {
            color: #495057;
        }
        
        .explanation {
            width: 100%;
            max-width: 800px;
            margin-top: 30px;
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .explanation-title {
            color: #4a69bd;
            font-size: 1.2rem;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .code-block {
            background: #2d2d2d;
            color: #f8f8f2;
            border-radius: 8px;
            padding: 20px;
            margin-top: 15px;
            font-family: 'Courier New', monospace;
            font-size: 0.95rem;
            overflow-x: auto;
        }
        
        .comment {
            color: #75715e;
        }
        
        .footer {
            text-align: center;
            padding: 30px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 1rem;
            margin-top: 20px;
        }
        
        @media (max-width: 768px) {
            .controls {
                flex-direction: column;
            }
            
            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>视频观看时长监控系统</h1>
            <p class="subtitle">使用timeupdate事件精确跟踪用户观看行为</p>
        </header>
        
        <div class="video-container">
            <div class="video-wrapper">
                <video id="videoPlayer" controls>
                    <source src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
                    您的浏览器不支持HTML5视频播放
                </video>
            </div>
            
            <div class="controls">
                <button class="control-btn" id="playBtn">播放</button>
                <button class="control-btn" id="pauseBtn">暂停</button>
                <button class="control-btn" id="resetBtn">重置</button>
            </div>
            
            <div class="stats-container">
                <div class="stat-card">
                    <div class="stat-title">当前播放时间</div>
                    <div class="stat-value" id="currentTime">0:00</div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-title">视频总时长</div>
                    <div class="stat-value" id="duration">0:00</div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-title">观看百分比</div>
                    <div class="stat-value" id="percentWatched">0%</div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-title">实际观看时长</div>
                    <div class="stat-value" id="timeWatched">0秒</div>
                </div>
            </div>
            
            <div class="progress-container">
                <div class="progress-title">播放进度</div>
                <div class="progress-bar">
                    <div class="progress-fill" id="playProgress" style="width: 0%"></div>
                </div>
                <div class="time-display">
                    <span id="currentTimeLabel">0:00</span>
                    <span id="durationLabel">0:00</span>
                </div>
            </div>
            
            <div class="progress-container">
                <div class="progress-title">观看进度（实际观看时长）</div>
                <div class="progress-bar">
                    <div class="progress-fill" id="watchProgress" style="width: 0%"></div>
                </div>
                <div class="time-display">
                    <span>0秒</span>
                    <span id="totalDurationLabel">0秒</span>
                </div>
            </div>
            
            <div class="events-container">
                <div class="events-title">观看事件记录</div>
                <div class="events-list" id="eventsList">
                    <div class="event-item">
                        <span class="event-time">0:00</span>
                        <span class="event-desc">视频已加载</span>
                    </div>
                </div>
            </div>
            
            <div class="explanation">
                <div class="explanation-title">技术实现说明</div>
                <p>本系统使用HTML5 video元素的timeupdate事件来监控用户观看行为：</p>
                
                <div class="code-block">
                    <span class="comment">// 获取video元素</span><br>
                    <span style="color: #f92672;">const</span> video = <span style="color: #a6e22e;">document</span>.<span style="color: #a6e22e;">getElementById</span>(<span style="color: #e6db74;">'videoPlayer'</span>);<br><br>
                    
                    <span class="comment">// 添加timeupdate事件监听</span><br>
                    video.<span style="color: #a6e22e;">addEventListener</span>(<span style="color: #e6db74;">'timeupdate'</span>, <span style="color: #f92672;">function</span>() {<br>
                    &nbsp;&nbsp;<span class="comment">// 获取当前播放时间</span><br>
                    &nbsp;&nbsp;<span style="color: #f92672;">const</span> currentTime = video.<span style="color: #a6e22e;">currentTime</span>;<br>
                    &nbsp;&nbsp;<span style="color: #f92672;">const</span> duration = video.<span style="color: #a6e22e;">duration</span>;<br><br>
                    
                    &nbsp;&nbsp;<span class="comment">// 计算观看百分比</span><br>
                    &nbsp;&nbsp;<span style="color: #f92672;">const</span> percent = (currentTime / duration * 100).<span style="color: #a6e22e;">toFixed</span>(1);<br><br>
                    
                    &nbsp;&nbsp;<span class="comment">// 更新UI显示</span><br>
                    &nbsp;&nbsp;<span style="color: #a6e22e;">updateProgress</span>(currentTime, duration, percent);<br>
                    &nbsp;&nbsp;<span style="color: #a6e22e;">trackActualWatching</span>(currentTime);<br>
                    });
                </div>
                
                <p>timeupdate事件在视频播放位置发生变化时触发，通常每秒触发4-66次（取决于系统负载和浏览器实现）。</p>
            </div>
        </div>
    </div>
    
    <div class="footer">
        <p>视频观看时长监控系统 &copy; 2023 | HTML5视频技术演示</p>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const video = document.getElementById('videoPlayer');
            const playBtn = document.getElementById('playBtn');
            const pauseBtn = document.getElementById('pauseBtn');
            const resetBtn = document.getElementById('resetBtn');
            const currentTimeEl = document.getElementById('currentTime');
            const durationEl = document.getElementById('duration');
            const percentWatchedEl = document.getElementById('percentWatched');
            const timeWatchedEl = document.getElementById('timeWatched');
            const playProgress = document.getElementById('playProgress');
            const watchProgress = document.getElementById('watchProgress');
            const currentTimeLabel = document.getElementById('currentTimeLabel');
            const durationLabel = document.getElementById('durationLabel');
            const totalDurationLabel = document.getElementById('totalDurationLabel');
            const eventsList = document.getElementById('eventsList');
            
            // 状态变量
            let actualWatchTime = 0;
            let lastUpdateTime = 0;
            let isPlaying = false;
            let totalDuration = 0;
            
            // 格式化时间为 MM:SS
            function formatTime(seconds) {
                const mins = Math.floor(seconds / 60);
                const secs = Math.floor(seconds % 60);
                return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
            }
            
            // 添加事件记录
            function addEvent(time, description) {
                const eventItem = document.createElement('div');
                eventItem.className = 'event-item';
                eventItem.innerHTML = `
                    <span class="event-time">${formatTime(time)}</span>
                    <span class="event-desc">${description}</span>
                `;
                eventsList.appendChild(eventItem);
                eventsList.scrollTop = eventsList.scrollHeight;
            }
            
            // 更新播放进度
            function updatePlayProgress(currentTime, duration) {
                const percent = (currentTime / duration * 100).toFixed(1);
                playProgress.style.width = `${percent}%`;
                currentTimeLabel.textContent = formatTime(currentTime);
                
                if (duration) {
                    durationLabel.textContent = formatTime(duration);
                }
            }
            
            // 更新观看进度
            function updateWatchProgress() {
                const percent = (actualWatchTime / totalDuration * 100).toFixed(1);
                watchProgress.style.width = `${percent}%`;
                timeWatchedEl.textContent = `${actualWatchTime.toFixed(1)}秒`;
            }
            
            // 初始化视频
            video.addEventListener('loadedmetadata', function() {
                durationEl.textContent = formatTime(video.duration);
                totalDuration = video.duration;
                totalDurationLabel.textContent = `${totalDuration.toFixed(1)}秒`;
                addEvent(0, '视频已加载');
            });
            
            // timeupdate事件处理
            video.addEventListener('timeupdate', function() {
                const currentTime = video.currentTime;
                const duration = video.duration;
                
                // 更新播放时间显示
                currentTimeEl.textContent = formatTime(currentTime);
                
                // 更新播放进度
                updatePlayProgress(currentTime, duration);
                
                // 计算观看百分比
                const percent = duration ? (currentTime / duration * 100).toFixed(1) : 0;
                percentWatchedEl.textContent = `${percent}%`;
                
                // 跟踪实际观看时间
                if (isPlaying) {
                    const now = Date.now() / 1000;
                    if (lastUpdateTime > 0) {
                        const delta = now - lastUpdateTime;
                        actualWatchTime += delta;
                        updateWatchProgress();
                    }
                    lastUpdateTime = now;
                }
            });
            
            // 播放事件
            video.addEventListener('play', function() {
                isPlaying = true;
                lastUpdateTime = Date.now() / 1000;
                addEvent(video.currentTime, '开始播放');
            });
            
            // 暂停事件
            video.addEventListener('pause', function() {
                isPlaying = false;
                addEvent(video.currentTime, '暂停播放');
            });
            
            // 结束事件
            video.addEventListener('ended', function() {
                isPlaying = false;
                addEvent(video.currentTime, '播放结束');
            });
            
            // 按钮事件
            playBtn.addEventListener('click', function() {
                video.play();
            });
            
            pauseBtn.addEventListener('click', function() {
                video.pause();
            });
            
            resetBtn.addEventListener('click', function() {
                video.currentTime = 0;
                actualWatchTime = 0;
                updateWatchProgress();
                timeWatchedEl.textContent = '0秒';
                eventsList.innerHTML = '<div class="event-item"><span class="event-time">0:00</span><span class="event-desc">视频已重置</span></div>';
            });
        });
    </script>
</body>
</html>
XM_12345
关注
vue2：实现video视频禁止拖拽快进快退功能+禁止拖动进度条快进+禁止调整倍速播放，如何限制用户绝对禁止拖动进度条保证完整观看完视频及记录观看时长（全部浏览器强力禁止，支持移动端H5网页/PC端）
高级前端工程师
07-01 3242
vue中使用video标签禁止拖动进度条，html，video禁止拖动进度条，禁止快进，vue video 视频播放时禁止拖动进度条，video禁止拖拽进度条，video组件禁止进度条拖动，vue如何让视频无法快进，video视频标签怎么禁止用户拖动进度条快进，h5播放视频怎么禁止用户快进快退，禁止视频播放组件video拖曳改变视频进度，限制video拉动进度条，videojs进度条禁用，用户不可以快进视频，video禁止拖拽进度条，实现video禁止拖拽快进功能，JS video 禁止拖动进度条，解决浏览
video记录视频播放时长
qiuweifan的博客
10-20 3261
记录视频播放时长
html5 video timeupdate,通过video的timeupdate事件检测视频无法播放实例说明
weixin_32818587的博客
06-25 3151
需求说明：视频正文页在做视频联播时会遇到视频无法播放或者解析异常的情况，希望遇到有问题视频时可以跳过当前视频。事件说明：Video对象可以通过ontimeupdate事件来报告当前的播放进度,即在播放位置发生改变时触发该事件，我们可以通过监听该事件来判断视频是否正常播放。实例说明：视频无法播放是视频点击播放按钮后停留在0秒，此时已经触发timeupdate事件。视频解析异常则是不会触发timeup...
video/audio timeupdate事件触发粒度（更新频率）调节
weixin_42333548的博客
06-08 1931
一旦触发该监听器，就立即分5次执行，每50毫秒执行一次，执行5次，恰好就是250毫秒。所以这个timeupdate事件触发频率也是250毫秒触发一次。一般来说，视频的进度条底层默认都是250毫秒更新一次的。其实可以在里面加上计时器。
html5视频标签video中ontimeupdate事件用法
阿酷tony
11-22 1万+
 html5视频标签video中ontimeupdate事件 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;demo实例&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt
video 自定义视频播放控件
细节怪的博客
02-21 1万+
自定义视频播放控件，控件位置可随意放置
Html5 video 上传预览图片视频，设置、预览视频某秒的海报帧
09-22
例如，如果用户输入的时间超出视频时长，可以显示一个警告信息，并阻止预览。在上述代码中，我们看到了一个简单的错误检查，如果输入的时间不正确，会显示一个警告 toast。 总之，HTML5的`<video>`标签结合...
uniapp视频video
xiaoququ的博客
08-23 1215
【代码】uniapp视频video。
JS监听video视频播放时间
weixin_34026276的博客
12-22 1万+
采用原生时间监听element.addEventListener(event,function,useCapture) //监听播放时间 var video = document.getElementById(videoName); //使用事件监听方式捕捉事件 video.addEv...
html5语法下的video标签，如何通过 ontimeupdate事件来记录当前视频播放的时间点
阿酷tony
06-12 1229
html5语法下的video标签，如何通过 ontimeupdate事件来记录当前视频播放的时间点。html5语法下的video标签，如何通过 ontimeupdate事件来记录当前视频播放的时间点
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
09-28
Video对象是HTML5中新增的一个对象，支持多种不同格式的视频在线播放，功能比较强大，Video对象可以通过ontimeupdate事件来报告当前的播放进度，下面为大家介绍下Video对象ontimeupdate事件的问题，感兴趣的朋友可以参考下哈
HTML Audio/Video DOM timeupdate 事件，play()方法
ssisse的博客
08-14 1万+
HTML Audio/Video DOM timeupdate 事件 定义和用法 timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。 该事件可以在以下情况被调用: 播放音频/视频（audio/video） 移动音频/视频（audio/video）播放位置（即播放时刻点被改变，例如拖动了播放进度条） 提示： timeup
Uniapp video timeupdate计时器代替@ended提交视频进度
AK的博客
11-15 2286
由于uniapp 在Hbuilder打包后可能导致viedo组件@ended无法触发的问题，不能完成视频；除此之外，还有可能需要的视频未完整播放不可拖动功能,但是已经播放过的视频可以随意拖动。
video设置播放时间点及常用属性和方法
weixin_42333548的博客
12-03 3万+
video标签常用属性介绍，下面以vue中使用video标签来举例： 1、video标签常用属性 下面shareVideoLink为视频连接地址 <!--autoplay=>自动播放 controls=>是否显示控件 loop=>是否循环播放 muted=>是否静音播放 poster=>视频封面 src=>播放源 preload=>页面加...
vedio.ontimeupdate()和video.onloadeddata（）
最新发布
JLY19970726的博客
05-31 1204
JavaScript视频事件处理摘要 video.onloadeddata 事件在视频第一帧加载完成后触发，适合初始化播放器、显示封面或获取视频基础信息。它早于oncanplay事件，但晚于onloadedmetadata（仅元数据加载）。使用时建议优先采用addEventListener替代直接赋值，防止事件覆盖。 video.ontimeupdate 事件在视频播放位置变化时持续触发（每秒4-60次），主要用于进度条同步、字幕显示和观看记录。与seeked事件（仅手动跳转触发）不同，它适用于实时进度跟踪
video 播放判断卡顿
oYuLian的博客
08-20 4663
用video监听一下timeupdate消息。这个消息在正常播放的时候会不停的触发。如果卡顿了，这个就不会触发了。判断间隔是1秒
使用video的那些坑
transform的博客
12-28 6896
2，video标签api中的加载事件支持不太好：在现代浏览器中应该使用监听事件或者jq封装的on事件。而不是用onclick=function（）{}这样的样式 videoEle.addEventListener("durationchange",function(e){        //测试4.2下只执行durationchange事件。        $(videoEle).sib
微信小程序video控件的使用
热门推荐
hacjy
03-19 4万+
微信小程序video控件的使用 微信小程序video控件的使用 一、简介 二、属性 三、相关实现api 1、wx.createVideoContext 2、videoContext对象 四、代码实现 实现效果，如下图 实现原理： 一、简介 video控件是微信小程序提供的系统组件之一，用于实现播放视频的功能。 二、属性 | 属性名 | 类型...
利用ontimeupdate记录video播放进度
u014043168的博客
10-19 2343
软件版本： php 7.1 mysql 8.0.2 Chrome 实现思路： 分两个触发点记录播放进度，一是利用video的 ontimeupdate属性每隔一分钟记录一次，而是关闭页面记录一次。当然如果视频播放只有一个端，完全可以做页面的localstorage缓存，没必要上送到服务端。如果有网页和、微信或者app几个播放端，想要不同端公用统一个播放进度，就有必要与服务端交互了。下面的代码是上送服务端的。 html代码 <html> <head> <met
vue 实时监听视频学习时长
04-01
用户的问题主要是监听时长，所以核心是timeupdate事件和currentTime的绑定。 还需要检查是否有浏览器的兼容性问题，但一般情况下，现代浏览器都支持timeupdate事件。最后，确保代码中的语法正确，比如使用箭头函数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值