Flutter video_player 包在鸿蒙平台的使用指南

Flutter官方视频插件video_player支持跨平台视频播放功能，包括iOS、Android、Web和鸿蒙平台。该插件提供网络/本地视频播放、播放控制、事件监听等完整功能。鸿蒙平台需通过Git引入依赖并配置网络权限，应用级别需设为system_basic。核心类VideoPlayerController负责视频控制，VideoPlayer显示视频内容。开发者可通过示例代码快速集成视频播放功

爸爸619

741人浏览 · 2025-12-18 13:40:14

爸爸619 · 2025-12-18 13:40:14 发布

1. 插件介绍

video_player 是 Flutter 官方提供的视频播放插件，它允许开发者在 Flutter 应用中轻松集成视频播放功能。在这里插入图片描述

该插件具有以下特点：

1.1 功能特点

跨平台支持：支持 iOS、Android、Web 和鸿蒙平台，实现一套代码多端运行
多种数据源：支持网络视频、本地文件和应用资源视频
完整的控制功能：提供播放、暂停、音量调节、播放速度调整、进度跳转等控制能力
事件监听：支持监听视频初始化、播放完成、缓冲状态、播放状态变化等事件
自适应布局：视频组件可自适应各种屏幕尺寸和布局要求

1.2 鸿蒙平台支持

基于 video_player@2.7.1 版本开发
支持鸿蒙 API 12+
提供完整的视频播放功能和控制能力
需要特定的权限配置和应用级别设置

2. 依赖配置

2.1 以 Git 形式引入依赖

由于这是自定义修改的版本，需要通过 Git 形式引入。在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  video_player:
    git:
      url: https://gitcode.com/openharmony-tpc/flutter_packages.git
      path: packages/video_player/video_player

2.2 执行依赖获取

添加依赖后，执行以下命令获取包：

flutter pub get

3. 鸿蒙平台特定配置

3.1 权限配置

在鸿蒙平台上使用 video_player 需要配置网络权限：

3.1.1 修改 `module.json5` 文件

打开 entry/src/main/module.json5 文件，添加网络权限配置：

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET",
    "reason": "$string:network_reason",
    "usedScene": {
      "abilities": [
        "EntryAbility"
      ],
      "when": "inuse"
    }
  },
]

3.1.2 修改 `string.json` 文件

打开 entry/src/main/resources/base/element/string.json 文件，添加权限申请理由：

{
  "string": [
    {
      "name": "network_reason",
      "value": "use network"
    }
  ]
}

3.2 应用级别设置

根据鸿蒙平台要求，需要将应用级别设置为 system_basic。具体操作可参考鸿蒙开发文档。

4. API 调用

4.1 核心类介绍

VideoPlayerController

视频播放的主要控制器，负责视频的加载、播放控制和状态管理。

// 网络视频
final controller = VideoPlayerController.network('https://example.com/video.mp4');

// 本地文件
final controller = VideoPlayerController.file(File('path/to/video.mp4'));

// 应用资源
final controller = VideoPlayerController.asset('assets/video.mp4');

VideoPlayer

用于显示视频内容的 Widget。

VideoPlayer(controller)

VideoProgressIndicator

用于显示视频播放进度的 Widget。

VideoProgressIndicator(
  controller,
  allowScrubbing: true,
  colors: VideoProgressColors(
    playedColor: Colors.red,
    bufferedColor: Colors.grey,
    backgroundColor: Colors.black,
  ),
)

4.2 常用方法

方法	描述
`initialize()`	初始化视频播放器，返回 Future
`play()`	开始播放视频
`pause()`	暂停播放视频
`setVolume(double volume)`	设置音量（0.0-1.0）
`setPlaybackSpeed(double speed)`	设置播放速度
`seekTo(Duration position)`	跳转到指定位置
`dispose()`	释放资源

4.3 事件监听

controller.addListener(() {
  // 监听播放状态变化
  if (controller.value.isPlaying) {
    // 视频正在播放
  }
  
  // 监听视频是否初始化完成
  if (controller.value.isInitialized) {
    // 视频已初始化
  }
  
  // 监听缓冲状态
  if (controller.value.isBuffering) {
    // 视频正在缓冲
  }
});

5. 完整示例

下面是一个在鸿蒙平台上使用 video_player 包的完整示例：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Player Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const VideoPlayerScreen(),
    );
  }
}

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

  @override
  State<VideoPlayerScreen> createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late VideoPlayerController _controller;
  late Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    super.initState();

    // 创建网络视频控制器
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    );

    // 初始化视频播放器
    _initializeVideoPlayerFuture = _controller.initialize();

    // 设置循环播放
    _controller.setLooping(true);
  }

  @override
  void dispose() {
    // 释放资源
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Video Player Demo'),
      ),
      body: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // 视频已初始化完成，显示视频
            return AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            );
          } else {
            // 视频正在初始化，显示加载指示器
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            // 切换播放/暂停状态
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              _controller.play();
            }
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          padding: const EdgeInsets.all(8.0),
          child: VideoProgressIndicator(
            _controller,
            allowScrubbing: true,
            colors: const VideoProgressColors(
              playedColor: Colors.blue,
              bufferedColor: Colors.grey,
              backgroundColor: Colors.black,
            ),
          ),
        ),
      ),
    );
  }
}