flutter 播放视频组件

flutter 视频播放组件，我知道的有 

　　fijkplayer， video_player， chewie，这些都可以 https://pub.flutter-io.cn/ 这个网站搜

 

其中我用过 video_player 和 fijkplayer，chewie 据说是只是 video_player改写了ui。

video_player 本身不可控制播放进度，有很大的限制，chewie在这基础上做了封装，可以控制进度，可以参考 https://www.jianshu.com/p/caf7e3cd0df6

 

fijkplayer 使用方法，直接贴代码，详细 api 还没有研究，后面在说。

我是封装了直接通过方法弹出弹窗预览视频。
fijkplayer 不仅可以播放网络地址视频，本地拍摄的视频也一样可以播放，也只需要把地址放进去即可

 

// 视频播放
import 'package:flutter/material.dart';
import 'package:fijkplayer/fijkplayer.dart';

class VideoVideSimpleScreen extends StatefulWidget {
  final String url;
  VideoVideSimpleScreen({Key key, this.url}) : super(key: key);
  @override
  _VideoVideSimpleScreenState createState() => _VideoVideSimpleScreenState();
}

class _VideoVideSimpleScreenState extends State<VideoVideSimpleScreen> {
  final FijkPlayer player = FijkPlayer();
  @override
  void initState() {
    super.initState();
    // 'http://file.jinxianyun.com/testhaha.mp4'
    player.setDataSource(widget.url, autoPlay: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(0, 0, 0, 1),
      body: Container(
        constraints: BoxConstraints.expand(
          height: MediaQuery.of(context).size.height,
        ),
        child: Stack(
          children: <Widget>[
            Positioned(
              top: 0,
              left: 0,
              bottom: 0,
              right: 0,
              child: Center(
                child: FijkView(
                  color: Colors.black,
                  player: player,
                ),
              ),
            ),
            Positioned(
              //右上角关闭按钮
              right: 10,
              top: MediaQuery.of(context).padding.top,
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(25),
                  color: Colors.black54,
                ),
                child: IconButton(
                  icon: Icon(
                    Icons.close,
                    size: 30,
                    color: Colors.white,
                  ),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

// 视频预览
void videoView(BuildContext context, String path) {
  showDialog(
    barrierDismissible: false, //是否点击空白区域关闭对话框,默认为true，可以关闭
    context: context,
    builder: (BuildContext context) {
      return VideoVideSimpleScreen(url: path);
    },
  );
}

 

ios 只能在真机上测试，模拟器是不能播放的，2个组件皆如此

android 版本在 多少之后默认发送的就是https 请求，(如果报错可以做如下处理，我测试的时候是报错了的，报什么错已经记不得了，有错误在网上搜)

android 在播放 http 地址的视频需要在 android/app/src/man/res/xml  文件夹下(没有xml 就新建) 新建一个 network_security_config.xml 文件，内容如下

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true" />
</network-security-config>

然后在 android/app/src/man/AndroidManifest.xml 中使用  在  application 中添加

android:networkSecurityConfig="@xml/network_security_config"

如图

chewie： 

// 视频播放
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:chewie/chewie.dart';

class VideoVideSimpleScreen extends StatefulWidget {
  final String url;
  final bool isNetwork;
  VideoVideSimpleScreen({Key key, this.url, this.isNetwork}) : super(key: key);
  @override
  _VideoVideSimpleScreenState createState() => _VideoVideSimpleScreenState();
}

class _VideoVideSimpleScreenState extends State<VideoVideSimpleScreen> {
  VideoPlayerController videoPlayerController;
  var chewieController;
  @override
  void initState() {
    super.initState();
    if (widget.isNetwork == true) {
      videoPlayerController = VideoPlayerController.network(widget.url);
    } else {
      videoPlayerController = VideoPlayerController.file(File(widget.url));
    }
    chewieController = ChewieController(
      videoPlayerController: videoPlayerController,
      autoPlay: true,
      looping: true,
      aspectRatio: 3 / 3, //宽高比
    );
  }

  @override
  void dispose() {
    videoPlayerController.dispose();
    chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(0, 0, 0, 1),
      body: Container(
        constraints: BoxConstraints.expand(
          height: MediaQuery.of(context).size.height,
        ),
        child: Stack(
          children: <Widget>[
            // 视频组件
            Positioned(
              top: 0,
              left: 0,
              bottom: 0,
              right: 0,
              child: Chewie(
                controller: chewieController,
              ),
            ),
            Positioned(
              //右上角关闭按钮
              right: 10,
              top: MediaQuery.of(context).padding.top,
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(25),
                  color: Colors.black54,
                ),
                child: IconButton(
                  icon: Icon(
                    Icons.close,
                    size: 30,
                    color: Colors.white,
                  ),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

// 视频预览
void videoView(BuildContext context, String path, isNetwork) {
  showDialog(
    barrierDismissible: false, //是否点击空白区域关闭对话框,默认为true，可以关闭
    context: context,
    builder: (BuildContext context) {
      return VideoVideSimpleScreen(url: path, isNetwork: isNetwork);
    },
  );
}