Flutter原生视频播放插件abs_native_video_player的使用

Flutter原生视频播放插件abs_native_video_player的使用

Pub

abs_native_video_player 是一个用于在iOS和Android上使用原生实现播放视频的Flutter小部件。

支持情况 Android iOS
版本支持 16+ 9.0+

实现方式

  • 在iOS上，视频使用 AVPlayer 和 AVPlayerLayer 组合来显示。
  • 在Android上，视频使用 MediaPlayer 和 VideoView 组合来显示。

使用方法

加载视频
@override
Widget build(BuildContext context) {
  return NativeVideoPlayerView(
    onViewReady: (controller) async {
      final videoSource = await VideoSource.init(
        path: 'path/to/file',
        type: VideoSourceType,
      );
      await controller.loadVideoSource(videoSource);
    },
  );
}
监听事件
controller.onPlaybackReady.addListener(() {
  // 当视频加载成功且可以播放时触发
  // 此时videoInfo是可用的
  final videoInfo = controller.videoInfo;
  final videoWidth = videoInfo.width;
  final videoHeight = videoInfo.height;
  final videoDuration = videoInfo.duration;
});

controller.onPlaybackStatusChanged.addListener(() {
  final playbackStatus = controller.playbackInfo.status;
  // playbackStatus 可以是 playing, paused 或者 stopped
});

controller.onPlaybackPositionChanged.addListener(() {
  final playbackPosition = controller.playbackInfo.position;
});

controller.onPlaybackEnded.addListener(() {
  // 当视频播放结束时触发
});
自动播放
controller.onPlaybackReady.addListener(() {
  controller.play();
});
循环播放
controller.onPlaybackEnded.addListener(() {
  controller.play();
});

高级用法

完整的使用示例可以在示例应用中查看。

其他项目

更多项目请参见我的所有项目。

致谢

感谢所有赞助者对本项目的大力支持！❤️

感谢 @gideon 创建了此项目！

示例代码

import 'dart:core';

import 'package:flutter/material.dart';
import 'package:native_video_player_example/app-view.dart';

void main() {
  runApp(
    const AppView(),
  );
}

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

1 回复

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


当然，下面是一个关于如何使用Flutter原生视频播放插件abs_native_video_player的示例代码。这个示例将展示如何在Flutter项目中集成和使用这个插件来播放视频。

首先，确保你已经在pubspec.yaml文件中添加了abs_native_video_player依赖：

dependencies:
  flutter:
    sdk: flutter
  abs_native_video_player: ^最新版本号  # 请替换为插件的实际最新版本号

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

接下来，在你的Flutter项目中创建一个页面来使用这个视频播放插件。以下是一个完整的示例：

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

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

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

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

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

  @override
  void initState() {
    super.initState();
    _controller = AbsNativeVideoPlayerController.init();
    _loadVideo();
  }

  void _loadVideo() async {
    String videoUrl = "https://www.example.com/path/to/your/video.mp4";  // 替换为你的视频URL
    await _controller.setDataSource(videoUrl);
    _controller.prepare().then(() {
      if (mounted) {
        setState(() {});
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Native Video Player'),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: AbsNativeVideoPlayer(_controller),
              )
            : Container(
                child: Center(
                  child: CircularProgressIndicator(),
                ),
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_controller.value.isPlaying) {
            _controller.pause();
          } else {
            _controller.play();
          }
        },
        tooltip: 'Play/Pause',
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

解释

  1. 依赖安装：

    • 在pubspec.yaml中添加abs_native_video_player依赖。

  2. 创建主应用：

    • 使用MaterialApp创建主应用，并设置首页为VideoPlayerScreen。

  3. 视频播放器页面：

    • VideoPlayerScreen是一个有状态的组件，用于管理视频播放器的状态。
    • 在initState中初始化AbsNativeVideoPlayerController并加载视频。
    • 使用_loadVideo方法设置视频源并准备视频。
    • 在dispose方法中释放控制器资源。

  4. UI布局：

    • 使用AspectRatio保持视频的正确宽高比。
    • 在视频未初始化时显示一个进度指示器。
    • 添加一个浮动按钮来控制视频的播放和暂停。

请确保将视频URL替换为你自己的视频路径，并根据需要进行进一步的自定义和错误处理。这个示例展示了如何使用abs_native_video_player插件的基本功能。

回到顶部