1. video play 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>2. Video playback reporting parameters
| serial number | parameter | Remark |
| 1 | videoId | video id |
| 2 | duration | The total duration of the video, obtained from the timeupdate event, e.mp.detail.duration |
| 3 | currentTime | The current video playback time, obtained from the timeupdate event, e.mp.detail.currentTime |
| The interface is called and reported every 10 seconds, which can be determined according to needs. | ||
3. Calculate whether the video is played completely
We divide the duration into multiple intervals according to certain intervals (such as an interval of 10 seconds), and then we calculate whether each interval has a reported record (at least once). If the overall rate reaches 90%, we consider it to be a complete playback.
If the viewing process and reported data are recorded in a "smooth line chart"
the x-axis is the video timeline, duration
the y-axis It is a report record, currentTime
If it is a smooth line, it means the broadcast is completed normally
If there is a back and forth polyline, it means there is a dragging progress bar
For example, a 1-minute video is reported once every 10 seconds, and the entire viewing process can be recorded. We can even watch it exactly the same as the user
4. Calculate video completion rate
Completion rate = number of completions / number of views
5. Video playback reporting optimization
If it can be reported when the video is finished playing/leaving/refreshing the page/exiting the mini program, etc., then reporting it once is enough.
6. Process records
6.1. Disable download button, full screen button and remote play button
| controlslist | nodownload | Disable download button |
| nofullscreen | Disable full screen button | |
| noremoteplayback | Disable remote play button |
<video controls controlsList="nodownload nofullscreen noremoteplayback">
<source src="path/to/video.mp4" type="video/mp4">
</video>
Native video tag hides bottom function button_controlslist="nodownload-CSDN Blog
6.2. Determine whether the page is refreshed or closed, and the browser tab status
Tracker: Front-end tracking service-Technical points review_Front-end tracking framework-CSDN blog
6.3. Can the actual playback time/total video duration be used to calculate the completion of playback?
No, the user cannot be excluded from dragging and dropping the progress bar back and forth.
7. Welcome exchanges and corrections
8. Reference links
HTML <video> Tag | Newbie Tutorial
How to calculate completion rate - Zhihu
Cycle coefficient, interval completion rate, overall completion rate - Bilibili