html-video：计算视频是否完整播放 / 计算视频完播率 / 还原播放轨迹

快雪时晴-初晴融雪

已于 2025-01-02 23:35:25 修改

阅读量2.4k

点赞数 16

分类专栏：前端文章标签： html 音视频前端

于 2023-11-29 11:02:16 首次发布

本文链接：https://blog.csdn.net/snowball_li/article/details/134440041

版权

前端专栏收录该内容

293 篇文章

订阅专栏

本文介绍了如何使用HTMLvideo标签实现视频播放，包括自动播放、上报参数（如视频时长、播放进度）、计算视频完播率的方法，以及优化上报时机和隐藏控制选项。讨论了如何通过埋点技术追踪用户行为，但强调了无法完全排除用户拖动进度条的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、video 播放视频

<video width="100%"
        id="myVideo"
        object-fit="fill"
        :autoplay="true"
        :loop="false"
        :enable-auto-rotation="true"
        :enable-play-gesture="true"
        :src="videoInfo.videoUrl"
        :poster="videoInfo.videoCover"
        @play="videoPlay"
        @pause="videoPause"
        @ended="videoEnded"
        @timeupdate="updateProgress" // 当媒介改变其播放位置时运行脚本
>
</video>

二、视频播放上报参数

序号	参数	备注
1	videoId	视频id
2	duration	视频的总时长，timeupdate事件中获取，e.mp.detail.duration
3	currentTime	当前视频播放的时间，timeupdate事件中获取，e.mp.detail.currentTime
每隔10秒调用接口上报一次，可根据需求具体确定

三、计算视频是否完整播放

我们把duration按照一定间隔划分成多个区间（比如10s一个区间），然后我们计算是否每个区间都有上报的记录（至少有一次），整体达到90%，我们认为是完整播放。

如果把观看过程，通过上报的数据记录在“平滑折线图”中
x轴是视频时间轴，duration
y轴是上报记录，currentTime
如果是平滑线条就是正常完播
如果是有来回的折线就是有拖动进度条
比如1分钟的视频，10秒上报一次，整个观看的过程都能记录下来，我们甚至能和用户一模一样的观看一遍

// 完播率---对应图一
let currentCompletionRate = reactive([]);
for (let i = 0; i < Math.floor(videoDuration.value / 10); i++) {
currentCompletionRate.push({
        range: [i * 10, (i + 1) * 10],
        play: false,
      });
 }
// currentTime 事件返回的当前播放时间currentTime 在任意一个区间 play设置为 true，最后统计为true的百分比。
// Math.floor(e.srcElement.currentTime / 10) currentTime 对应 currentCompletionRate 的索引

// 播放轨迹---对应图二
// currentTime 事件中 每隔10S  currentCompletionRate.push({currentTime: currentTime, datetime: datetime})

四、计算视频完播率

完播率 = 完播次数 / 观看次数

五、视频播放上报优化

如果可以是视频播放完毕 / 离开 / 刷新页面 / 小程序的退出等时候上报，那么上报一次就可以了

埋点tracker：前端埋点服务-技术要点梳理 / 判断页面是刷新还是关闭 / 浏览器tab状态 / navigator.sendBeacon_前端埋点框架-CSDN博客

六、过程记录

6.1、禁用下载按钮、全屏按钮和远程播放按钮

controlslist	nodownload	禁用下载按钮
	nofullscreen	禁用全屏按钮
	noremoteplayback	禁用远程播放按钮

<video controls controlsList="nodownload nofullscreen noremoteplayback">
  <source src="path/to/video.mp4" type="video/mp4">
</video>

原生video标签隐藏底部功能按钮_controlslist="nodownload-CSDN博客

6.2、判断页面是刷新还是关闭、浏览器tab状态

埋点tracker：前端埋点服务-技术要点梳理_前端埋点框架-CSDN博客

6.3、实际播放时长 / 视频总时长，可以计算完播吗

不能，不能排除用户来回拖放进度条

6.4、页面禁止鼠标右键

document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
});

6.5、计算进入页面后累积播放的时长

video 标签 @timeupdate="onMetadataTimeupdate" 事件方法，每隔250ms执行一次，在这个方法内部执行累加 / 4，得到累计播放秒数

当前播放30秒

计算得到累计播放时长29.25s，精确到两位小数，计算准确。

向上取整得到 30s

七、欢迎交流指正

八、参考链接

解决video动态切换src视频不改变问题_video在循环体中,source的src如何动态显示视频流-CSDN博客

HTML 事件 | 菜鸟教程

HTML <video> 标签 | 菜鸟教程

完播率怎么计算 - 知乎

循环系数、区间完播率、总体完播率 - 哔哩哔哩

HTML 事件 | 菜鸟教程