如果模态在 vuejs3/vite 中是动态的，如何只加载一次视频？

Question

我在优化 Vuejs3/Vite 和 Aframe 中构建的应用程序的性能时遇到问题。 我需要以某种方式预取 6 个视频。 问题是每次我打开一个模式时，浏览器都会再次获取一个视频。 我希望浏览器只获取一次并以某种方式存储它。

我的应用程序应该是这样的。 主页有 6 个按钮。 单击时，每个按钮都会打开一个模式。 在模态中有 6 个视频。 因此，当用户单击第二个按钮时，模式会打开，其中只有第二个视频自动播放。 当用户单击“关闭”按钮时，模式关闭并且视频暂停。

现在我的代码看起来像这样：HTML 模板

// 6 button-images like this
<a-image
   class="link"
   src="/play-new.png"
   sound="on: click; src: #click-sound"
   @click="openVideo(0)"
   position="-5 1.5 -4.5"
   rotation="0 60 0"
></a-image>

// Modal
  <div
    v-show="isModalOpen"
    class=""

    <div v-for="(video, i) in videos" :key="i">
    <video :src="video.file" loop class="block" :class="i === currentVideo ? 'play' : 'hidden'" v-show="$nextTick(() => i === currentVideo && play(i))" />
     <div class="">
        <button @click="hideVideo" class="">X</button>
     </div>
    </div>
 </div>

我的 JS：

<script setup>

import { ref } from 'vue'

const videos = [ {
  file: 'videos/1.mp4',
},
{
  file: 'videos/2.mp4'
},
{
  file: 'videos/3.mp4'
},
{
  file: 'videos/4.mp4'
},
{
  file: 'videos/5.mp4'
},
{
  file: 'videos/6.mp4'
}
];

const currentVideo = ref(-1);

const isModalOpen = ref(false);

function openVideo(videoIndex) {
  currentVideo.value = videoIndex; //videos[videoIndex].file;
  isModalOpen.value = true;
}

function hideVideo() {
  document.querySelector('.play').pause();
  currentVideo.value = -1;
  isModalOpen.value = false;
}

function play(index) {
  if (index == currentVideo.value) {
    document.querySelector('.play').play();
    return true;
  } 
  return false;
}

</script>

这是我重新启动页面并打开模式后我的网络选项卡的样子。 初始负载为红色。 模态打开是绿色的。

到目前为止我已经尝试过：而不是v-if我让它与v-show一起工作，因为使用 v-if 它根本没有被获取。

总而言之，我如何让浏览器只加载一次视频并缓存/存储它。

Answer 1

用<keep-alive>包装你的组件应该可以工作：

// Modal
  <div
    v-show="isModalOpen"
    class=""

    <div v-for="(video, i) in videos" :key="i">
    <keep-alive>
        <video :src="video.file" loop class="block" :class="i === currentVideo ? 'play' : 'hidden'" v-if="$nextTick(() => i === currentVideo && play(i))" />
    </keep-alive>
     <div class="">
        <button @click="hideVideo" class="">X</button>
     </div>
    </div>
 </div>

文档