flutter 播放視訊元件
阿新 • • 發佈：2020-12-09
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/caf7e3cd0df6fijkplayer 使用方法，直接貼程式碼，詳細 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); }, ); }