這篇文章介紹一下在Flutter當中播放視頻，我們用到了第三方到一個插件，目前flutter上面還沒有原生支持，可以在pub.dev上面找一些插件來解決。
本頭條核心宗旨
歡迎來到「技術剛剛好」頭條，本頭條是個人維護，每天至少更新一篇Flutter技術文章，實時為大家播報Flutter最新消息。如果你剛好也在關注Flutter這門技術，那就跟我一起學習進步吧，你的贊，收藏，轉發是對我個人最大的支持，維護不易，歡迎關注。
技術剛剛好經歷
近幾年，移動端跨平臺開發技術層出不窮，從Facebook家的ReactNative，到阿里家WEEX，前端技術在移動端跨平臺開發中大展身手，技術剛剛好作為一名Android開發，經歷了從Reactjs到Vuejs的不斷學習。而在2018年，我們的主角變成了Flutter，這是Goolge開源的一個移動端跨平臺解決方案，可以快速開發精美的移動App。希望跟大家一起學習，一起進步！
本文核心要點
video_player是一個用於Flutter語言當中的一個插件，有了它我們就很快實現在Fluttter當中實現視頻到播放效果，插件地址：https://pub.dev/packages/video_player 效果如下：
我覺得目前運用這個插件就夠了，能解決我們大部分到視頻播放。
效果圖
IOS底層運用了avplayer進行播放
做之前可以看看這個播放器到地址：https://developer.apple.com/documentation/avfoundation/avplayer
瞭解一下這個播放器支持哪些格式，其實就是原生到播放器來播放到。
Android底層播放用到了ExoPlayer播放器
播放器地址：https://exoplayer.dev/
這個播放器也是google自己家出的
安裝video_player播放器
首先，在pubspec.yaml文件中添加video_player為依賴項。
iOS
警告：視頻播放器在iOS模擬器上不起作用。開發/測試期間必須使用iOS設備。
將以下條目添加到您的Info.plist文件中<project>/ios/Runner/Info.plist：/<project>
NSAppTransportSecurity
<dict>
NSAllowsArbitraryLoads
<true>
/<dict>
此項允許您的應用通過URL訪問視頻文件。
Android
確保位於以下位置的Android清單文件中存在以下權限<project>/android/app/src/main/AndroidManifest.xml：/<project>
<uses-permission>
Flutter項目模板將其添加，因此它可能已經存在。
支持的格式
- 在iOS上，後備播放器是AVPlayer。支持的格式取決於iOS的版本，AVURLAsset類具有audiovisualTypes，您可以查詢支持的av格式。
- 在Android上，後備播放器是ExoPlayer，有關支持的格式列表，請參閱此處。
例子
import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';
void main() => runApp(VideoApp());
class VideoApp extends StatefulWidget {
@override
_VideoAppState createState() => _VideoAppState();
}
class _VideoAppState extends State<videoapp> {
VideoPlayerController _controller;
@override
void initState() {
super.initState();
_controller = VideoPlayerController.network(
'http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4')
..initialize().then((_) {
// Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
setState(() {});
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Video Demo',
home: Scaffold(
body: Center(
child: _controller.value.initialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
)
: Container(),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
});
},
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
),
),
);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
}/<videoapp>
總結
這篇文章運用了插件方案來解決在Flutter跨平臺播放視頻到解決方案，一般到需求能夠應付，很多公司開發重要到時業務流程，只要能夠快速實現運用要求，儘快上線才是王道。
謝謝觀看技術剛剛好頭條文章，本頭條是個人維護，每天至少更新一篇Flutter技術文章，實時為大家播報Flutter最新消息。如果你剛好也在關注Flutter這門技術，那就跟我一起學習進步吧，你的贊，收藏，轉發是對我個人最大的支持，維護不易，歡迎關注。
閱讀更多 技術剛剛好 的文章
