dplayer网页播放器记忆播放功能-网页设计-锦华智联科技

核心思路

记忆播放功能的实现非常直接,其核心思路是：

（图片来源网络，侵删）

记录：当用户暂停或关闭视频时，获取当前视频的播放时间（currentTime）。
存储：将这个播放时间与视频的唯一标识（如 videoId 或视频 URL）关联起来，并保存到浏览器的本地存储中（如 localStorage）。
读取：当用户再次打开同一个视频时，从本地存储中读取之前保存的播放时间。
应用：使用 DPlayer 提供的 API，在视频加载后，将播放器的时间跳转到之前记录的位置。

实现步骤

我们将通过一个完整的代码示例来展示如何实现,这个例子将使用 localStorage 来存储播放位置。

第1步：准备 HTML 和引入 DPlayer

创建一个基本的 HTML 文件，并引入 DPlayer 的 CSS 和 JS 文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">DPlayer 记忆播放示例</title>
    <!-- 引入 DPlayer CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.css">
    <style>
        body {
            text-align: center;
            padding-top: 50px;
            font-family: Arial, sans-serif;
        }
        #dplayer-container {
            width: 800px;
            height: 450px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1>DPlayer 记忆播放功能演示</h1>
    <div id="dplayer-container"></div>
    <!-- 引入 DPlayer JS -->
    <script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>
    <!-- 我们的脚本将在下面 -->
    <script>
        // ... 这里的 JavaScript 代码将在下一步中添加 ...
    </script>
</body>
</html>

第2步：创建 DPlayer 实例并实现核心逻辑

我们在 <script> 标签中编写核心的 JavaScript 代码。

// 获取一个唯一的视频 ID
// 在实际应用中，这可能是视频的 URL、数据库 ID 等。
// 为了演示，我们直接使用视频的 URL 作为 ID。
const videoUrl = 'https://api.dogecloud.com/player/get.mp4?v=694de1a4f4da6a5a3ff2ed2e29f15e1a&fmt=mp4';
const videoId = videoUrl; // 使用 URL 作为唯一标识
// 从 localStorage 中获取记忆的播放时间
// 如果不存在，则默认为 0
const rememberedTime = localStorage.getItem(`dplayer-remembered-time-${videoId}`) || 0;
// 创建 DPlayer 实例
const dp = new DPlayer({
    container: document.getElementById('dplayer-container'),
    autoplay: false, // 建议不要自动播放，让用户自己决定
    theme: '#FADFA3',
    loop: false,
    screenshot: true,
    hotkey: true,
    preload: 'auto',
    video: {
        url: videoUrl,
        pic: 'https://i.loli.net/2025/08/17/5b7746b703b4e.jpg', // 视频封面
        thumbnails: 'https://i.loli.net/2025/08/17/5b7746b703b4e.jpg', // 缩略图
    }
});
// --- 核心记忆功能实现 ---
// 1. 监听 'pause' 事件：当用户暂停时，记录当前时间
dp.on('pause', () => {
    const currentTime = dp.video.currentTime;
    console.log(`视频已暂停，当前时间: ${currentTime}秒，正在保存...`);
    // 将播放时间保存到 localStorage
    localStorage.setItem(`dplayer-remembered-time-${videoId}`, currentTime);
});
// 2. 监听 'ended' 事件：当视频播放结束时，清除记忆时间
dp.on('ended', () => {
    console.log('视频已播放完毕，清除记忆时间。');
    localStorage.removeItem(`dplayer-remembered-time-${videoId}`);
});
// 3. 在视频 'canplay' (可以播放) 后，跳转到记忆的时间点
// 使用 setTimeout 确保在视频元数据加载完成后执行
dp.on('canplay', () => {
    // 只有当记忆的时间大于 0 时才跳转
    // 避免首次加载时也跳转
    if (rememberedTime > 0) {
        console.log(`找到记忆时间: ${rememberedTime}秒，即将跳转...`);
        dp.seek(rememberedTime, true); // 第二个参数 true 表示静默跳转，不触发事件
    }
});
// 可选：添加一个控制按钮来清除记忆
const clearButton = document.createElement('button');
clearButton.innerText = '清除记忆';
clearButton.style.marginTop = '20px';
clearButton.onclick = () => {
    localStorage.removeItem(`dplayer-remembered-time-${videoId}`);
    alert('记忆已清除，请刷新页面重新加载视频。');
    location.reload(); // 刷新页面以重新加载视频
};
document.body.appendChild(clearButton);

代码详解

videoId:
（图片来源网络，侵删）
- 我们使用视频的 URL 作为唯一标识，如果你的网站有多个不同的视频，每个视频的 URL 都不同，这样就能准确地为每个视频存储独立的播放位置。
- 在实际项目中,你可能使用更稳定的 ID，比如从数据库中获取的视频 ID。
localStorage:
- localStorage.getItem(key): 从本地存储中读取数据。key 不存在，则返回 null，我们使用 || 0 来确保在没有记忆时间时，rememberedTime 变量默认为 0。
- localStorage.setItem(key, value): 将数据保存到本地存储。key 我们使用了 dplayer-remembered-time-${videoId} 的格式，这样可以避免不同视频之间的数据冲突。
- localStorage.removeItem(key): 删除指定的数据，我们在视频播放结束时调用它，这样下次用户观看时就会从头开始。
DPlayer 事件监听:
- dp.on('pause', ...): 这是记录播放点的最佳时机，用户暂停视频时，我们立即捕获 currentTime 并保存。
- dp.on('ended', ...): 视频正常播放完毕后，我们清除记忆，符合用户预期。
- dp.on('canplay', ...): 这个事件在视频的元数据（如时长、尺寸等）加载完毕后触发，此时是安全地调用 dp.seek() 方法跳转播放时间的最佳时机。
dp.seek(time, silent):
- dp.seek(time): 将播放器的当前时间设置为 time 秒。
- dp.seek(time, true): 第二个参数 silent 是一个非常有用的功能，它告诉 DPlayer 不要因为这次跳转而触发 timeupdate、seeking、seeked 等事件，这可以避免一些潜在的逻辑混乱，比如在跳转时又误触发暂停事件的监听器。

进阶优化与注意事项

用户偏好: 你可以增加一个开关，让用户选择是否开启记忆播放功能，将这个偏好设置也存入 localStorage，然后在初始化 DPlayer 前判断。
多浏览器标签页: 如果用户在一个标签页播放视频，然后在另一个标签页打开同一个视频，localStorage 是共享的，这可能导致第二个视频也自动跳转，如果这不是你想要的行为，可以考虑使用 sessionStorage（仅在当前会话有效）或更复杂的机制（如 BroadcastChannel API）来同步状态。
视频 URL 变化: 如果视频的 URL 每次都会变化（例如带有动态 token），videoId 也会变化，导致无法记忆，这时你需要一个稳定的 ID。
服务端存储: 对于登录用户，更健壮的方式是将播放位置记录在你的服务器数据库中，这样即使用户换了浏览器或设备，也能继续观看，这需要前端通过 API 与后端进行交互。

通过以上步骤,你就成功地为 DPlayer 添加了简单而实用的记忆播放功能。

dplayer网页播放器 记忆播放功能