Flutter视频播放器在iOS端和Android端都能实现全屏播放

Flutter开发过程中,对于视频播放的三方组件有很多,在Android端适配都挺好,但是在适配iPhone手机的时候,如果设置了UIInterfaceOrientationLandscapeLeftUIInterfaceOrientationLandscapeRight都为false的情况下,无法做到全屏播放,因为FLutter的SystemChrome.setPreferredOrientations方法不适配iOS端,无法控制屏幕进行旋转,下面我们看效果

在Android手机上效果

gif.gif

在IPhone手机上效果

gif.gif

我们可以看到,当在iPhone手机上进行全屏播放的时候,屏幕并没有旋转过来,查阅了很多资料,都没能很好的解决,后来只能自己在iOS端用原生写了个播放器,利用FLutter嵌入原生的开发模式来适配全屏播放,

最终效果如下

gif.gif

如果有什么好的方法解决这个在iOS不能旋转屏幕的想法的,欢迎在下方留言。。。。

下面贴出代码

1、FLutter视频播放器采用的是chewie

封装的播放器代码如下:

import 'dart:io';
import 'package:chewie/chewie.dart';
import 'package:flutter/material.dart';
// ignore: depend_on_referenced_packages
import 'package:video_player/video_player.dart';class VideoPlayerWidget extends StatefulWidget {final String videoUrl;final bool fullScreenByDefault;const VideoPlayerWidget({super.key,required this.videoUrl,this.fullScreenByDefault = false,});@overrideState<VideoPlayerWidget> createState() => _VideoPlayerWidgetState();
}class _VideoPlayerWidgetState extends State<VideoPlayerWidget> {late VideoPlayerController _videoPlayerController;ChewieController? _chewieController;int? bufferDelay;@overridevoid initState() {super.initState();initializePlayer();}@overridevoid dispose() {_videoPlayerController.dispose();_chewieController?.dispose();super.dispose();}List<String> srcs = ["https://assets.mixkit.co/videos/preview/mixkit-spinning-around-the-earth-29351-large.mp4","https://assets.mixkit.co/videos/preview/mixkit-daytime-city-traffic-aerial-view-56-large.mp4","https://assets.mixkit.co/videos/preview/mixkit-a-girl-blowing-a-bubble-gum-at-an-amusement-park-1226-large.mp4"];Future<void> initializePlayer() async {//判断是本地视频还是网络请求下来的视频if (widget.videoUrl.contains('http')) {_videoPlayerController =VideoPlayerController.networkUrl(Uri.parse(widget.videoUrl));} else {_videoPlayerController =VideoPlayerController.file(File(widget.videoUrl));}await Future.wait([_videoPlayerController.initialize(),]);_createChewieController();setState(() {});}void _createChewieController() {_chewieController = ChewieController(videoPlayerController: _videoPlayerController,autoPlay: true,hideControlsTimer: const Duration(seconds: 10),allowPlaybackSpeedChanging: false,fullScreenByDefault: widget.fullScreenByDefault,);}@overrideWidget build(BuildContext context) {return Container(color: const Color.fromRGBO(28, 34, 47, 1),width: MediaQuery.of(context).size.width - 20,height: 300,child: Center(child: _chewieController != null &&_chewieController!.videoPlayerController.value.isInitialized? Chewie(controller: _chewieController!,): const Column(mainAxisAlignment: MainAxisAlignment.center,children: [CircularProgressIndicator(),SizedBox(height: 20),Text('Loading',style: TextStyle(color: Colors.white,),),],),),);}
}

如果碰到Video Player "UnimplementedError: init() has not been implemented的错误,关闭App,重新运行(Flutter run)就行了
视频播放链接https://assets.mixkit.co/videos/preview/mixkit-spinning-around-the-earth-29351-large.mp4

2、使用的时候区分了Android端和iOS端

body: Center(child: ElevatedButton(onPressed: () {showDialog(context: context,builder: (context) {return Dialog(insetPadding: const EdgeInsets.only(left: 0),child: Platform.isAndroid? const VideoPlayerWidget(videoUrl: videoUrl,) //Android视频播放器: SizedBox(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.width * 9 / 16,child: const UiKitView(viewType:'plugins.flutter.io/custom_platform_view_plugin',creationParams: {'videoUrl': videoUrl,},creationParamsCodec: StandardMessageCodec(),),), //iOS视频播放器);},);},child: const Text('点击播放视频'),),),

3、iOS端的代码(用OC实现的)(只贴出文件目录,需要的同学可以直接去GitHub上下载原代码)

image.png

因为写视频播放器的时候用到了Masonry三方,所有用户需要再Podfile里面加入pod 'Masonry',然后cd到Runner目录下,运行pod install安装Masonry
image.png

4、最后在AppDelegate.m里面注册一下

[FlutterViewRegistran registerWithRegistry:self];
image.png

5、Git代码传送门

喜欢的同学欢迎帮忙点个star😄😄 简书传送门

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/264626.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JRT文件服务实现

网站与客户端打印和导出方面已经无大碍了&#xff0c;今天抽时间整整文件服务&#xff0c;文件服务设计可以查看下面连接。原理一样&#xff0c;代码会有些变化。 文件服务设计 首先实现文件服务的服务端&#xff0c;就是一个业务脚本&#xff0c;用来接收上传、移动和删除文件…

代码随想录二刷 |二叉树 |101. 对称二叉树

代码随想录二刷 &#xff5c;二叉树 &#xff5c;101. 对称二叉树 题目描述解题思路 & 代码实现递归法迭代法使用队列使用栈 题目描述 101.对称二叉树 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,…

推荐4个优秀的 Python 时间序列分析库

时间序列分析在金融和医疗保健等领域至关重要&#xff0c;在这些领域&#xff0c;理解随时间变化的数据模式至关重要。在本文中&#xff0c;我们将介绍四个主要的Python库——statmodels、tslearn、tssearch和tsfresh——每个库都针对时间序列分析的不同方面进行了定制。这些库…

调度算法1

一、 先来先服务FCFS&#xff08;First Come First Serve) 先来先服务"&#xff08;First Come, First Served&#xff0c;简称FCFS&#xff09;是一种调度算法&#xff0c;常用于处理队列中的任务或进程。它的基本原则是按照任务或进程到达的顺序进行处理&#xff0c;即先…

基于SSM的医院交互系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

AWR1642 boost开发板支持的TI参考设计

打开radar_toolbox_1_30_00_05\source\ti\examples\examples_overview,通过输入“1642”查找AWR1642 BOOST支持的参考设计,通过筛选,支持AWR1642 BOOST的参考设计如下: 挑选出两个参考设计上手,一个是“nonos_oob_16xx",不带OS;另一个是”short range radar“,比较…

ConcurrentModificationException日志关键字报警引发的思考

本文将记录和分析日志中的ConcurrentModificationException关键字报警&#xff0c;还有一些我的思考&#xff0c;希望对大家有帮助。 一、背景 近期&#xff0c;在日常的日志关键字报警分析时&#xff0c;发现我负责的一个电商核心系统在某时段存在较多ConcurrentModificatio…

AttributeError: module ‘lib‘ has no attribute ‘X509_V_FLAG_CB_ISSUER_CHECK‘解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

C# WPF上位机开发(通讯协议的编写)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 作为上位机&#xff0c;它很重要的一个部分就是需要和外面的设备进行数据沟通的。很多时候&#xff0c;也就是在这个沟通的过程当中&#xff0c;上…

使用python绘制现有彩票记录走势图

在数据分析和可视化的领域中&#xff0c;彩票走势图是一个经典的例子&#xff0c;它可以展示彩票数字随时间的出现频率和趋势。这里使用英国使用EuroMillions彩票的历史数据作为示例&#xff0c;使用Python和Matplotlib库来创建一个简单的走势图。可以在以下网站搜索.csv文件。…

dell r720远程网络安装ubuntu20.04(无U盘)

登陆后界面&#xff0c;在主界面上&#xff0c;我们就可以看到各个硬件组件的状态。在快速启动任务栏中&#xff0c;可以对系统电源进行操作&#xff0c;如开机、关机等。安装操作系统&#xff0c;在虚拟控制台预览处点击>启动 按照浏览器出现的提示确定安装控件等&#x…

实现加盐加密方法以及java nio中基于MappedByteBuffer操作大文件

自己实现 传统MD5可通过彩虹表暴力破解&#xff0c; 加盐加密算法是一种常用的密码保护方法&#xff0c;它将一个随机字符串&#xff08;盐&#xff09;添加到原始密码中&#xff0c;然后再进行加密处理。 1. 每次调用方法产生一个唯一盐值&#xff08;UUID &#xff09;密码…