在我的 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媒体元素保持完全相同，而只有属性和内容发生变化。因此，状态和已经缓冲的源仍然存在。
我以某种方式需要确保，当数据发生变化时，视频组件必须完全重新安装。 有谁知道这是怎么做到的吗？谢谢！
情况：我在 Wordpress WooCommerce 商店中有一堆可变产品。在前端有一个带有多个选择输入的表单，让用户在将产品添加到购物车之前对其进行配置。价格和其他信息会随着可能的变化而变化，所以我需要跟踪它。
目的：用户更改表单后，Woocommerce 将input.variation_id使用新选择的变体的 ID更新隐藏字段。每当这种情况发生变化时，我都想知道这一点。
显然，有一些东西可以跟踪变化，效果很好：
$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
console.log('form has changed'); // fires correctly
} );
我还可以在更改之前读取该隐藏字段的值：
var id = $('input.variation_id').val();
console.log( id ); // returns correct value
问题：但是当我尝试调用该函数中的值时，我将无法工作。
$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
var id = $('input.variation_id').val();
console.log( id ); // fires, but returns empty
} );
我已经尝试了所有想到的方法。如果我直接在浏览器控制台中输入它，它可以工作，但是当我尝试使用上面的函数获取它时，它是空的。我能做什么？
我以前使用过，$('form.variations_form select').change(...);但它会弄乱变化，我想确保 Woocommerce 在我执行操作之前更新了所有信息。