html5视频播放器的断点续播和记忆播放是如何做的？
先看效果
以下为视频自动续播的截图：
视频自动续播(视频从上一次中断的时间点03:50，自动续播)
视频自动续播(视频从上一次中断的时间点05:15，自动续播)
当视频播放中断后，下次打开能从中断的时间点继续播放，这个功能通常被称为“断点续播”或“记忆播放”。
-
HTMLMediaElement.currentTime: 这是 HTML5<video>或<audio>元素的一个属性，用于获取或设置当前播放的时间（以秒为单位）。 -
localStorage: 这是一个浏览器提供的 API，用于在用户的浏览器中持久化存储键值对数据。即使浏览器关闭再打开，数据也不会丢失。 -
事件监听: 需要监听视频播放器的特定事件，以便在合适的时候保存和读取播放进度。
演示实例：视频自动续播功能
原理可以参考如下代码：
html5代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 视频断点续播</title>
<style>
video {
width: 80%;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>我的视频播放器</h1>
<video id="myVideo" controls>
<source src="your-video.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频。
</video>
<script src="video-resume.js"></script>
</body>
</html>JS代码
document.addEventListener('DOMContentLoaded', () => {
const video = document.getElementById('myVideo');
const videoId = 'your-video-id'; // 给每个视频一个唯一的ID，用于localStorage存储
// 1. 读取保存的播放进度
// 当页面加载时，尝试从 localStorage 获取该视频上次播放的时间
const savedTime = localStorage.getItem(`video_progress_${videoId}`);
if (savedTime) {
// 如果存在保存的时间，将视频的 currentTime 设置为该时间
// 注意：这里需要确保视频元数据已经加载完毕，否则设置可能无效。
// 使用 'loadedmetadata' 事件确保在设置 currentTime 之前元数据已加载。
video.addEventListener('loadedmetadata', () => {
video.currentTime = parseFloat(savedTime);
console.log(`视频从上次的 ${parseFloat(savedTime).toFixed(2)} 秒处继续播放。`);
// 如果希望视频自动续播，可以在这里调用 video.play()
// video.play();
}, { once: true }); // 使用 { once: true } 确保事件只触发一次
}
// 2. 实时保存播放进度
// 监听 'timeupdate' 事件，该事件在视频播放时会频繁触发
// 为了避免频繁写入 localStorage 造成性能问题，可以设置一个更新频率
let updateInterval;
const saveProgress = () => {
if (video.paused || video.ended) {
// 如果视频暂停或结束，则不需要频繁保存
clearInterval(updateInterval);
updateInterval = null;
return;
}
localStorage.setItem(`video_progress_${videoId}`, video.currentTime.toString());
};
video.addEventListener('play', () => {
if (!updateInterval) {
// 每隔一定时间（例如2秒）保存一次播放进度
updateInterval = setInterval(saveProgress, 2000);
}
});
video.addEventListener('pause', () => {
// 视频暂停时立即保存一次，并清除定时器
saveProgress();
clearInterval(updateInterval);
updateInterval = null;
});
video.addEventListener('ended', () => {
// 视频播放结束时，清除保存的进度（可选，取决于需求）
localStorage.removeItem(`video_progress_${videoId}`);
clearInterval(updateInterval);
updateInterval = null;
console.log('视频播放结束，清除断点记录。');
});
// 3. 页面卸载前保存最后一次进度
// 确保在用户关闭页面或导航到其他页面时保存最新的播放时间
window.addEventListener('beforeunload', () => {
if (!video.ended) { // 如果视频没有播放完
localStorage.setItem(`video_progress_${videoId}`, video.currentTime.toString());
console.log('页面即将卸载，保存当前播放时间。');
}
});
// 可选：添加一些UI提示，例如一个“继续播放”按钮
// let resumeButton = document.createElement('button');
// resumeButton.textContent = '继续播放';
// resumeButton.style.display = 'none'; // 默认隐藏
// document.body.insertBefore(resumeButton, video);
// if (savedTime) {
// resumeButton.style.display = 'block';
// resumeButton.onclick = () => {
// video.currentTime = parseFloat(savedTime);
// video.play();
// resumeButton.style.display = 'none';
// };
// }
});
videoId: 这是一个非常重要的变量。如果你的页面上有多个视频，每个视频都需要一个唯一的 ID 来在localStorage中区分它们的播放进度。你可以通过数据属性 (data-id) 从 HTML 中获取，或者直接在 JavaScript 中定义。
localStorage.getItem(key): 用于从localStorage中获取指定key的值。
localStorage.setItem(key, value): 用于将key-value对存储到localStorage中。value必须是字符串。
localStorage.removeItem(key): 用于从localStorage中移除指定key的数据。
video.currentTime: 获取或设置视频当前的播放时间（以秒为单位）。
loadedmetadata事件: 当视频的元数据（如时长、尺寸等）加载完毕后触发。在设置currentTime之前监听此事件可以确保视频已准备好进行跳转。
timeupdate事件: 在视频播放过程中，当currentTime属性更新时会频繁触发。我们利用这个事件来定时保存播放进度。
play事件: 当视频开始播放时触发。
pause事件: 当视频暂停时触发。
ended事件: 当视频播放结束时触发。
beforeunload事件: 当用户即将离开页面（关闭标签页、导航到其他页面等）时触发。这是一个保存最后进度的重要时机。
[ 视频安全 ] 相关原创文章
扫一扫
863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
