如果 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 它根本没有被获取。

总而言之，如何让浏览器只加载一次视频并cache/store它。

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>

DOCS

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

how load video only once if a modal is dynamic in vuejs3/vite?

javascript

prefetch

html5-video

vuejs3

vite