如何在Flutter/Dart应用中添加非YouTube来源的视频？

一、依赖准备 #

先在pubspec.yaml里添加常用的视频播放插件：

dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.8.1 # 用pub上的最新版本
  chewie: ^1.7.0 # 可选，自带播放控件，省去自己开发UI的麻烦

添加后执行flutter pub get拉取依赖。

二、平台权限配置 #

• Android：打开android/app/src/main/AndroidManifest.xml，添加网络权限（播放网络视频需要）：

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

• iOS：打开ios/Runner/Info.plist，添加以下配置允许网络请求：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

三、实现视频播放页面（非主页面） #

直接写一个带状态的Widget，处理视频的初始化和资源释放：

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:chewie/chewie.dart';

class VideoPlayerPage extends StatefulWidget {
  final String videoUrl; // 从外部传入视频地址

  const VideoPlayerPage({super.key, required this.videoUrl});

  @override
  State<VideoPlayerPage> createState() => _VideoPlayerPageState();
}

class _VideoPlayerPageState extends State<VideoPlayerPage> {
  late VideoPlayerController _videoController;
  late ChewieController _chewieController;

  @override
  void initState() {
    super.initState();
    // 初始化网络视频控制器
    _videoController = VideoPlayerController.networkUrl(
      Uri.parse(widget.videoUrl),
    )..initialize().then((_) {
        setState(() {});
        // 配置播放控件
        _chewieController = ChewieController(
          videoPlayerController: _videoController,
          autoPlay: false, // 不自动播放
          looping: false, // 不循环
          showControls: true, // 显示播放控件
          materialProgressColors: ChewieProgressColors(
            playedColor: Colors.blue,
            handleColor: Colors.blueAccent,
            backgroundColor: Colors.grey,
            bufferedColor: Colors.lightBlue,
          ),
        );
      });
  }

  @override
  void dispose() {
    // 页面销毁时释放资源，避免内存泄漏
    _videoController.dispose();
    _chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('视频播放'),
      ),
      body: Center(
        child: _videoController.value.isInitialized
            ? Chewie(controller: _chewieController) // 加载完成显示视频
            : const CircularProgressIndicator(), // 加载中显示转圈
      ),
    );
  }
}

四、跳转到视频播放页面 #

在任意页面通过导航跳转，比如主页面加个按钮：

ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => VideoPlayerPage(
          videoUrl: 'https://example.com/your-video.mp4', // 替换成实际视频链接
        ),
      ),
    );
  },
  child: const Text('打开视频'),
)

额外提示 #

• 如果播放本地视频，把VideoPlayerController.networkUrl换成VideoPlayerController.asset('assets/video.mp4')（需在pubspec.yaml配置assets），或者VideoPlayerController.file(File('本地文件路径'))。
• 确保视频格式是video_player支持的，比如MP4、HLS等常见格式。

内容的提问来源于stack exchange，提问作者نبيل سليمان