Flutter视频播放插件flutter_bling_video_player的使用

Flutter视频播放插件flutter_bling_video_player的使用

基本功能如下图

为什么要二次封装 video_player

• 实际开发中如果你的业务仅仅是播放一个视频，那么最好的选择就是使用官方提供的播放器，iOS端使用AVFoundation Android端使用google官方的Exoplayer
• 官方提供video_player 插件功能过于单一，在时间开发中还需要写很多代码，二次封装是为了提高实际业务的开发效率

Installation 安装

dependencies:
  flutter_bling_video_player: ^0.0.1

如何使用

1. 基本使用

播放网络视频

body: const Center(
  child: BlingVideoPlayer.network("https://xxxxx.mp4")
),

本地文件视频播放

body: const Center(
  child: BlingVideoPlayer.file("/var/xxxx/xxx.mp4")
),

工程路径视频播放

body: const Center(
  child: BlingVideoPlayer.assets("assets/video/video1.mp4")
),

以上方式初始化视频播放器，会自动根据视频尺寸比例显示播放器的大小，如下图所示

2. 使用控制器初始化视频播放器

BlingVideoPlayerController? _videoPlayerController;
[@override](/user/override)
void initState() {
  super.initState();
  _videoPlayerController = BlingVideoPlayerController();
  String dataSource =  "assets://assets/video/video.mp4";
  /// 初始化网络视频 必须以http 或者 https开头 https://www.xxxx.mp4
  /// 初始化本地视频 必须以file:// 开头,比如 file://var/xxxx/video.mp4
  /// 初始化assets视频  必须以 assets:// 开头，比如 assets://assets/video/video.mp4
  _videoPlayerController?.setDataSource(dataSource);
}
[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: BlingVideoPlayer(
        controller: _videoPlayerController,
      )
    ),
    // This trailing comma makes auto-formatting nicer for build methods.
  );
}

对于视频文件的初始化也可以使用 BlingVideoPlayerController 提供好的方法

网络视频

_videoPlayerController?.setDataSource("https://www.xxxx.mp4");

本地视频

_videoPlayerController?.setFileSource("/var/xxxx/video.mp4");

工程目录视频

_videoPlayerController?.setAssetsSource("/assets/video/video.mp4");

也可使用setDataSource 加前缀的方式来播放不同类型的视频

_videoPlayerController?.setDataSource("https://www.xxxx.mp4"); /// 网路视频
_videoPlayerController?.setDataSource("file://var/xxxx/video.mp4"); /// 本地视频
_videoPlayerController?.setDataSource("assets://assets/video/video.mp4"); ///工程目录视频

3. 定制播放器

BlingVideoPlayer(
  controller: _videoPlayerController,
  /// 视频初始化的操作是耗时的，可以使用这个builder 给用户一个加载中的提示
  indicatorBuilder: (context, controller) {
    return const CupertinoActivityIndicator();
  },
  ///播放网络视频如果视频正在缓冲，可以使用这个builder 定制缓冲样式
  bufferBuilder: (context, controller) {
    return Container(
      width: 100,
      height: 100,
      alignment: Alignment.center,
      color: Colors.yellow,
      child: const Text("正在缓冲中"),
    );
  },
  /// 视频还没有初始化之前一般会有一张封面图进行占位，可以用这个builder定制占位的widget
  placeholderBuilder: (context, controller) {
    return _placeholder();
  },
  /// 如果视频加载失败或者播放过程中出现了error 可以在这里显示播放错误的widget
  errorWidgetBuilder: (context, error, controller) {
    return Text("视频播放失败了 ${error.toString()}");
  },
  /// 用于定制显示视频播放器的样式，比如播放按钮，进度条等等
  panelBuilder: (context, player, size) {
    return player == null
        ? const SizedBox()
        : VideoPlayPanel(playerController: player);
  },
)

issues

在使用中遇到的任何问题都可以在 github 上的 issues 提出，严重的问题24小时内解决，不严重的问题，一周内解决。

示例代码

import 'package:example/convenient_video_page.dart';

import 'package:flutter/material.dart';

import 'basic_video_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                  return const BasicVideoPage();
                }));
              },
              child: const Text("基本功能"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                  return const ConvenientVideoPage();
                }));
              },
              child: const Text("便捷初始化视频"),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}