HarmonyOS鸿蒙Next中flutter视频渲染播放

HarmonyOS鸿蒙Next中flutter视频渲染播放 现阶段需要在flutter 进行vap插件开发，华为回复不支持此插件 视频播放有三种方式

  1. flutter 原生控件播放视频（应该不支持）
  2. flutter拿到视频帧（native 解码获取），在flutter播放
  3. flutter 传递窗口到native；native进行渲染

请问华为现在支持那种视频渲染方式？推荐使用那种？

最好给一个demo,谢谢

3 回复

可以参考官方库的https://gitee.com/openharmonysig/flutter_packages/tree/master/packages/video_player/video_player_ohos实现

avplayer不支持指定
可以使用自研播放器，鸿蒙 avcodec 模块结合Xcomponent送显播放，参考文档
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/obtain-supported-codecs-V5

avplayer播放，先是硬解，硬解资源都被占用，底层切软解，avplayer是软渲染。

渲染是走GPU或者DSS， opengles属于硬渲染
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/opengles-V5

查看设备的资源占用率可参考以下链接
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-hidebug-V5#hidebuggetcpuusage9

更多关于HarmonyOS鸿蒙Next中flutter视频渲染播放的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在HarmonyOS鸿蒙Next中，Flutter视频渲染播放可以通过使用flutter_webrtc或video_player插件实现。flutter_webrtc支持WebRTC协议，适用于实时视频通信场景。video_player插件支持本地和网络视频播放，可通过VideoPlayerController控制播放状态、音量、速度等。

在鸿蒙Next中，确保Flutter SDK已正确配置，并在pubspec.yaml中添加所需插件依赖。例如，添加video_player插件依赖：

dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.4.0

在Dart代码中导入插件并初始化VideoPlayerController，设置数据源为网络或本地文件。使用VideoPlayer widget渲染视频，并通过Chewie插件提供自定义播放控件。

示例代码：

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

class VideoPlayerScreen extends StatefulWidget {
  [@override](/user/override)
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

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

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network('https://www.example.com/sample.mp4')
      ..initialize().then((_) {
        setState(() {});
      });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player'),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : CircularProgressIndicator(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}
``

在鸿蒙Next中，Flutter视频渲染播放的实现与Android和iOS平台一致，只需确保鸿蒙Next支持Flutter框架及相关插件。

在HarmonyOS鸿蒙Next中，使用Flutter进行视频渲染播放可以通过以下步骤实现：

  1. 使用video_player插件：这是Flutter官方推荐的视频播放插件，支持多种视频格式和播放控制。

  2. 集成插件：在pubspec.yaml中添加video_player依赖，并运行flutter pub get进行安装。

  3. 初始化播放器：在代码中引入video_player，并初始化VideoPlayerController，指定视频源（本地文件或网络URL）。

  4. 构建UI：使用VideoPlayer widget将视频渲染到屏幕上，并通过AspectRatio控制视频的宽高比。

  5. 控制播放：通过play、pause、seekTo等方法实现播放控制。

  6. 资源释放：在页面销毁时调用dispose方法释放播放器资源，避免内存泄漏。

通过以上步骤，你可以在HarmonyOS鸿蒙Next中高效地使用Flutter进行视频渲染播放。

回到顶部