1.支持Android、ios、web三平台
2.在使用的页面加入下面的代码
import 'package:auto_orientation/auto_orientation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:shoolcloudvideo/utils/loading.dart';
import 'package:shoolcloudvideo/utils/my_toast_utils.dart';
import 'package:video_player/video_player.dart';
import '../../utils/widget_utils.dart';
import '../colors/my_colors.dart';
///监控视频详情页面
const String VIDEO_URL = '视频地址';
class VideoMorePage extends StatefulWidget {
const VideoMorePage({Key? key}) : super(key: key);
State<VideoMorePage> createState() => _VideoMorePageState();
}
class _VideoMorePageState extends State<VideoMorePage> {
late VideoPlayerController _controller;
late var _appbar;
//是否全屏
bool _isFullScreen = false;
}
void initState() {
super.initState();
AutoOrientation.portraitUpMode();
_appbar = WidgetUtils.getAppBar('视频监控', true, context,false);
Loading.show();
_controller = VideoPlayerController.network(VIDEO_URL)
..initialize().then((_) async {
await Future.delayed(Duration(seconds: 2));
Loading.dismiss();
setState(() {
playOrPauseVideo();
});
}).catchError((err) {
// if (stop) {
// return;
// }
Loading.dismiss();
MyToastUtils.showToastBottom("加载出错,请重新打开");
print('加载出错,请重新打开! e $err');
// doPlayInitAndAutoPlay(urlToStreamVideo, stop: true);
});
}
void dispose() {
super.dispose();
_controller.dispose();
}
void playOrPauseVideo() {
setState(() {
if (_controller.value.isPlaying) {
_controller.pause();
} else {
// If the video is paused, play it.
_controller.play();
}
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar:_appbar,
backgroundColor: Colors.black,
body:Column(
children: [
SizedBox(
height: 300,
width: double.infinity,
child: _controller.value.isInitialized
? AspectRatio(
aspectRatio: 16 / 9,
// aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
)
//如果视频没有加载好或者因网络原因加载不出来则返回Container 组件
//一般用于放置过渡画面
: const Text("没有要播放的视频"),
),
const SizedBox(height: 15,),
SizedBox(
height: ScreenUtil().setHeight(40),
child: Row(
children: <Widget>[
Padding(
padding:
EdgeInsets.only(left: ScreenUtil().setSp(40)),
),
Container(
alignment: Alignment.bottomLeft,
height: ScreenUtil.screenWidth,
child: GestureDetector(
child: _controller.value.isPlaying == false
? const Icon(
Icons.pause,
color: Colors.white,
)
: const Icon(
Icons.play_arrow,
color: Colors.white,
),
onTap: () => {playOrPauseVideo()}),
),
Expanded(
child: Container(),
),
Container(
alignment: Alignment.bottomRight,
height: ScreenUtil.screenWidth,
child: GestureDetector(
child: _isFullScreen
? const Icon(
Icons.fullscreen_exit,
color: Colors.white,
)
: const Icon(
Icons.fullscreen,
color: Colors.white,
),
onTap: () {
_toggleFullScreen();
},
),
),
const Padding(
padding: EdgeInsets.only(right: 10),
),
],
),
),
],
)
);
}
void _toggleFullScreen() {
setState(() {
if (_isFullScreen) {
/// 如果是全屏就切换竖屏
AutoOrientation.portraitAutoMode();
// _appbar = WidgetUtil.getAppBar(title: widget.title ?? '播放器');
///显示状态栏,与底部虚拟操作按钮
SystemChrome.setEnabledSystemUIOverlays(
[SystemUiOverlay.top, SystemUiOverlay.bottom]);
_appbar = AppBar(
//标题居中
centerTitle: true,
title: const Text(
'视频监控',
style: TextStyle(
overflow: TextOverflow.ellipsis, color: Colors.white),
),
elevation: 0, //去掉Appbar底部阴影
//背景颜色
backgroundColor: Colors.blue,
);
} else {
AutoOrientation.landscapeAutoMode();
_appbar = null;
///关闭状态栏,与底部虚拟操作按钮
SystemChrome.setEnabledSystemUIOverlays([]);
}
_isFullScreen = !_isFullScreen;
});
}
}