Question

我在Flutter项目中使用了名为video_player的插件。我可以正常播放和暂停视频，但我想使其全屏和水平播放。我找不到与此相关的任何内容。

这是我正在使用的基本代码：

playerController = VideoPlayerController.network(
          "<VIDEO_URL>")
        ..addListener(listener)
        ..setVolume(1.0)
        ..initialize()
        ..play();

我可以全屏显示吗？

Answer 1

据我所知，VideoPlayer对它的位置一无所知，而只是将其扩展到最大以适应给定的空间。

我相信您想要做的是将RotatedBox用作视频的父级并设置旋转值。根据您的应用程序的工作方式，您可能希望视频播放器从水平和小角度开始，并具有一个全屏按钮，可以切换到横向模式。但是，如果将应用程序本身设置为旋转，则必须将其考虑在内，并在手机水平旋转后取消旋转视频，这可能会导致抖动旋转而导致UI丑陋，而您取消旋转视频。

您可能还想使用一个对话框将视频全屏显示，以便您可以将其关闭并返回到原来的屏幕。

我可能会提供更多指导，但这取决于您采用哪种方式（将应用程序锁定为纵向模式并手动进行旋转）还是使用flutter的内置旋转方式。

Answer 2

对于这个问题，我还有另一种情况，那就是使用 Chewie 插件，您可以在此处安装它： [https://pub.dev/packages/chewie][1] 这是我实现它的代码：

VideoPlayerController _videoPlayerController;
  ChewieController _chewieController;
  double _aspectRatio = 16 / 9;
  @override
  initState() {
    super.initState();
    print(widget.videoUrl);
    _videoPlayerController = VideoPlayerController.network(widget.videoUrl);
    _chewieController = ChewieController(
      allowedScreenSleep: false,
      allowFullScreen: true,
      deviceOrientationsAfterFullScreen: [
        DeviceOrientation.landscapeRight,
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ],
      videoPlayerController: _videoPlayerController,
      aspectRatio: _aspectRatio,
      autoInitialize: true,
      autoPlay: true,
      showControls: true,
    );
    _chewieController.addListener(() {
      if (_chewieController.isFullScreen) {
        SystemChrome.setPreferredOrientations([
          DeviceOrientation.landscapeRight,
          DeviceOrientation.landscapeLeft,
        ]);
      }
    });
  }

在退出页面后记住恢复设备的方向：

@override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
    super.dispose();
  }


    @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          child: Chewie(
            controller: _chewieController,
          ),
        ),
      ),
    );
  }

Answer 3

要使其在iOS中运行，您应该在F12:F22中添加以下更改：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-record-list',
  templateUrl: './record-list.component.html',
  styleUrls: ['./record-list.component.css'],
})
export class RecordListComponent implements OnInit {
  records;
  recordsFiltered;
  searchTerm: string;


  ngOnInit(): void {
    console.log('OnInit records: ', this.records);
  }

  constructor(title) {
    this.records = title;
  }
}

let model1 = new RecordListComponent('Idea 1 title');

Answer 4

我创建了一个可以全屏播放视频的函数

import 'package:flutter/services.dart';
.
.

void pushFullScreenVideo() {

//This will help to hide the status bar and bottom bar of Mobile 
//also helps you to set preferred device orientations like landscape

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
SystemChrome.setEnabledSystemUIOverlays([]);
SystemChrome.setPreferredOrientations(
  [
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ],
);

//This will help you to push fullscreen view of video player on top of current page

Navigator.of(navigatorKey.currentContext)
    .push(
  PageRouteBuilder(
    opaque: false,
    settings: RouteSettings(),
    pageBuilder: (
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
    ) {
      return Scaffold(
        backgroundColor: Colors.transparent,
        resizeToAvoidBottomPadding: false,
        body: Dismissible(
          key: const Key('key'),
          direction: DismissDirection.vertical,
          onDismissed: (_) => Navigator.of(context).pop(),
          child: OrientationBuilder(
          builder: (context, orientation) {
            isPortrait = orientation == Orientation.portrait;
            return Center(
              child: Stack(
              //This will help to expand video in Horizontal mode till last pixel of screen
                fit: isPortrait ? StackFit.loose : StackFit.expand,
                  children: [
                     AspectRatio(
                       aspectRatio: controller.value.aspectRatio,
                       child: VideoPlayer(controller),
                     ),
                  ],
               ),
            );
         },
       ); 
    },
  ),
)
    .then(
  (value) {

//This will help you to set previous Device orientations of screen so App will continue for portrait mode

    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    SystemChrome.setPreferredOrientations(
      [
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ],
    );
  },
);
}

Flutter-全屏video_player

4 个答案: