Vue.js+VideoJS播放Google Drive视频遇CORS及格式错误求助

问题描述 #

开发Vue.js结合VideoJS的项目时，播放Google Drive存储的视频遭遇CORS错误，控制台报错：

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.

播放器模板代码（已尝试多种URL格式）：

<video width="640" height="300" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
<!-- <source src="https://drive.google.com/uc?id=FILE_ID" type="video/mp4" /> -->
<!-- <source src="https://drive.google.com/uc?export=download&id=FILE_ID" type="video/mp4" /> -->
<!-- <source src="https://drive.google.com/uc?id=FILE_ID&export=download" type="video/mp4" /> -->
<source src="https://drive.google.com/uc?authuser=0&id=FILE_ID&export=download" type="video/mp4" />
</video>

注：目标视频已设置“任何知道链接的互联网用户均可查看”权限，尝试上述多种URL格式后仍无法正常播放。

解决方法 #

1. 改用Google Drive嵌入播放直链 #

Google Drive的uc下载链接默认不支持CORS直接用于video标签，建议替换为嵌入播放格式：

https://drive.google.com/uc?export=view&id=FILE_ID

替换其中的FILE_ID为你的视频文件ID，同时确保文件权限为公开可查看（需确认权限设置生效，有时需要等待几分钟同步）。

2. 自建代理绕过CORS限制 #

如果嵌入直链仍无法解决问题，可通过本地代理转发请求：

• 后端示例（Node.js + Express）：

const express = require('express');
const fetch = require('node-fetch');
const app = express();

app.get('/proxy-video', async (req, res) => {
  const fileId = req.query.id;
  const driveUrl = `https://drive.google.com/uc?export=download&id=${fileId}`;
  
  try {
    const response = await fetch(driveUrl);
    res.setHeader('Content-Type', 'video/mp4');
    res.setHeader('Access-Control-Allow-Origin', '*');
    response.body.pipe(res);
  } catch (err) {
    res.status(500).send('Proxy request failed');
  }
});

app.listen(3001, () => console.log('Proxy server running on port 3001'));

• 前端VideoJS使用代理地址：

<source src="http://localhost:3001/proxy-video?id=FILE_ID" type="video/mp4" />

3. 验证视频编码兼容性 #

确保视频为VideoJS支持的编码格式（H.264视频编码 + AAC音频编码的MP4是最兼容的选择），可通过FFmpeg转换：

ffmpeg -i your-video.mp4 -vcodec libx264 -acodec aac compatible-video.mp4

4. 配置VideoJS跨域参数 #

在Vue组件初始化VideoJS时，添加跨域相关配置：

import videojs from 'video.js';

export default {
  mounted() {
    this.player = videojs('videojs-vr-player', {
      html5: {
        crossorigin: 'anonymous', // 开启匿名跨域请求
        nativeVideoTracks: false,
        nativeAudioTracks: false
      }
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};

内容的提问来源于stack exchange，提问作者Mohammed Marjan