feat:视频播放器

liangchengyou
1 parent 624214d0
Showing 13 changed files with 327 additions and 3 deletions
android/app/src/main/AndroidManifest.xml
ios/Runner/Info.plist
lib/common/extension/string_extension.dart
lib/home/home_page.dart
lib/practice/chosetopic/topicword/topic_word_page.dart
lib/route/route.dart
lib/video/lookvideo/bloc/look_video_bloc.dart
lib/video/lookvideo/bloc/look_video_event.dart
lib/video/lookvideo/bloc/look_video_state.dart
lib/video/lookvideo/look_video_page.dart
lib/video/lookvideo/widgets/video_opera_widget.dart
lib/video/lookvideo/widgets/video_widget.dart
pubspec.yaml
@@ -30,4 +30,5 @@
             android:name="flutterEmbedding"
             android:value="2" />
     </application>
+    <uses-permission android:name="android.permission.INTERNET"/>
 </manifest>
@@ -26,6 +26,11 @@
 	<string>$(FLUTTER_BUILD_NUMBER)</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+	</dict>
 	<key>UIApplicationSupportsIndirectInputEvents</key>
 	<true/>
 	<key>UILaunchStoryboardName</key>
@@ -6,4 +6,4 @@ extension AssetExtension on String {
   String get assetImg => _assetImagePrefix + this;
   String get assetPng => 'assets/images/$this.png';
   String get assetGif => 'assets/images/$this.gif';
-}
 \ No newline at end of file
+}
@@ -34,7 +34,8 @@ class _HomePageView extends StatelessWidget {
       Navigator.of(AppRouter.context).pushNamed(AppRouteName.shop);
     } else {
       // Navigator.of(AppRouter.context).pushNamed(AppRouteName.topicPic);
-      Navigator.of(AppRouter.context).pushNamed(AppRouteName.topicWord);
+      // Navigator.of(AppRouter.context).pushNamed(AppRouteName.topicWord);
+      Navigator.of(AppRouter.context).pushNamed(AppRouteName.lookVideo);
     }
   }
@@ -11,7 +11,7 @@ class TopicWordPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
-      create: (context) => TopicWordBloc(PageController(), 3),
+      create: (context) => TopicWordBloc(PageController(), 4),
       child: _TopicWordPage(),
     );
   }
@@ -15,6 +15,7 @@ import &#39;package:wow_english/shop/exchane/exchange_lesson_page.dart&#39;;
 import 'package:wow_english/shop/exchangelist/exchange_lesson_list_page.dart';
 import 'package:wow_english/shop/home/shop_home_page.dart';
 import 'package:wow_english/tab/tab_page.dart';
