首页监听到页面关闭时，暂停视频播放，并保存播放进度到数据库中，并写一个示例

监听到页面关闭时，暂停视频播放，并保存播放进度到数据库中，并写一个示例

时间: 2024-01-08 21:04:04 浏览: 65

好的，以下是一个示例代码，可以在页面关闭时暂停视频播放，并将播放进度保存到数据库中： ```html <!DOCTYPE html> <html> <head> <title>关闭视频播放器并保存进度示例</title> </head> <body> <video id="my-video" src="example.mp4" controls autoplay></video> <script> // 获取视频播放器元素 var videoPlayer = document.getElementById('my-video'); // 监听beforeunload事件 window.addEventListener('beforeunload', function() { // 暂停视频播放 videoPlayer.pause(); // 获取当前播放时间 var currentTime = videoPlayer.currentTime; // 保存当前播放进度到数据库 saveProgress(currentTime); }); // 模拟保存进度到数据库的函数 function saveProgress(progress) { // 发送Ajax请求，将进度保存到数据库中 // 这里只是一个示例，实际情况需要根据具体需求进行修改 var xhr = new XMLHttpRequest(); xhr.open('POST', '/api/save-progress'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(JSON.stringify({ progress: progress })); } </script> </body> </html> ``` 在上述示例中，我们监听了beforeunload事件，并在事件回调中暂停了视频播放，并且将当前播放进度保存到了数据库中。具体实现如下： 1. 获取视频播放器元素，以便在事件回调中操作播放器。 2. 监听beforeunload事件，并在事件回调中暂停播放器、获取当前播放时间、保存当前播放进度到数据库中。 3. 为了演示保存进度到数据库的过程，我们使用了一个模拟函数`saveProgress()`来模拟实际情况下的保存操作。在实际项目中，需要根据具体情况进行修改。

阅读全文