一、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 事件 | 菜鸟教程文章来源地址https://www.toymoban.com/news/detail-795693.html
HTML <video> 标签 | 菜鸟教程
完播率怎么计算 - 知乎
循环系数、区间完播率、总体完播率 - 哔哩哔哩文章来源：https://www.toymoban.com/news/detail-795693.html
HTML 事件 | 菜鸟教程
到了这里，关于html-video：计算视频是否完整播放 / 计算视频完播率的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
