SpringBoot+Vue+ElementUI 实现视频播放 轮播图效果

在SpringBoot后端，你需要提供一个API来获取视频文件的列表，并在Vue前端，使用ElementUI的轮播图组件实现视频的播放。以下是简化的代码示例：

后端SpringBoot Controller层：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Arrays;
import java.util.List;
 
@RestController
public class VideoController {
 
    @GetMapping("/videos")
    public List<String> getVideos() {
        // 假设你有一个视频文件列表
        List<String> videos = Arrays.asList(
            "video1.mp4",
            "video2.mp4",
            "video3.mp4"
        );
        return videos;
    }
}

前端Vue层：

<template>
  <el-carousel :interval="5000" type="card" height="400px">
    <el-carousel-item v-for="video in videos" :key="video">
      <video :src="getVideoUrl(video)" controls width="100%"></video>
    </el-carousel-item>
  </el-carousel>
</template>
 
<script>
export default {
  data() {
    return {
      videos: []
    };
  },
  created() {
    this.fetchVideos();
  },
  methods: {
    fetchVideos() {
      // 调用后端API获取视频列表
      this.axios.get('/videos').then(response => {
        this.videos = response.data;
      }).catch(error => {
        console.error('Error fetching videos:', error);
      });
    },
    getVideoUrl(videoName) {
      // 视频文件的服务器路径
      return `http://your-server-path/videos/${videoName}`;
    }
  }
};
</script>

确保你的SpringBoot应用配置了对应的视频文件存储路径，并且Vue前端可以访问到这些视频文件。这个例子中，视频文件存放在服务器的某个路径下，并且服务器对应的Controller提供了一个API来获取视频文件列表。Vue前端通过调用这个API，并使用ElementUI的el-carousel组件来展示轮播图效果。每个视频播放器都使用了HTML5的<video>标签，并通过Vue的数据绑定来动态加载视频源。