- 语境
在我的 Svelte 应用程序中,我有多个页面,每个页面显示一个或多个视频。为了渲染视频,我重用了一个视频组件(简化):
// video component
<video poster="{source.thumb}">
<source type="{source.mime}" src="{source.source}" >
</video>
主页面通过api接收视频内容并调用视频组件:
// calling video component on main page
<script>
let source = {
thumb: 'thumb.jpg',
source: 'video.mp4',
mime: 'video/mp4',
};
</script>
<Video source={source} />
一切正常,视频已渲染并可播放。
- 问题
但是:当我导航或想用另一个视频替换视频时,旧的视频元素仍然存在并且播放继续。
我可以beforeUpdate()
用来暂停视频。但是,奇怪的是,新视频是在完全相同的播放时间加载的,一切都搞混了。或者,如果我删除 中的视频元素beforeUpdate()
,它不会填充新信息。
这有点道理,因为video
媒体元素保持完全相同,而只有属性和内容发生变化。因此状态和已经缓冲的源仍然存在。
我需要以某种方式确保,当数据更改时,必须完全重新安装视频组件。 有谁知道这是怎么做到的吗?谢谢!