添加插件

pubspec.yaml

chewie: ^1.0.0 video_player: ^2.0.2

封裝播放器

video_view.dart

class VideoView extends StatefulWidget {final String url; // 播放地址final String cover; // 封面final bool autoPlay; // 是否自動播放final bool looping; // 是否循環final double aspectRatio; // 寬高比const VideoView(this.url,{Key key, this.cover, this.autoPlay, this.looping, this.aspectRatio}): super(key: key);@override_VideoViewState createState() => _VideoViewState(); }class _VideoViewState extends State<VideoView> {VideoPlayerController _videoPlayerController;ChewieController _chewieController;// 封面 (FractionallySizedBox:可控制組件在水平/垂直方向上填充滿父容器)get _placeHolder => FractionallySizedBox(widthFactor: 1,child: cacheImage(widget.cover),);// 進度條顏色設置get _progressColors => ChewieProgressColors(playedColor: primary,bufferedColor: primary,handleColor: Colors.grey,backgroundColor: primary[50],);@overridevoid initState() {super.initState();_videoPlayerController = VideoPlayerController.network(widget.url);_chewieController = ChewieController(//要播放的視頻的控制器videoPlayerController: _videoPlayerController,// 縮放比aspectRatio: widget.aspectRatio,// 是否自動播放autoPlay: widget.autoPlay,// 封面looping: widget.looping,// 進度條顏色placeholder: _placeHolder,// 進度條顏色materialProgressColors: _progressColors,// 是否靜音allowMuting: false,// 是否顯示播放速度allowPlaybackSpeedChanging: false,customControls: MaterialControls(showLoadingOnInitialize: false,showBigPlayIcon: false,bottomGradient: blackLinearGradient(),));}@overridevoid dispose() {super.dispose();_videoPlayerController.dispose();_chewieController.dispose();}@overrideWidget build(BuildContext context) {double screenWidth = MediaQuery.of(context).size.width; // 播放器寬度double screenHeight = screenWidth / widget.aspectRatio; // 播放器高度return Container(width: screenWidth,height: screenHeight,color: Colors.grey,child: Chewie(controller: _chewieController,),);} }

自定義播放器UI

點擊查看自定義播放器UI源碼

總結

以上是生活随笔為你收集整理的Flutter 视频播放器组件封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。