uniapp视频播放时间缓存播放
时间: 2025-03-27 17:32:08 浏览: 42
### 实现 UniApp 中视频播放进度保存与恢复
为了实现在 UniApp 中视频播放进度的保存与恢复功能,主要思路是在特定时间点(如暂停或关闭页面时)记录当前播放位置,并在下次启动应用或进入该页面时读取并设置此位置。具体方法如下:
#### 使用本地存储 API 进行数据持久化
通过 `uni.setStorageSync` 和 `uni.getStorageSync` 方法来同步地写入和获取缓存数据[^1]。
```javascript
// 记录当前播放位置至本地存储
function savePlayPosition(position) {
uni.setStorageSync('video_position', position);
}
// 获取之前保存的播放位置
function getSavedPosition() {
return uni.getStorageSync('video_position') || 0;
}
```
#### 绑定视频组件事件监听器
利用 `bindtimeupdate` 属性绑定定时更新事件处理器,在每次播放进度发生变化时调用上述函数保存最新位置;同时也要处理页面卸载前的情况以确保不会丢失最后的位置信息[^3]。
```html
<template>
<view class="container">
<!-- 其他代码 -->
<video id="myVideo" @timeupdate="onTimeUpdate"></video>
</view>
</template>
<script>
export default {
methods: {
onTimeUpdate(event) {
const currentPosition = event.target.currentTime;
savePlayPosition(currentPosition); // 调用上面定义的方法
},
onPageUnload() { // 页面即将被销毁时执行的操作
let videoElement = this.$refs.myVideo; // 假设已给 video 设置 ref=myVideo
if (videoElement && !isNaN(videoElement.duration)) {
savePlayPosition(videoElement.currentTime);
}
}
},
onLoad() {
// 初始化加载时尝试恢复之前的播放位置
let savedPos = getSavedPosition();
setTimeout(() => {
document.getElementById('myVideo').currentTime = parseFloat(savedPos);
}, 500); // 短暂延迟是为了等待 DOM 完全渲染完成后再调整时间轴
}
};
</script>
```
以上实现了基本的需求——即能够记住用户上一次观看的位置并在重新打开应用程序时自动跳转到那个地方继续播放。需要注意的是这里假设了 HTML `<video>` 标签的存在以及其默认行为适用于大多数情况下的需求。
阅读全文
相关推荐


















