如何解决如何使用Swup.js在两页之间转换英雄视频,而无需在页面更改后重新启动视频
我无法使用Swup.js在两页之间转换英雄视频。
目前,我可以使用名为“ transition-wipe”的自定义类转换视频元素,该类可将视频宽度在页面更改时从50%更改为100%,这种方法可以正常工作,但是当加载下一页时视频会重新启动
是否可以在过渡时暂停视频并从上一个停止播放的位置播放下一个视频?我的目的是使视频在页面之间显得动态,并连续播放而无需重新启动。我似乎找不到任何解决方案,因此任何建议将不胜感激! :)
解决方法
您可以使用Web Storage API将视频的位置存储在浏览器中。以下是使用localStorage
获取和设置存储的视频位置的两个抽象。
/**
* Returns 0 or the position of the video.
*/
const getVideoPosition = () => {
return Number(localStorage.getItem('video-position'));
}
/**
* Saves the video in the current position.
*/
const setVideoPosition = value => {
localStorage.setItem('video-position',value);
}
每次重新加载后,选择video元素,获取保存的位置并更新视频的currentTime
属性以从该位置开始。
const position = getVideoPosition();
video.currentTime = position;
让您的视频收听timeupdate
事件以不断保存上一个位置,并ended
事件来重置保存的位置。
video.addEventListener('timeupdate',({ target }) => {
const { currentTime } = target;
setVideoPosition(currentTime);
});
video.addEventListener('ended',({ target }) => {
setVideoPosition(0);
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。