【前端】web移动端进行监控是否完播 | 视频完播率设计
CTRA王大大 2024-07-03 11:33:01 阅读 82
1、整体设计
1、前端播放监控：
使用移动端的前端播放器，比如 HTML5 video 标签或者第三方播放器（如 Video.js 或者 H5Player）。
在播放器中添加事件监听器来监控播放状态，例如 timeupdate、ended 等事件。
2、记录播放状态：
通过 timeupdate 事件不断记录当前播放时间。
在 ended 事件触发时，记录视频播放完毕的状态。
3、数据上报：
将播放状态和相关数据（如视频ID、用户ID、播放时长等）上报到后端服务器。
可以使用 AJAX 或 Fetch API 进行数据上报。
4、后端处理：
后端服务器接收到上报的数据后，可以将这些数据存储到数据库中，以便后续分析和监控。
2、代码实现
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Video Monitoring</title>
</head>
<body>
<video id="myVideo" width="320" height="240" controls>code>
<source src="https://your-cos-url.com/your-video-file.mp4" type="video/mp4">code>
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 属性也以秒为单位，表示当前播放位置的时间点。
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}`);
});
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。