一、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" // 當(dāng)媒介改變其播放位置時(shí)運(yùn)行腳本
>
</video>二、視頻播放上報(bào)參數(shù)
| 序號(hào) | 參數(shù) | 備注 |
| 1 | videoId | 視頻id |
| 2 | duration | 視頻的總時(shí)長(zhǎng)，timeupdate事件中獲取，e.mp.detail.duration |
| 3 | currentTime | 當(dāng)前視頻播放的時(shí)間，timeupdate事件中獲取，e.mp.detail.currentTime |
| 每隔10秒調(diào)用接口上報(bào)一次，可根據(jù)需求具體確定 | ||
三、計(jì)算視頻是否完整播放
我們把duration按照一定間隔劃分成多個(gè)區(qū)間（比如10s一個(gè)區(qū)間），然后我們計(jì)算是否每個(gè)區(qū)間都有上報(bào)的記錄（至少有一次），整體達(dá)到90%，我們認(rèn)為是完整播放。
如果把觀看過(guò)程，通過(guò)上報(bào)的數(shù)據(jù)記錄在“平滑折線圖”中
x軸是視頻時(shí)間軸，duration
y軸是上報(bào)記錄，currentTime
如果是平滑線條就是正常完播
如果是有來(lái)回的折線就是有拖動(dòng)進(jìn)度條
比如1分鐘的視頻，10秒上報(bào)一次，整個(gè)觀看的過(guò)程都能記錄下來(lái)，我們甚至能和用戶一模一樣的觀看一遍
?
?
四、計(jì)算視頻完播率
完播率 = 完播次數(shù) / 觀看次數(shù)
五、視頻播放上報(bào)優(yōu)化
如果可以是視頻播放完畢 / 離開(kāi) / 刷新頁(yè)面 / 小程序的退出 等時(shí)候上報(bào)，那么上報(bào)一次就可以了
埋點(diǎn)tracker：前端埋點(diǎn)服務(wù)-技術(shù)要點(diǎn)梳理 / 判斷頁(yè)面是刷新還是關(guān)閉 / 瀏覽器tab狀態(tài) / navigator.sendBeacon_前端埋點(diǎn)框架-CSDN博客
六、過(guò)程記錄
6.1、禁用下載按鈕、全屏按鈕和遠(yuǎn)程播放按鈕
| controlslist | nodownload | 禁用下載按鈕 |
| nofullscreen | 禁用全屏按鈕 | |
| noremoteplayback | 禁用遠(yuǎn)程播放按鈕 |
<video controls controlsList="nodownload nofullscreen noremoteplayback">
<source src="path/to/video.mp4" type="video/mp4">
</video>
原生video標(biāo)簽隱藏底部功能按鈕_controlslist="nodownload-CSDN博客
6.2、判斷頁(yè)面是刷新還是關(guān)閉、瀏覽器tab狀態(tài)
埋點(diǎn)tracker：前端埋點(diǎn)服務(wù)-技術(shù)要點(diǎn)梳理_前端埋點(diǎn)框架-CSDN博客
6.3、實(shí)際播放時(shí)長(zhǎng) / 視頻總時(shí)長(zhǎng)，可以計(jì)算完播嗎
不能，不能排除用戶來(lái)回拖放進(jìn)度條
七、歡迎交流指正
八、參考鏈接
HTML 事件 | 菜鳥(niǎo)教程文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-795693.html
HTML <video> 標(biāo)簽 | 菜鳥(niǎo)教程
完播率怎么計(jì)算 - 知乎
循環(huán)系數(shù)、區(qū)間完播率、總體完播率 - 嗶哩嗶哩文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-795693.html
HTML 事件 | 菜鳥(niǎo)教程
到了這里，關(guān)于html-video：計(jì)算視頻是否完整播放 / 計(jì)算視頻完播率的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
