SpringBoot+Vue3实现阿里云视频点播实现教育网站在上面上传对应的视频，用户开会员以后才能查看视频

news2025/2/28 20:00:50

要使用阿里云视频点播（VOD）实现一个教育网站，其中用户需要成为会员后才能查看视频，这个过程包括上传视频、设置权限控制、构建前端播放页面以及确保只有付费会员可以访问视频内容。
在这里插入图片描述

1. 视频上传与管理

创建阿里云账号：如果你还没有阿里云账号，请先注册一个。
开通视频点播服务：登录阿里云控制台，找到并开通视频点播服务。
上传视频：通过 VOD 提供的 API 或者控制台界面上传你的教育视频。你还可以利用 SDK 来简化集成工作。对于批量上传或自动化流程，建议使用 API。

2. 设置权限控制

生成安全播放凭证：为了保证视频只能被授权用户观看，你需要为每个视频请求生成一个临时的安全播放凭证（Ticket）。这可以通过调用 VOD 的 GetPlayInfo 接口来完成，该接口返回包含有效期内的播放 URL 和签名信息。
- 在 Spring Boot 中，你可以创建一个控制器方法来处理用户的播放请求，并在这个方法内部调用 GetPlayInfo 获取播放凭证。
- 确保在返回播放凭证之前检查用户是否已经登录并且是有效的会员。

3. 构建前端播放页面

选择播放器：阿里云 VOD 支持多种播放器，如 Video.js, CKPlayer 等。你可以根据自己的喜好和技术栈选择合适的播放器。
集成播放器到 Vue.js 应用：将选定的播放器嵌入到你的 Vue.js 前端应用中。当用户点击某个课程时，前端应该向后端发送请求以获取该视频的安全播放凭证。
动态加载视频源：一旦从前端接收到安全播放凭证，就可以将其用于初始化播放器实例，并开始播放视频。

4. 用户认证与授权

实现会员系统：确保你有一个健全的会员管理系统，能够区分普通用户和付费会员。可以使用 Spring Security 来实现基于角色的访问控制（RBAC），从而限制非会员用户对视频资源的访问。
会话管理和令牌验证：每当用户尝试播放视频时，都应验证其会话状态和会员资格。可以考虑使用 JWT（JSON Web Tokens）或其他形式的身份验证机制来保护 API 请求。

示例代码片段

后端 (Spring Boot)

@RestController
@RequestMapping("/api/video")
public class VideoController {

    @Autowired
    private DefaultAcsClient client;

    // 其他必要的依赖注入...

    @GetMapping("/{videoId}")
    public ResponseEntity<VideoPlayResponse> getVideoPlayUrl(@PathVariable String videoId) {
        // 检查用户是否已登录且为会员
        if (!userService.isMember()) {
            return ResponseEntity.status(HttpStatus.FORBIDDEN).body(null);
        }

        try {
            GetPlayInfoRequest request = new GetPlayInfoRequest();
            request.setVideoId(videoId);
            GetPlayInfoResponse response = client.getAcsResponse(request);

            List<GetPlayInfoResponse.PlayInfo> playInfos = response.getPlayInfoList();
            if (playInfos != null && !playInfos.isEmpty()) {
                String playUrl = playInfos.get(0).getPlayURL();
                return ResponseEntity.ok(new VideoPlayResponse(playUrl));
            }
        } catch (ClientException e) {
            // 处理异常...
        }

        return ResponseEntity.notFound().build();
    }
}

class VideoPlayResponse {
    private String playUrl;

    public VideoPlayResponse(String playUrl) {
        this.playUrl = playUrl;
    }

    // getters and setters...
}

前端 (Vue.js)

<template>
  <div>
    <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"></video>
  </div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default {
  name: 'VideoPlayer',
  props: ['videoId'],
  data() {
    return {
      player: null,
      videoUrl: ''
    };
  },
  mounted() {
    this.fetchVideoUrl();
  },
  methods: {
    fetchVideoUrl() {
      const url = `/api/video/${this.videoId}`;
      fetch(url)
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.json();
        })
        .then(data => {
          this.videoUrl = data.playUrl;
          this.initializePlayer();
        })
        .catch(error => console.error('There has been a problem with your fetch operation:', error));
    },
    initializePlayer() {
      this.player = videojs('my-video', {
        sources: [{
          src: this.videoUrl,
          type: 'video/mp4'
        }]
      });
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>