Flutter视频播放插件rad_video_player的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter视频播放插件rad_video_player的使用

通过此插件，您可以轻松在Flutter应用中集成视频播放功能。本示例展示了如何使用rad_video_player插件来播放本地资源和远程视频。

示例代码

以下是一个完整的示例代码，展示如何使用rad_video_player插件在Flutter应用中实现视频播放功能。

1. 主界面

void main() {
  runApp(
    MaterialApp(
      home: _App(),
    ),
  );
}

class _App extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Video player example'),
          actions: [
            IconButton(
              icon: const Icon(Icons.navigation),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => _PlayerVideoAndPopPage(),
                  ),
                );
              },
            )
          ],
          bottom: const TabBar(
            isScrollable: true,
            tabs: [
              Tab(icon: Icon(Icons.cloud), text: "Remote"),
              Tab(icon: Icon(Icons.insert_drive_file), text: "Asset"),
              Tab(icon: Icon(Icons.list), text: "List example"),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            _BumbleBeeRemoteVideo(),
            _ButterFlyAssetVideo(),
            _ButterFlyAssetVideoInList(),
          ],
        ),
      ),
    );
  }
}

2. 播放本地视频

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

class _ButterFlyAssetVideoState extends State<_ButterFlyAssetVideo> {
  late VideoPlayerController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = VideoPlayerController.asset('assets/Butterfly-209.mp4');

    _controller.addListener(() {
      setState(() {});
    });
    _controller.setLooping(true);
    _controller.initialize().then((_) => setState(() {}));
    _controller.play();
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Container(
            padding: const EdgeInsets.only(top: 20.0),
          ),
          const Text('With assets mp4'),
          Container(
            padding: const EdgeInsets.all(20),
            child: AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: Stack(
                alignment: Alignment.bottomCenter,
                children: [
                  VideoPlayer(_controller),
                  _ControlsOverlay(controller: _controller),
                  VideoProgressIndicator(_controller, allowScrubbing: true),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

3. 播放远程视频

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

class _BumbleBeeRemoteVideoState extends State<_BumbleBeeRemoteVideo> {
  late VideoPlayerController _controller;

  Future<ClosedCaptionFile> _loadCaptions() async {
    final String fileContents = await DefaultAssetBundle.of(context)
        .loadString('assets/bumble_bee_captions.srt');
    return SubRipCaptionFile(fileContents);
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
      closedCaptionFile: _loadCaptions(),
      videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true),
    );

    _controller.addListener(() {
      setState(() {});
    });
    _controller.setLooping(true);
    _controller.initialize();
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Container(padding: const EdgeInsets.only(top: 20.0)),
          const Text('With remote mp4'),
          Container(
            padding: const EdgeInsets.all(20),
            child: AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: Stack(
                alignment: Alignment.bottomCenter,
                children: [
                  VideoPlayer(_controller),
                  ClosedCaption(text: _controller.value.caption.text),
                  _ControlsOverlay(controller: _controller),
                  VideoProgressIndicator(_controller, allowScrubbing: true),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

4. 控制栏

class _ControlsOverlay extends StatelessWidget {
  const _ControlsOverlay({Key? key, required this.controller}) : super(key: key);

  static const _examplePlaybackRates = [
    0.25,
    0.5,
    1.0,
    1.5,
    2.0,
    3.0,
    5.0,
    10.0,
  ];

  final VideoPlayerController controller;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Stack(
      children: [
        AnimatedSwitcher(
          duration: Duration(milliseconds: 50),
          reverseDuration: Duration(milliseconds: 200),
          child: controller.value.isPlaying
              ? SizedBox.shrink()
              : Container(
                  color: Colors.black26,
                  child: Center(
                    child: Icon(
                      Icons.play_arrow,
                      color: Colors.white,
                      size: 100.0,
                    ),
                  ),
                ),
        ),
        GestureDetector(
          onTap: () {
            controller.value.isPlaying ? controller.pause() : controller.play();
          },
        ),
        Align(
          alignment: Alignment.topRight,
          child: PopupMenuButton<double>(
            initialValue: controller.value.playbackSpeed,
            tooltip: 'Playback speed',
            onSelected: (speed) {
              controller.setPlaybackSpeed(speed);
            },
            itemBuilder: (context) {
              return [
                for (final speed in _examplePlaybackRates)
                  PopupMenuItem(
                    value: speed,
                    child: Text('${speed}x'),
                  )
              ];
            },
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
              child: Text('${controller.value.playbackSpeed}x'),
            ),
          ),
        ),
      ],
    );
  }
}

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

1 回复

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


rad_video_player 是一个用于 Flutter 的视频播放插件，它提供了简单易用的 API 来播放本地和网络视频。以下是如何在 Flutter 项目中使用 rad_video_player 插件的步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 rad_video_player 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  rad_video_player: ^0.0.1  # 请检查最新版本

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

2. 导入插件

在需要使用视频播放器的 Dart 文件中导入 rad_video_player 插件：

import 'package:rad_video_player/rad_video_player.dart';

3. 使用 RadVideoPlayer

RadVideoPlayer 是一个简单的视频播放器组件，你可以直接在 UI 中使用它。

播放网络视频

class VideoPlayerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player'),
      ),
      body: Center(
        child: RadVideoPlayer(
          videoUrl: 'https://www.example.com/sample.mp4',
          autoPlay: true,
          looping: false,
        ),
      ),
    );
  }
}

播放本地视频

class VideoPlayerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player'),
      ),
      body: Center(
        child: RadVideoPlayer(
          videoUrl: 'assets/videos/sample.mp4',
          autoPlay: true,
          looping: false,
        ),
      ),
    );
  }
}

4. 配置 pubspec.yaml 文件（对于本地视频）

如果你要播放本地视频，确保在 pubspec.yaml 文件中正确配置了资源路径：

flutter:
  assets:
    - assets/videos/sample.mp4

5. 控制视频播放

RadVideoPlayer 提供了一些基本的控制选项，如自动播放、循环播放等。你可以通过设置 autoPlay 和 looping 参数来控制视频的播放行为。

6. 自定义 UI

RadVideoPlayer 也允许你自定义播放器的 UI。你可以通过传递 controller 参数来控制视频播放器的行为，并自定义播放器的外观。

class VideoPlayerScreen extends StatefulWidget {
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  RadVideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = RadVideoPlayerController(
      videoUrl: 'https://www.example.com/sample.mp4',
      autoPlay: true,
      looping: false,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player'),
      ),
      body: Center(
        child: RadVideoPlayer(
          controller: _controller,
        ),
      ),
    );
  }
}

7. 处理视频播放事件

你可以通过监听 RadVideoPlayerController 的事件来处理视频播放过程中的各种事件，如播放、暂停、完成等。

_controller.addListener(() {
  if (_controller.isPlaying) {
    print('Video is playing');
  } else {
    print('Video is paused');
  }
});
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！