如何优化多上传视频预览：用单个video元素实现切换展示

我有三类可上传的视频，预览区需要在上传多个视频时切换展示对应视频。现有实现通过多个带v-if/v-else-if的<video>元素实现功能，希望优化为单个<video>元素来完成。

现有模板代码：

<video v-if="uploadedVideos.attractVideoUltra == true && videoUltraType == 'attractVideoUltra'" :key="1"
       autoplay="autoplay" muted loop controls class="theme-tournament-video-ultra">
  <source :src="videoPreviewLocationUltra">
</video>
<video v-else-if="uploadedVideos.contestVideoUltra == true && videoUltraType == 'contestVideoUltra'"
       :key="2" autoplay="autoplay" muted loop controls class="theme-tournament-video-ultra">
  <source :src="videoPreviewLocationUltra">
</video>
<video v-else-if="uploadedVideos.rankingVideoUltra == true && videoUltraType == 'rankingVideoUltra'"
       :key="3" autoplay="autoplay" muted loop controls class="theme-tournament-video-ultra">
  <source :src="videoPreviewLocationUltra">
</video>
<div v-else :style="{ width: '860px', height: '239px', 'background-color': 'grey' }"> 

对应计算属性代码：

videoPreviewLocationUltra() {
  const asset = this.selectedTheme.getAsset({ identifier: this.selectedTheme.videos[this.videoUltraType] });
  if (asset) {
    return asset.location;
  }
} 

只需要保留单个<video>元素，利用Vue响应式特性动态控制显示和视频源，具体修改如下：

1. 简化模板代码 #

将多个<video>合并为一个，通过动态属性判断当前选中视频是否已上传：

<video v-if="uploadedVideos[videoUltraType]"
       autoplay muted loop controls class="theme-tournament-video-ultra">
  <source :src="videoPreviewLocationUltra">
</video>
<div v-else :style="{ width: '860px', height: '239px', 'background-color': 'grey' }"> 

核心优化点： #

• 用uploadedVideos[videoUltraType]替代冗余的多条件判断，因为videoUltraType的取值正好对应uploadedVideos中的属性名，实现动态判断当前选中视频的上传状态。
• 移除:key属性，单个<video>元素无需通过key强制重渲染。
• 简化原生HTML属性写法，autoplay直接写属性名即可，无需赋值。

2. 计算属性保持不变 #

原有的videoPreviewLocationUltra已经基于videoUltraType动态获取视频地址，当videoUltraType切换时，Vue会自动响应更新<source>的src属性，<video>元素会自动加载并播放新的视频源。

可选：添加视频加载状态优化 #

如果需要提升用户体验，可以给<video>添加加载状态监听：

<video v-if="uploadedVideos[videoUltraType]"
       autoplay muted loop controls class="theme-tournament-video-ultra"
       @loadstart="videoLoaded = false"
       @loadeddata="videoLoaded = true">
  <source :src="videoPreviewLocationUltra">
  <span v-if="!videoLoaded">视频加载中...</span>
</video>
<div v-else :style="{ width: '860px', height: '239px', 'background-color': 'grey' }"> 

同时在组件的data中添加状态变量：

data() {
  return {
    // 其他数据...
    videoLoaded: false
  }
}

内容的提问来源于stack exchange，提问作者Seppe Everaet