Flutter自定义视频播放器(播放、暂停、倍速、拖动视频进度）
Flutter自定义视频播放器
在pubspec.yaml 添加video_player、dropdown_button2
添加完成后在需要视频的dart文件引入
import 'package:video_player/video_player.dart';
import 'package:dropdown_button2/dropdown_button2.dart';
具体代码
//定义一个VideoPlayerController
var _videoPlayerController;
//监听视频是否在播放
bool _isPlaying = false;
//视频地址
String videoUrl="";
//显示隐藏功能栏
bool _isShow = true;
//显示倍速
String _selectedValue = '倍速';
List items = ['1.0', '0.75', '0.5', '0.25'];
//在initstate中初始化
@override
void initState() {
_videoPlayerController =
VideoPlayerController.network(videoUrl)
..initialize().then((_) {
// 确保在初始化视频后显示第一帧，直至在按下播放按钮。
setState(() {});
});
//执行监听，只要有内容就会刷新
_videoPlayerController.addListener(() {
setState(() {
_isPlaying = _videoPlayerController.value.isPlaying;
});
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Video Demo',
home: Scaffold(
body:Container(
color: Color(0XFF000000),
child: Center(
child: GestureDetector(
child: Container(
width: double.infinity,
height: double.infinity,
color: Color(0XFF000000),
child: new Stack(
alignment: Alignment.center,
children: [
viDeoPlayer(),
_isPlaying && _isShow
? new Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
padding: const EdgeInsets.only(
right: 10, left: 10),
color:
Color.fromRGBO(0, 0, 0, 0.5),
height: 88,
child: new Row(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: [
//暂停按钮
InkWell(
child: Icon(
Icons.pause,
size: 36,
color: Color(0xffefefef),
),
onTap: () {
_videoPlayerController
.pause();
},
),
//当前播放进度
new Text(
formatString(
_videoPlayerController
.value.position),
style: TextStyle(
fontSize: 18,
color:
Color(0xffefefef)),
),
//进度条
new Expanded(
child: Slider(
activeColor:
Color(0xffFFFFFF),
max: _videoPlayerController
.value
.duration
.inMilliseconds
.truncateToDouble(),
value:
_videoPlayerController
.value
.position
.inMilliseconds
.truncateToDouble(),
onChanged: (newRating) {
_videoPlayerController
.seekTo(Duration(
milliseconds:
newRating
.truncate()));
},
),
flex: 1,
),
//总视频进度
new Text(
formatString(
_videoPlayerController
.value.duration),
style: TextStyle(
fontSize: 18,
color:
Color(0xffefefef)),
),
//倍速下拉菜单
DropdownButtonHideUnderline(
child: DropdownButton2(
hint: Text(
_selectedValue,
style: TextStyle(
fontSize: 18,
color:
Color(0xffefefef),
),
),
items: items
.map((item) =>
DropdownMenuItem<
String>(
value: item,
child: Text(
'${item}x',
style:
const TextStyle(
fontSize:
16,
),
),
))
.toList(),
// value: _selectedValue,
icon: Visibility(
visible: false,
child: Icon(Icons
.arrow_downward)),
onChanged: (value) async {
double val =
double.parse(value
as String);
_videoPlayerController
.setPlaybackSpeed(val);
setState(() {
if (val == 1.0) {
_selectedValue =
'倍速';
} else {
_selectedValue =
'${value as String}x';
}
});
},
dropdownWidth: 100,
buttonWidth: 60,
iconSize: 36,
iconEnabledColor:Colors.white,
buttonPadding:const EdgeInsets.only(left: 10),
),
),
],
),
),
)
: new Container(),
_isPlaying
? new Container() :
InkWell(
child: Icon(
Icons.play_arrow,
size: 72,
color: Color(0xffefefef),
),
onTap: () {
_videoPlayerController
.play();
},
),
],
),
),
onTap: () {
setState(() {
//点击显示隐藏功能栏
_isShow = !_isShow;
});
},
),
),
)，
),
);
}
//******************建议视频播放控件封装成类或函数************************
Widget viDeoPlayer() {
return Container(
width: double.infinity,
height: double.infinity,
color: Color(0xff000000),
child: Center(
// _controller.value.initialized表示视频是否已加载并准备好播放，
// 如果是true则返回AspectRatio（固定宽高比的组件,宽高比为视频本身的宽高比）
// VideoPlayer为视频插放器，对像就是前面定义的_controller
child: _videoPlayerController.value.isInitialized
? AspectRatio(
aspectRatio: _videoPlayerController.value.aspectRatio,
child: VideoPlayer(_videoPlayerController),
)
//如果视频没有加载好或者因网络原因加载不出来则返回Container 组件
//一般用于放置过渡画面
: Container(
child: Text("没有要播放的视频"),
),
),
);
}
String formatString(time) {
var shortName = time.toString().substring(2, 7);
return shortName;
}
//销毁videoPlayerController
@override
void dispose() {
// TODO: implement dispose
_videoPlayerController.dispose();
super.dispose();
}