Vue 和 videojs：如何重新加載視頻

Question

在 Vue (3) 中如何重新加載 videojs？

我有以下代碼：

<template>
  <video-js controls="true" preload="auto" ref="video_player" class="video-js vjs-big-play-centered">
  </video-js>
</template>


<script>

    import videojs from 'video.js'

    export default {
       data() {
         return {
          player: null
         };
       },


       mounted() {
          const element = this.$refs.video_player;
          console.log(element);

          this.player = videojs(element, {
             fluid: true,
             responsive: true,
             playbackRates: [0.5, 1, 1.5, 2],
             sources: [
             {
               src: 'url',
               type: 'application/x-mpegURL'
             }]
           })

</script>

我第一次調用它工作的組件。

第二次，因為 url 是相同的（僅更改參數 id），所以組件被重用。 我需要強制重新加載組件，因為處理方法上的 videojs 會破壞 dom。

那么，我如何使用 vue.js 重用視頻播放器或強制組件重新渲染（因此再次調用創建和安裝）？

謝謝

Answer 1

我們將您的組件稱為 videoComponent

<VideoComponent></VideoComponent>

您可以將 key 屬性添加到您的組件。

由於它會在密鑰更改時重新呈現

<VideoComponent :key="someUniqueParamId"></VideoComponent>