CKPlayer 是一个流行的 HTML5 视频播放器，支持多种功能，包括自动跳转到上次播放位置，要实现这个功能，你需要在页面加载时获取上次播放的位置，并在播放器初始化时设置该位置。
以下是一个简单的示例，演示如何使用 CKPlayer 并实现自动跳转到上次播放位置的功能：
1、引入 CKPlayer:
确保你已经引入了 CKPlayer 的 JavaScript 和 CSS 文件，你可以从 CKPlayer 的官方网站下载这些文件，或者使用 CDN。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CKPlayer Example</title>
<!-引入 CKPlayer 的 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ckplayer@latest/ckplayer.css">
</head>
<body>
<!-视频容器 -->
<div id="videoContainer"></div>
<!-引入 CKPlayer 的 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/ckplayer@latest/ckplayer.js"></script>
<script>
// 获取上次播放的位置
function getLastPlayPosition() {
return localStorage.getItem('lastPlayPosition') || 0;
}
// 保存当前播放的位置
function saveCurrentPlayPosition(position) {
localStorage.setItem('lastPlayPosition', position);
}
// 初始化 CKPlayer
window.onload = function () {
var videoUrl = 'path/to/your/video.mp4'; // 替换为你的视频路径
var lastPosition = parseFloat(getLastPlayPosition());
var player = new CKPLAYER({
video: videoUrl,
container: 'videoContainer',
autoplay: true,
seek: lastPosition, // 设置上次播放的位置
events: {
'timeupdate': function (e) {
saveCurrentPlayPosition(e.currentTime);
}
}
});
};
</script>
</body>
</html>2、解释代码:
getLastPlayPosition 函数用于从localStorage 中获取上次播放的位置，如果不存在，则返回 0。
saveCurrentPlayPosition 函数用于将当前播放的位置保存到localStorage 中。
在window.onload 事件中，初始化 CKPlayer，并将seek 参数设置为上次播放的位置。
通过监听timeupdate 事件，实时保存当前播放的位置。
3、注意事项:
确保你的浏览器支持localStorage。
替换videoUrl 为你的实际视频路径。
你可以根据需要调整其他 CKPlayer 的配置选项。
这样，每次用户访问页面时，CKPlayer 都会自动跳转到上次播放的位置，提供更好的用户体验。