1
  • 语境

在我的 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媒体元素保持完全相同,而只有属性和内容发生变化。因此状态和已经缓冲的源仍然存在。

我需要以某种方式确保,当数据更改时,必须完全重新安装视频组件。 有谁知道这是怎么做到的吗?谢谢!

4

2 回答 2

2

经过一些试验和错误并在@voscausa 的帮助下,它现在可以工作了:

<script>
    export let source;

    let renderVideo = true;

    $: { reMountVideo( source.source ) }
    function reMountVideo(){
        renderVideo = false;
        setTimeout(() => renderVideo = true, 0);
    }
</script>
{#if renderVideo === true}
    <video poster="{source.thumb}">
        <source type="{source.mime}" src="{source.source}" >
    </video>
{/if}

它检查视频 url 是否更改,如果是,则触发reMountVideo().

于 2019-11-15T18:46:14.813 回答
1

我遇到了同样的问题<input type="file" ....> 并使用以下方法解决了它:

let video = true:
function reMountVideo() {
  video = false; 
  setTimeout(() => video = true, 0);
} 

{#if video }
  <Video source={source} />
{/if}

我没有尝试$destroy

于 2019-11-15T15:27:55.637 回答