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);
    },
  );
}