Flutter视频播放器插件fijkplayer_update的使用

Flutter视频播放器插件fijkplayer_update的使用

适配flutter3.10

fijkplayer (Video player plugin for Flutter) Flutter 媒体播放器

手把手带你写 Flutter 系统音量插件Flutter 多版本管理工具 fvm

HitCount     pub package     Action Status    

A Flutter media player plugin for iOS and android based on ijkplayer

您的支持是我们开发的动力。 欢迎Star,欢迎PR~。 Feedback welcomePull Requests 都非常欢迎!

Documentation 文档

Installation 安装

在您的 pubspec.yaml 文件中添加 fijkplayer 作为依赖。

dependencies:
  fijkplayer_update: ^{{latest version}}

替换 {{latest version}} 为上面徽标中的版本号。

如果您想使用未发布到pub的git分支:

dependencies:
  fijkplayer_update:
    git:
      url: https://github.com/befovy/fijkplayer.git
      ref: develop # 可以替换为分支或标签名

Example 示例

以下是一个简单的示例代码,展示如何使用 fijkplayer_update 插件来播放视频。

import 'package:fijkplayer_update/fijkplayer.dart';
import 'package:flutter/material.dart';

class VideoScreen extends StatefulWidget {
  final String url;

  VideoScreen({@required this.url});

  [@override](/user/override)
  _VideoScreenState createState() => _VideoScreenState();
}

class _VideoScreenState extends State<VideoScreen> {
  final FijkPlayer player = FijkPlayer();

  _VideoScreenState();

  [@override](/user/override)
  void initState() {
    super.initState();
    player.setDataSource(widget.url, autoPlay: true);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Fijkplayer Example")),
        body: Container(
          alignment: Alignment.center,
          child: FijkView(
            player: player,
          ),
        ));
  }

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

Contributors 贡献者 ✨

感谢这些优秀的人们(emoji key

本项目遵循 all-contributors 规范。任何形式的贡献都欢迎。

iOS Warning 警告

警告:fijkplayer视频播放器插件在iOS模拟器上不可用。在开发/测试期间必须使用iOS设备。更多详情,请参阅此 issue

Join Ding Talk Group 加入钉钉群

加入钉钉群 微信赞赏码 支付宝
加入钉钉群 微信赞赏码 支付宝二维码

完整示例Demo

以下是一个完整的示例Demo,展示了如何创建一个包含视频播放器的Flutter应用。

import 'package:flutter/material.dart';

import 'video_screen.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Color(0xFFffd54f),
        primaryColorDark: Color(0xFFffc107),
        primaryColorLight: Color(0xFFffecb3),
        dividerColor: Color(0xFFBDBDBD),
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => VideoScreen(url: "https://www.example.com/video.mp4"),
              ),
            );
          },
          child: Text('Play Video'),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用fijkplayer_update插件来实现视频播放功能的代码示例。fijkplayer_updatefijkplayer的一个更新版本或分支,它提供了强大的视频播放功能。

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

dependencies:
  flutter:
    sdk: flutter
  fijkplayer_update: ^x.y.z  # 请替换为实际的版本号

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

接下来,是一个简单的示例,展示如何使用fijkplayer_update来播放视频:

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

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

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

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

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  FijkPlayer _fijkPlayer = FijkPlayer();

  @override
  void initState() {
    super.initState();
    // 设置视频源URL
    String videoUrl = 'https://www.example.com/path/to/your/video.mp4';
    _fijkPlayer.setDataSource(
      dataSource: FijkDataSource.network(videoUrl),
      autoPlay: true,
    );

    // 监听播放状态变化
    _fijkPlayer.setPlayerStateListener((oldState, newState) {
      print("Player state changed from $oldState to $newState");
    });

    // 监听播放进度
    _fijkPlayer.setPositionListener((position, duration) {
      print("Current position: $position, Duration: $duration");
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FijkPlayer Demo'),
      ),
      body: Center(
        child: FijkPlayerWidget(
          player: _fijkPlayer,
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () {
              _fijkPlayer.play();
            },
            tooltip: 'Play',
            child: Icon(Icons.play_arrow),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              _fijkPlayer.pause();
            },
            tooltip: 'Pause',
            child: Icon(Icons.pause),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              _fijkPlayer.seekTo(10000); // 跳转到10秒
            },
            tooltip: 'Seek to 10s',
            child: Icon(Icons.fast_forward),
          ),
        ],
      ),
    );
  }
}

在这个示例中,我们做了以下几件事:

  1. pubspec.yaml文件中添加了fijkplayer_update依赖。
  2. 创建了一个Flutter应用,其中包含一个视频播放器屏幕。
  3. _VideoPlayerScreenState类中初始化了FijkPlayer实例,并设置了视频源URL。
  4. 添加了播放状态监听器和播放进度监听器。
  5. 使用FijkPlayerWidget来显示视频播放器,并添加了几个FloatingActionButton来控制播放(播放、暂停、跳转到10秒)。

确保将videoUrl替换为你自己的视频URL。运行这个应用,你应该能看到视频播放器并控制视频的播放。

回到顶部