Flutter播放Vimeo视频失败求助：求可行方案及代码示例

首先，你的报错核心原因很明确：你传入VideoPlayerController.network的是Vimeo的网页链接（https://vimeo.com/{some-video-id}），而不是视频的直接媒体资源URL。video_player插件只能解析视频文件的直链（比如.mp4、.m3u8这类），无法直接加载网页，所以才会返回404错误。

下面给你两种可行的解决方案，附带完整代码示例：

方案1：用WebView嵌入Vimeo官方播放器（最简单） #

直接使用WebView加载Vimeo的官方嵌入播放器，这种方式不需要处理视频源的获取逻辑，兼容性最好。

步骤： #

1. 在pubspec.yaml中添加webview_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.0 # 可替换为最新版本

2. 替换你的代码为以下实现：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(const VideoApp());

class VideoApp extends StatefulWidget {
  const VideoApp({super.key});

  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  late WebViewController _webViewController;
  final String vimeoVideoId = "你的视频ID"; // 替换成实际的Vimeo视频ID

  @override
  void initState() {
    super.initState();
    _webViewController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse("https://player.vimeo.com/video/$vimeoVideoId"));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Vimeo Video Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Vimeo 视频播放')),
        body: WebViewWidget(controller: _webViewController),
      ),
    );
  }
}

注意事项： #

• Android端需要在android/app/src/main/AndroidManifest.xml中添加互联网权限：

<uses-permission android:name="android.permission.INTERNET" />

• iOS端默认允许HTTPS请求，无需额外配置。

方案2：使用专门的Vimeo插件（更原生体验） #

如果想要更接近原生视频播放器的体验，可以使用vimeo_player插件，它会自动获取Vimeo的视频源，底层基于video_player实现。

步骤： #

1. 在pubspec.yaml中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  vimeo_player: ^0.4.0 # 可替换为最新版本

2. 代码示例：

import 'package:flutter/material.dart';
import 'package:vimeo_player/vimeo_player.dart';

void main() => runApp(const VideoApp());

class VideoApp extends StatefulWidget {
  const VideoApp({super.key});

  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  late VimeoPlayerController _controller;
  final String vimeoVideoId = "你的视频ID"; // 替换成实际的Vimeo视频ID

  @override
  void initState() {
    super.initState();
    _controller = VimeoPlayerController(
      videoId: vimeoVideoId,
      autoPlay: false,
      looping: false,
    )..initialize().then((_) {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Vimeo Video Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Vimeo 原生播放')),
        body: Center(
          child: _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VimeoPlayer(_controller),
                )
              : const CircularProgressIndicator(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}

注意事项： #

• 部分私有Vimeo视频需要配置访问令牌，你可以在Vimeo开发者平台生成令牌后，传入VimeoPlayerController的accessToken参数。

内容的提问来源于stack exchange，提问作者Teekam Suthar