【前端】web移动端进行监控是否完播 | 视频完播率设计

1、整体设计

1、前端播放监控:

使用移动端的前端播放器,比如 HTML5 video 标签或者第三方播放器(如 Video.js 或者 H5Player)。

在播放器中添加事件监听器来监控播放状态,例如 timeupdate、ended 等事件。

2、记录播放状态:

通过 timeupdate 事件不断记录当前播放时间。

在 ended 事件触发时,记录视频播放完毕的状态。

3、数据上报:

将播放状态和相关数据(如视频ID、用户ID、播放时长等)上报到后端服务器。

可以使用 AJAX 或 Fetch API 进行数据上报。

4、后端处理:

后端服务器接收到上报的数据后,可以将这些数据存储到数据库中,以便后续分析和监控。

2、代码实现

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Monitoring</title>
</head>
<body>
    <video id="myVideo" width="320" height="240" controls>
        <source src="https://your-cos-url.com/your-video-file.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    
    <script>
        const video = document.getElementById('myVideo');
        let totalWatchTime = 0;
        let lastTime = 0;
        let isPlaying = false;

        video.addEventListener('play', function() {
            isPlaying = true;
            lastTime = video.currentTime;
        });

        video.addEventListener('pause', function() {
            if (isPlaying) {
                totalWatchTime += video.currentTime - lastTime;
                isPlaying = false;
            }
        });

        video.addEventListener('timeupdate', function() {
            if (!isPlaying) {
                // 如果用户拖动进度条,也需要计算观看时间
                totalWatchTime += Math.abs(video.currentTime - lastTime);
                lastTime = video.currentTime;
            }
        });

        video.addEventListener('ended', function() {
            if (isPlaying) {
                totalWatchTime += video.currentTime - lastTime;
                isPlaying = false;
            }
            console.log('Total Watch Time:', totalWatchTime);
            reportPlayStatus(video.src, 'user123', video.duration, totalWatchTime);
        });

        function reportPlayStatus(videoUrl, userId, duration, watchTime) {
            fetch('https://your-server-endpoint.com/report', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    videoUrl: videoUrl,
                    userId: userId,
                    duration: duration,
                    watchTime: watchTime,
                    status: 'ended'
                }),
            })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        }
    </script>
</body>
</html>

video.duration 是按秒计算的。HTML5 视频元素的 duration 属性返回的是一个浮点数,表示视频的总时长,单位是秒。如果视频的时长是 5 分 30 秒,video.duration 将返回 330.0。

此外,video.currentTime 属性也以秒为单位,表示当前播放位置的时间点。

js 复制代码
const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

app.post('/report', (req, res) => {
    const { videoUrl, userId, duration, watchTime, status } = req.body;

    // 处理上报的数据,例如存储到数据库
    console.log('Received report:', { videoUrl, userId, duration, watchTime, status });

    // 返回响应
    res.status(200).json({ message: 'Report received' });
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});
相关推荐
勘察加熊人1 小时前
vue猜词游戏
前端·vue.js·游戏
且心1 小时前
【问题处理】webpack4升webpack5,报错Uncaught ReferrnceError: process is not defined
前端·webpack5·process·uncaught·referrnceerror
我是哈哈hh1 小时前
【Vue】 核心特性实战解析:computed、watch、条件渲染与列表渲染
前端·javascript·vue.js·前端框架·vue·语法基础
龙在天2 小时前
“手速太快,分页翻车?”,前端分页竞态问题,看这一篇就够了
前端
前端Hardy2 小时前
HTML&CSS:超好看的收缩展开菜单
javascript·css·html
Riesenzahn2 小时前
你使用过css3的:root吗?说说你对它的理解
前端·javascript
前端Hardy2 小时前
HTML&CSS:哇塞!Three.js 打造的 3D 交互平面,鼠标滑动纹理如梦幻般变形!
javascript·css·html
Riesenzahn2 小时前
在js中undefined和undeclared有什么区别?
前端·javascript
打野赵怀真2 小时前
平时有经常用到nextTick吗?谈谈你对nextTick的理解。
前端·javascript
LaoZhangAI2 小时前
2025最全Browser Use MCP指南:AI控制浏览器的开源解决方案与API接入全攻略
前端