+import 'package:wow_english/video/lookvideo/look_video_page.dart';
 class AppRouteName {
@@ -32,6 +33,7 @@ class AppRouteName {
   static const String reAfter = 'reAfter';
   static const String topicPic = 'topicPic';
   static const String topicWord = 'topicWord';
+  static const String lookVideo = 'lookVideo';
   static const String tab = '/';
 }
@@ -70,6 +72,8 @@ class AppRouter {
         return CupertinoPageRoute(builder: (_) =>  const TopicPicturePage());
       case AppRouteName.topicWord:
         return CupertinoPageRoute(builder: (_) =>  const TopicWordPage());
+      case AppRouteName.lookVideo:
+        return CupertinoPageRoute(builder: (_) =>  const LookVideoPage());
       case AppRouteName.setPwd:
         final phoneNum = (settings.arguments as Map)['phoneNumber'] as String;
         return CupertinoPageRoute(builder: (_) =>  SetPassWordPage(phoneNum: phoneNum));
+import 'package:flutter/cupertino.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:video_player/video_player.dart';
+
+part 'look_video_event.dart';
+part 'look_video_state.dart';
+
+class LookVideoBloc extends Bloc<LookVideoEvent, LookVideoState> {
+
+  VideoPlayerController? _controller;
+
+  LookVideoBloc() : super(LookVideoInitial()) {
+    on<LookVideoEvent>((event, emit) {
+      // TODO: implement event handler
+    });
+  }
+}
+part of 'look_video_bloc.dart';
+
+@immutable
+abstract class LookVideoEvent {}
+part of 'look_video_bloc.dart';
+
+@immutable
+abstract class LookVideoState {}
+
+class LookVideoInitial extends LookVideoState {}
+
+class VideoStarState extends LookVideoState {}
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:wow_english/video/lookvideo/bloc/look_video_bloc.dart';
+import 'package:wow_english/video/lookvideo/widgets/video_widget.dart';
+
+class LookVideoPage extends StatelessWidget {
+  const LookVideoPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) => LookVideoBloc(),
+      child: _LookVideoPage(),
+    );
+  }
+}
+
+class _LookVideoPage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return BlocListener<LookVideoBloc, LookVideoState>(
+      listener: (context,state){},
+      child: _lookVideoView(),
+    );
+  }
+
+  Widget _lookVideoView() => BlocBuilder<LookVideoBloc, LookVideoState>(
+      builder: (context,state){
+        return const VideoWidget(
+          videoUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7194236f31b2e1e3da0fe06cfed4ba2b.mp4',
+        );
+      });
+}
 \ No newline at end of file
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:wow_english/common/extension/string_extension.dart';
+
+class VideoOperaWidget extends StatefulWidget {
+  const VideoOperaWidget({super.key,  this.currentTime = '00:00', this.totalTime = '00:00', this.degree = 0.0,});
+  //当前播放时间
+  final String currentTime;
+  //总时间
+  final String totalTime;
+  final double degree;
+
+  @override
+  State<StatefulWidget> createState() {
+    return _VideoOperaWidgetState();
+  }
+}
+
+class _VideoOperaWidgetState extends State<VideoOperaWidget> {
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: SizedBox(
+        width: double.infinity,
+        height: double.infinity,
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Padding(
+              padding: EdgeInsets.only(left: 8.5.w,right: 8.5.w,top: 11.h),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Row(
+                    children: [
+                      Image.asset(
+                        'back_around'.assetPng,
+                        height: 40,
+                        width: 40
+                      ),
+                      18.horizontalSpace,
+                      Container(
+                        height: 40.h,
+                        alignment: Alignment.center,
+                        decoration: BoxDecoration(
+                            color: Colors.white,
+                            borderRadius: BorderRadius.circular(6.r),
+                            border: Border.all(
+                                width: 1.5,
+                                color: const Color(0xFF140C10)
+                            )
+                        ),
+                        padding: EdgeInsets.symmetric(horizontal: 10.w),
+                        child: Text(
+                          'song',
+                          textAlign: TextAlign.center,
+                          style: TextStyle(
+                            fontSize: 20.sp,
+                            color: const Color(0xFF333333),
+                          ),
+                        ),
+                      )
+                    ],
+                  ),
+                  Container(
+                    height: 40.h,
+                    alignment: Alignment.center,
+                    decoration: BoxDecoration(
+                        color: Colors.white,
+                        borderRadius: BorderRadius.circular(6.r),
+                        border: Border.all(
+                            width: 1.5,
+                            color: const Color(0xFF140C10)
+                        )
+                    ),
+                    padding: EdgeInsets.symmetric(horizontal: 10.w),
+                    child: Text(
+                      '中/英',
+                      style: TextStyle(
+                        fontSize: 20.sp,
+                        color: const Color(0xFF333333),
+                      ),
+                    ),
+                  )
+                ],
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}
 \ No newline at end of file
+import 'package:common_utils/common_utils.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:video_player/video_player.dart';
+import 'package:wow_english/video/lookvideo/widgets/video_opera_widget.dart';
+
+class VideoWidget extends StatefulWidget {
+  const VideoWidget({super.key, this.videoUrl = ''});
+
+  final String videoUrl;
+
+  @override
+  State<StatefulWidget> createState() {
+    return _VideoWidgetState();
+  }
+}
+
+class _VideoWidgetState extends State<VideoWidget> {
+  VideoPlayerController? _controller;
+  String _currentTime = '00:00';
+  String _totalTime = '00:00';
+  double _playDegree = 0.0;
+  bool _hiddenTipView = false;
+  TimerUtil? timerUtil;
+
+  String formatDuration(Duration duration) {
+    String hours = duration.inHours.toString().padLeft(2, '0');
+    String minutes = duration.inMinutes.remainder(60).toString().padLeft(2, '0');
+    String seconds = duration.inSeconds.remainder(60).toString().padLeft(2, '0');
+    return "$hours:$minutes:$seconds";
+  }
+
+  void _addListener() {
+    _controller!.addListener(() {
+      if(_controller!.value.isInitialized) {
+        if (_controller!.value.isPlaying) {
+          setState(() {
+            double currentSecond = (_controller!.value.position.inMinutes.remainder(60)*60+_controller!.value.position.inSeconds.remainder(60)).toDouble();
+            int totalSecond = _controller!.value.duration.inMinutes.remainder(60)*60+_controller!.value.duration.inSeconds.remainder(60);
+            _currentTime = formatDuration(_controller!.value.position);
+            _playDegree = currentSecond/totalSecond;
+          });
+        }
+      }
+    });
+  }
+
+  //开始倒计时
+  void startTimer()  {
+    if(timerUtil == null) {
+      timerUtil =  TimerUtil(mInterval: 1000,mTotalTime: 1000*10);
+      timerUtil!.setOnTimerTickCallback((int tick) {
+        double currentTick = tick / 1000;
+        if (kDebugMode) {
+          print(currentTick);
+        }
+        if (currentTick.toInt() == 0) {//倒计时结束
+          setState(() {
+            _hiddenTipView = true;
+          });
+          timerUtil!.cancel();
+          timerUtil = null;
+        }
+      });
+      timerUtil!.startCountDown();
+    }
+  }
+
+  //取消倒计时
+  void cancelTimer() {
+    timerUtil!.cancel();
+    timerUtil = null;
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = VideoPlayerController.network(widget.videoUrl)
+      ..initialize().then((_){
+        startTimer();
+        setState(() {
+          _currentTime = formatDuration(_controller!.value.position);
+          _totalTime = formatDuration(_controller!.value.duration);
+          _controller!.setLooping(true);
+          _controller!.setVolume(100);
+          _controller!.play();
+        });
+        _addListener();
+      });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        setState(() {
+          _hiddenTipView = !_hiddenTipView;
+          if(!_hiddenTipView) {
+            startTimer();
+          } else {
+            if (timerUtil!.isActive()) {
+              cancelTimer();
+            }
+          }
+        });
+      },
+      onDoubleTap: () {
+        if(_controller!.value.isInitialized) {
+          if (_controller!.value.isPlaying) {
+            _controller!.pause();
+          } else {
+            _controller!.play();
+          }
+        }
+      },
+      child: Center(
+        child: _controller!.value.isInitialized ? Stack(
+          alignment: Alignment.center,
+          children: [
+            SizedBox(
+              height: double.infinity,
+              width: double.infinity,
+              child: AspectRatio(
+                aspectRatio: _controller!.value.aspectRatio,
+                child: VideoPlayer(_controller!),
+              ),
+            ),
+            Offstage(
+              offstage: _hiddenTipView,
+              child: VideoOperaWidget(
+                currentTime: _currentTime,
+                totalTime: _totalTime,
+                degree: _playDegree,
+              ),
+            )
+          ],
+        ): Container(
+          color: Colors.black,
+        ),
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller?.dispose();
+    _controller?.removeListener(() {});
+    if (timerUtil != null) {
+      timerUtil!.cancel();
+      timerUtil = null;
+    }
+    super.dispose();
+  }
+}
@@ -85,7 +85,11 @@ dependencies:
   limiting_direction_csx: ^0.2.0
   # 富文本插件 https://pub.dev/packages/extended_text
   extended_text: ^11.0.1
+  # 视频播放 https://pub.dev/packages/video_player
+  video_player: ^2.6.1
+  # UI适配 https://pub.dev/packages/responsive_framework
   responsive_framework: ^1.0.0
+  auto_orientation: ^2.3.1
 dev_dependencies:
   build_runner: ^2.4.4