1、整体设计
1、前端播放监控：
使用移动端的前端播放器，比如 HTML5 video 标签或者第三方播放器（如 Video.js 或者 H5Player）。
在播放器中添加事件监听器来监控播放状态，例如 timeupdate、ended 等事件。
2、记录播放状态：
通过 timeupdate 事件不断记录当前播放时间。
在 ended 事件触发时，记录视频播放完毕的状态。
3、数据上报：
将播放状态和相关数据（如视频ID、用户ID、播放时长等）上报到后端服务器。
可以使用 AJAX 或 Fetch API 进行数据上报。
4、后端处理：
后端服务器接收到上报的数据后，可以将这些数据存储到数据库中，以便后续分析和监控。
2、代码实现
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Video Monitoring</title></head><body><videoid="myVideo"width="320"height="240"controls><sourcesrc="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);});functionreportPlayStatus(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}`);});
本文转载自: https://blog.csdn.net/wanglei19891210/article/details/139235686
版权归原作者 CTRA王大大 所有， 如有侵权，请联系我们删除。
版权归原作者 CTRA王大大 所有， 如有侵权，请联系我们删除。