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

一、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>

二、视频播放上报参数

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

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

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

 

 

四、计算视频完播率

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

五、视频播放上报优化

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

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

六、过程记录

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

<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、实际播放时长 / 视频总时长，可以计算完播吗

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

七、欢迎交流指正

八、参考链接

HTML 事件 | 菜鸟教程

HTML <video> 标签 | 菜鸟教程

完播率怎么计算 - 知乎

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

HTML 事件 | 菜鸟教程