一、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秒上报一次，整个观看的过程都能记录下来，我们甚至能和用户一模一样的观看一遍

 

 

四、计算视频完播率

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

五、视频播放上报优化

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

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

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

七、欢迎交流指正

八、参考链接

HTML 事件 | 菜鸟教程

HTML <video> 标签 | 菜鸟教程

完播率怎么计算 - 知乎

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

HTML 事件 | 菜鸟教程