在使用Flutter视频播放组件时，最开始我使用了官方组件video_player，但是在使用时遇到了报错，查看Github和Google并没有解决，于是我在Flutter组件仓库中查找，最后选择了使用flutter_ijkplayer。

选择原因

• 兼容视频格式多，可自行编译
• 可以定制自己的UI
• 该组件是基于bilibili/ijkplayer，本人对B站挺有好感的
• 使用方便，有中文文档

简介

GitHub地址：https://github.com/CaiJingLong/flutter_ijkplayer

使用

引入

# pubspec.yaml
dependencies:
  flutter_ijkplayer: ${lastes_version}

页面使用

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

class VideoInfoPage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => VideoInfoState();
}

class VideoInfoState extends State<VideoInfoPage> {

  String selectPlayUrl = '';

  // 定义控制器
  IjkMediaController controller = IjkMediaController();

  @override
  void initState() {
    super.initState();
    getVideoInfo();
  }

  @override
  void dispose() {
    // 重要，一定要在销毁页面时销毁播放器，否则会出现后台仍在播放有声音的问题
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return Scaffold(
      appBar: AppBar(
        title: Text('影片信息'),
      ),
      body: Container(
        child: Stack(
          children: <Widget>[
            Positioned(
              top: 0,
              left: 0.0,
              right: 0.0,
              height: MediaQuery.of(context).size.width / 16 * 9,
              child: Container(
                // 自定义播放器高度
                height: MediaQuery.of(context).size.width / 16 * 9,
                child: IjkPlayer(mediaController: controller),
              ),
            ),
            // ... 其它信息
          ]
        ),
      ),
    );
  }

  getVideoInfo() async {
    String palyUrl = 'https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4';
    setState(() {
      selectPlayUrl = palyUrl;
    });

    await controller.setNetworkDataSource(
      palyUrl,
      autoPlay: true  //自动播放
    );
  }
}

切换来源

可以为按钮添加点击事件

// ...
onClick: () async {
  String playUrl = 'xxx';
  setState(() {
    selectPlayUrl = playUrl;
  });
  // 这个方法调用后,会释放所有原生资源,但重新设置dataSource依然可用
  await controller.reset(); 
  // 重新设置播放地址
  controller.setNetworkDataSource(
    playUrl,
    autoPlay: false
  );
},
// ...

更多介绍请详见官方文档

效果展示