Flutter開(kāi)發(fā)過(guò)程中符隙，對(duì)于視頻播放的三方組件有很多罚随，在A(yíng)ndroid端適配都挺好，但是在適配iPhone手機(jī)的時(shí)候猬膨，如果設(shè)置了UIInterfaceOrientationLandscapeLeft和UIInterfaceOrientationLandscapeRight都為false的情況下尔崔，無(wú)法做到全屏播放赋元，因?yàn)镕Lutter的SystemChrome.setPreferredOrientations方法不適配iOS端霜幼，無(wú)法控制屏幕進(jìn)行旋轉(zhuǎn)盔憨，下面我們看效果

在A(yíng)ndroid手機(jī)上效果

gif.gif

在IPhone手機(jī)上效果

gif.gif

我們可以看到热康，當(dāng)在iPhone手機(jī)上進(jìn)行全屏播放的時(shí)候，屏幕并沒(méi)有旋轉(zhuǎn)過(guò)來(lái)鹤盒，查閱了很多資料蚕脏，都沒(méi)能很好的解決，后來(lái)只能自己在iOS端用原生寫(xiě)了個(gè)播放器侦锯，利用FLutter嵌入原生的開(kāi)發(fā)模式來(lái)適配全屏播放驼鞭，

最終效果如下

gif.gif

如果有什么好的方法解決這個(gè)在iOS不能旋轉(zhuǎn)屏幕的想法的，歡迎在下方留言尺碰。挣棕。。亲桥。

下面貼出代碼

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,
  });

  @override
  State<VideoPlayerWidget> createState() => _VideoPlayerWidgetState();
}

class _VideoPlayerWidgetState extends State<VideoPlayerWidget> {
  late VideoPlayerController _videoPlayerController;
  ChewieController? _chewieController;
  int? bufferDelay;

  @override
  void initState() {
    super.initState();
    initializePlayer();
  }

  @override
  void 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 {
    //判斷是本地視頻還是網(wǎng)絡(luò)請(qǐng)求下來(lái)的視頻
    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,
    );
  }

  @override
  Widget 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的錯(cuò)誤，關(guān)閉App题篷，重新運(yùn)行（Flutter run）就行了
視頻播放鏈接https://assets.mixkit.co/videos/preview/mixkit-spinning-around-the-earth-29351-large.mp4

2词身、使用的時(shí)候區(qū)分了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('點(diǎn)擊播放視頻'),
        ),
      ),

3、iOS端的代碼（用OC實(shí)現(xiàn)的）（只貼出文件目錄番枚，需要的同學(xué)可以直接去GitHub上下載原代碼）

image.png

因?yàn)閷?xiě)視頻播放器的時(shí)候用到了Masonry三方法严，所有用戶(hù)需要再Podfile里面加入pod 'Masonry'，然后cd到Runner目錄下葫笼，運(yùn)行pod install安裝Masonry

image.png

4深啤、最后在AppDelegate.m里面注冊(cè)一下

[FlutterViewRegistran registerWithRegistry:self];

image.png

5、Git代碼傳送門(mén)

喜歡的同學(xué)歡迎幫忙點(diǎn)個(gè)star????CSDN傳送門(mén)