http://www.syc.com.cn
0xffffff
20 20 auto auto
"/>
上面代码是播放器的HTML代码，现在要使用javaScript可以控制播放器 播放，暂停，影片跳转到需要的时间位置以及获取当前播放视频的时间位置，把当前播放位置记录到cookie里面，下次打开这个视频的时候直接获取cookie里面的时间位置设置当前播放视频位置，继续上次的播放位置，达到断点续播的要求，有javascript操作上面那个播放器的例子吗？在网上都没找到API或者有关这方面的例子，求大神们指教
分享
以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。
这是一个简单的JavaScript示例，它可以在你的播放器上实现断点续播功能。在这个示例中，我们使用了HTML5的<video>标签和<source>元素来加载FLV视频。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Player</title>
<style>
#player {
width: 100%;
height: 400px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="player"></div>
<script src="https://unpkg.com/video.js@6.7.1/dist/video.min.js"></script>
<script>
const video = new Video({
controls: true,
autoplay: false,
loop: false,
muted: false,
preload: 'auto',
poster: 'http://www.syc.com.cn/image/poster.png'
});
// 加载FLV视频
video.load('http://example.com/flv/video.flv');
// 设置视频时间线的位置
video.timeLine().set(10, 10);
// 添加事件监听器以处理播放状态改变
video.on('play', () => {
console.log('Playing');
});
video.on('pause', () => {
console.log('Pausing');
});
video.on('ended', () => {
console.log('Ended');
});
video.on('timeupdate', (event) => {
console.log(`Time updated to ${event.time}`);
});
video.on('seeked', (event) => {
console.log(`Seeked to ${event.position}`);
});
// 获取当前播放位置并将其保存到cookie
function savePositionToCookie() {
if (!navigator.cookieEnabled) return;
document.cookie = `current_position=${video.currentTime}`;
alert("Current position saved to cookie");
}
// 播放到指定时间
function playAtTime(time) {
video.seekTo(time);
}
// 播放到指定位置
function playAtPoint(point) {
video.setPosition(point);
}
// 获取当前播放位置
function getCurrentPosition() {
return video.currentTime;
}
// 清除cookie中的当前播放位置信息
function clearCookie() {
if (!navigator.cookieEnabled) return;
document.cookie = `current_position=`;
alert("Current position cleared from cookie");
}
// 点击播放按钮时触发
document.getElementById('play').addEventListener('click', () => {
if (video.playing()) {
video.pause();
} else {
video.play();
}
});
// 点击暂停按钮时触发
document.getElementById('pause').addEventListener('click', () => {
video.pause();
});
// 点击停止按钮时触发
document.getElementById('stop').addEventListener('click', () => {
video.stop();
});
// 点击下一帧按钮时触发
document.getElementById('next').addEventListener('click', () => {
playAtTime(video.currentTimelineIndex());
});
// 点击上一帧按钮时触发
document.getElementById('prev').addEventListener('click', () => {
playAtTime(video.previousTimelineIndex());
});
// 点击播放到指定位置按钮时触发
document.getElementById('goto').addEventListener('click', () => {
playAtPoint(document.getElementById('point').value);
});
// 点击清除当前位置按钮时触发
document.getElementById('clear').addEventListener('click', () => {
clearCookie();
});
// 点击重置播放位置按钮时触发
document.getElementById('reset').addEventListener('click', () => {
video.reset();
});
</script>
</body>
</html>
请注意，这个示例没有包括完整的CSS样式或媒体查询，你可以根据需要添加它们。此外，由于浏览器的安全限制，你可能无法在所有浏览器中看到所有的效果。
分享
