先看效果
709863ea193b578495ae3fac72ae18a5.gif
關(guān)鍵代碼
import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'Player.dart';
import 'main.dart';
class FullScreenVideoList extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return FullScreenVideoListState();
}
}
class FullScreenVideoListState extends State {
List<Video> datas = new List<Video>();
//滾動監(jiān)聽
ScrollController scrollController = ScrollController();
Size size;
double offset = 0.0;
@override
void initState() {
// TODO: implement initState
super.initState();
scrollController.addListener(() {
//獲取滾動范圍,計算滾動停止時當(dāng)前顯示的數(shù)據(jù)位
this.offset = scrollController.offset;
});
loadAsset();
}
Future<String> loadAsset() async {
String data = await rootBundle.loadString('assets/data.json');
List<dynamic> list = jsonDecode(data);
list.forEach((element) {
// print(element["coverImgUrl"]);
// print(element["url"]);
datas.add(Video(element["url"],element["coverImgUrl"]));
});
setState(() {
});
}
@override
void didUpdateWidget(covariant StatefulWidget oldWidget) {
// TODO: implement didUpdateWidget
super.didUpdateWidget(oldWidget);
size = MediaQuery.of(context).size;
setState(() {});
}
int curPlayPosition = 0;
@override
Widget build(BuildContext context) {
return _buildWidget();
}
Widget _buildWidget() {
if (datas.length <= 0 || size == null) {
return emptyWidgetbuildCupertinoActivityIndicator();
} else {
var list = GridView.builder(
controller: scrollController,
//關(guān)鍵代碼.滑動自動翻頁全靠這個實現(xiàn)
physics: PageScrollPhysics(),
padding: EdgeInsets.zero,
itemCount: datas.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//橫軸元素個數(shù)
crossAxisCount: 1,
//縱軸間距
mainAxisSpacing: 0.0,
//橫軸間距
crossAxisSpacing: 0.0,
//子組件寬高長度比例
childAspectRatio: size.width / size.height),
itemBuilder: (context, i) {
if (i == curPlayPosition) {
return _buildPlay(datas[i]);
} else {
return _buildItem(datas[i]);
}
});
return NotificationListener<ScrollEndNotification>(
onNotification: onscroll, child: list);
}
}
Widget _buildItem(Video data) {
return Stack(
children: [
Image(
width: size.width,
height: size.height,
image: NetworkImage(data.Img),
fit: BoxFit.cover,
alignment: Alignment.center)
],
);
}
//滾動停止回調(diào),在這里計算當(dāng)前正在顯示可播放視頻的控件.
bool onscroll(ScrollEndNotification notification) {
var playPosition = (offset / size.height).ceil();
//todo 需要關(guān)注這里的問題振坚，算出來的位置會大于實際位置衣撬，僅發(fā)生在列表最后一個，
if (playPosition != curPlayPosition && playPosition < datas.length) {
curPlayPosition = playPosition;
print("setState");
print(playPosition);
print(curPlayPosition);
setState(() {});
}
}
Widget _buildPlay(Video data) {
return Player(data);
}
}
import 'dart:io';
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:wakelock/wakelock.dart';
import 'PlayerControls.dart';
import 'main.dart';
/***
* 播放器部分,借鑒了部分(很多)Chewie_video的代碼.實現(xiàn)視頻播放能力.
*/
class Player extends StatefulWidget {
Video video;
Player(this.video);
@override
State<StatefulWidget> createState() {
return PlayerState();
}
}
class PlayerState extends State<Player> {
static List<VideoPlayerController> player = new List();
VideoPlayerController _controller;
static bool isWakelock = false;
@override
void initState() {
super.initState();
if (!isWakelock) {
//這里特殊處理, initState 會在上個視頻 dispose 前調(diào)用,導(dǎo)致屏幕常亮失效.
Wakelock.enable();
isWakelock = true;
}
print("Wakelock.enable");
var url = "assets/v2.mp4";
print(url);
_controller = VideoPlayerController.asset(url)
..initialize().then((_) {
_controller.play();
// Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
setState(() {});
});
player.add(_controller);
}
@override
Widget build(BuildContext context) {
//監(jiān)聽物理返回按鍵,做退出App 播放器釋放操作
return WillPopScope(
onWillPop: ()async {
await _controller.dispose();
exit(0);
},
child: (_controller != null && _controller.value.initialized)
? Stack(
children: [
Center(
child: AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
),
),
//底部播控條
PlayerControls(_controller)
],
)
: Center(child: CupertinoActivityIndicator()),
);
}
@override
void dispose() {
super.dispose();
print("dispose");
if (_controller != null) {
_controller.dispose();
}
player.remove(_controller);
if (isWakelock && player.length <= 0) {
Wakelock.disable();
isWakelock = false;
}
}
}
依賴部分
//視頻播放器底層
video_player: 0.10.12
//屏幕常亮
wakelock: ^0.1.4+2
關(guān)鍵說明
//使用 GridView Widget 作為列表父控件
GridView
//使用 NotificationListener 監(jiān)聽滾動停止事件
NotificationListener
//使用 PageScrollPhysics 輔助類實現(xiàn)上下滑動每次翻一頁的效果
PageScrollPhysics
總結(jié)
1.編碼耗時5小時左右,編碼體驗不錯.
2.Flutter 提供的 Physics 相關(guān)類解決了原生層需要自定義實現(xiàn)RecycleView LayoutManager的情況,統(tǒng)一了代碼實現(xiàn) 很Nice.
3.Flutter 層獲取設(shè)備硬件信息比較繁瑣,需要在合適時機調(diào)用.
4.Flutter層提供的設(shè)備生命周期回調(diào)比較少,而播放器的實現(xiàn)比較依賴設(shè)備各種生命周期的回調(diào),如果想很好的,極其精準的播放器控制,需要進一步定制原生層接口,不利于跨平臺運行.
5.國內(nèi)flutter鏡像站點內(nèi)容過于陳舊,需要去看flutter官網(wǎng)api文檔.
6.實現(xiàn)性能欠佳,與我之前寫過的原生版本性能相差太多.
7.后面的主要優(yōu)化方向是預(yù)加載和預(yù)緩存方向.
完整代碼
鳴謝
感謝歪果仁Brian Egan大兄弟貢獻的播放器demo,對于flutter視頻播放這一塊的入門,還是很ok的.
播放器demo
感謝他家提供的免費video轉(zhuǎn)gif服務(wù).
在線視頻轉(zhuǎn)gif
聯(lián)系我
QQ:853151446
微信:K13664884627
