Flutter RTMP视频播放插件video_player_rtmp_ext的使用

Flutter RTMP视频播放插件video_player_rtmp_ext的使用

视频播放插件video_player_rtmp_ext

pub

支持RTMP、RTMPS和M3U8直播视频播放。

你的Flutter版本必须大于或等于3.3.2才能使用此插件。

测试链接

  1. http://devimages.apple.com.edgekey.net/streaming/examples/bipbop_4x3/gear2/prog_index.m3u8
  2. rtmp://ns8.indexforce.com/home/mystream
  3. rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp

开始使用

pubspec.yaml文件中添加依赖:

video_player_rtmp_ext: ^last_version

Android

  • 在项目的build.gradle文件中添加以下行:
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
        maven { url "https://maven.aliyun.com/repository/public" }
    }
}
  • 添加minSdkVersion设置为19
defaultConfig {
    minSdkVersion 19
}
  • AndroidManifest.xml文件中添加android:usesCleartextTraffic="true"
<application
    android:usesCleartextTraffic="true"
    ... >
    ...
</application>

iOS

更新youProject/ios/Podfile文件:

target 'Runner' do
  # 更新这一行
  use_frameworks! :linkage => :static
  use_modular_headers!
end

然后运行:

pod install

简单示例

初始化控制器

IJKPlayerController controller = IJKPlayerController.network("http://devimages.apple.com.edgekey.net/streaming/examples/bipbop_4x3/gear2/prog_index.m3u8");

使用小部件

VideoPlayerRtmpExtWidget(
   controller: controller,
   viewCreated: (IJKPlayerController _) {
       controller.play();
   },
)

控制器API

开始播放

controller.play();

暂停播放

controller.pause();

停止播放

controller.stop();

恢复播放

controller.resume();

判断是否正在播放

final isPlaying = await controller.isPlaying;

如果你想播放M3U8视频,请添加以下行(仅限Android)

if(controller.isAndroid){
   await controller.setPlayManager(PlayerFactory.exo2PlayerManager);
}

播放状态变化回调

controller.addListener(onStateChange);

void onStateChange(VideoListenerModel model){
  debugPrint("$model");
  model.when(
    progress: (progress, secProgress, currentPosition, duration) {
      // TODO: 播放进度
    }, 
    playbackState: (playbackState) {
      // TODO: 播放状态
    }, 
    onPlayError: (error) {
      // TODO: 错误回调详细信息
    }
  );
}

更多关于Flutter RTMP视频播放插件video_player_rtmp_ext的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter RTMP视频播放插件video_player_rtmp_ext的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用video_player_rtmp_ext插件来播放RTMP视频的示例代码。这个插件是对Flutter官方video_player插件的扩展,支持RTMP协议的视频播放。

首先,确保你已经在pubspec.yaml文件中添加了video_player_rtmp_ext依赖:

dependencies:
  flutter:
    sdk: flutter
  video_player_rtmp_ext: ^最新版本号  # 请替换为实际最新版本号

然后,运行flutter pub get来安装依赖。

接下来,在你的Flutter项目中,你可以按照以下步骤使用video_player_rtmp_ext插件来播放RTMP视频。

1. 导入必要的包

在你的Dart文件中导入必要的包:

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

2. 创建一个视频播放器控制器

在你的State类中,创建一个VideoPlayerControllerRtmp实例:

class _MyVideoPlayerState extends State<MyVideoPlayer> {
  late VideoPlayerControllerRtmp _controller;

  @override
  void initState() {
    super.initState();
    // 初始化RTMP视频播放器控制器
    _controller = VideoPlayerControllerRtmp.network(
      'rtmp://your_rtmp_server_url/your_stream_key',
    )
      ..initialize().then((_) {
        // 确保视频初始化完成后开始播放
        setState(() {});
        _controller.play();
      }).catchError((error, stackTrace) {
        // 处理错误
        print('视频初始化失败: $error');
      });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RTMP视频播放'),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayerRtmp(_controller),
              )
            : Container(
                child: CircularProgressIndicator(),
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

3. 在你的主文件中使用这个组件

在你的主文件(如main.dart)中,使用这个视频播放器组件:

import 'package:flutter/material.dart';
import 'my_video_player.dart';  // 假设你将上面的代码放在了一个名为my_video_player.dart的文件中

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyVideoPlayer(),
    );
  }
}

总结

以上代码展示了如何在Flutter中使用video_player_rtmp_ext插件来播放RTMP视频。你需要初始化一个VideoPlayerControllerRtmp实例,并在UI中使用VideoPlayerRtmp小部件来显示视频。同时,你可以通过控制器来控制视频的播放和暂停。

请注意,由于RTMP协议的使用可能受到网络环境和RTMP服务器配置的影响,因此在实际应用中可能需要对错误处理和重试逻辑进行进一步的优化。

回到顶部