Flutter youtube_player_flutter：^7.0.0+6 全屏显示

Question

我正在使用这个插件youtube_player_flutter: ^7.0.0+6播放Youtube视频。问题是，当我尝试在全屏横向模式下播放视频时，视频会播放但从边缘被裁剪并占据整个屏幕。

可以看到，视频未完全覆盖高度和宽度。

我的代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class video extends StatefulWidget {
  @override
  _videoState createState() => _videoState();
}

class _videoState extends State<video> {
  String videoURL = "https://www.youtube.com/watch?v=oxsBSCf5-B8&list=RDoxsBSCf5-B8&start_radio=1";

  YoutubePlayerController _controller;

  @override
  void initState() {

    _controller = YoutubePlayerController(
        initialVideoId: YoutubePlayer.convertUrlToId(videoURL)
    );

    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Container(
            child:Column(
              crossAxisAlignment:CrossAxisAlignment.stretch,
              children: <Widget>[
                YoutubePlayerBuilder(
                  player: YoutubePlayer(
                    controller: _controller,
                    aspectRatio:16/9,

                    showVideoProgressIndicator: true,
                  ),
                builder:(context,player){
                    return Column(
                    children: <Widget>[
                     player
                    ],
                    );
                },
                ),
              ],
            ),
          ),
        ),
      ),


    );
  }
}

- joshua

---

请问Christopher Moore是谁？ - joshua

Answer 1

我刚才也遇到了同样的问题。
我尝试了这个方法，对于全屏播放看起来是有效的。同时，添加了一个OrientationBuilder，只有在横向模式下移除AppBar。

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: _onWillPop,
    child: OrientationBuilder(builder: 
           (BuildContext context, Orientation orientation) {
      if (orientation == Orientation.landscape) {
        return Scaffold(
          body: youtubeHirarchy(),
        );
      } else {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: youtubeHirarchy(),
        );
      }
    }),
  );
}

youtubeHierarchy() {
  return Container(
    child: Align(
      alignment: Alignment.center,
      child: FittedBox(
        fit: BoxFit.fill,
        child: YoutubePlayer(
          controller: _controller,
        ),
      ),
    ),
  );
}

（onWillPop 用于在返回时暂停视频）
看起来实际视频后面有 YouTube 的默认菜单。如果您有更好的解决方案，请告诉我。

似乎在实际视频之后有 YouTube 的默认菜单。如果您有更好的解决方案请告知。

- Jayadev Haddadi

---

如果您不知道如何使用WillPopScreen，可以从OrietaionBuilder()开始简单地学习。 - Faraz Rasool

Answer 2

如果你想要实现以下两个目标：

1. 在整个屏幕上显示视频（全屏）

   

2. 在肖像模式下与其他小组件一起显示视频小部件

   

这里是我解决问题的方法。

   child: OrientationBuilder(
    
    builder: (context, orientaion) {
     switch(orientaion){
       
       case Orientation.portrait:
        return Scaffold(
          resizeToAvoidBottomInset: true,
          backgroundColor: Theme.of(context).appBarTheme.color,
          appBar: AppBar(
            // title: Text(widget.video.title),
            title: Text(
              "Detail",
              style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
            ),
          ),
          body: Body);
  
         // TODO: Handle this case.
         break;
       case Orientation.landscape:
        return Scaffold(
          resizeToAvoidBottomInset: true,
          backgroundColor: Theme.of(context).appBarTheme.color,
         
          body: Body());
  
         // TODO: Handle this case.
         break;
     }
     
    }
  ),

基于方向构建Body

bool fullScreen = false;

YoutubePlayerBuilder _buildBurnerWidgetContent() {
  return YoutubePlayerBuilder(
    onEnterFullScreen: () {
      this.fullScreen = true;
    },
    onExitFullScreen: () {
      this.fullScreen = false;
    },
    player: YoutubePlayer(
      aspectRatio: 16 / 9,
      controller: _youtubecontroller,
      showVideoProgressIndicator: true,
      onReady: () {},
      progressColors: ProgressBarColors(
        playedColor: Colors.amber,
        handleColor: Colors.amberAccent,
      ),
    ),
    builder: (context, player) {
      return Column(
        children: [
          // some widgets
          // player,
          //some other widgets
        ],
      );
    });

在构建具有不同部分的页面主体时，我会检查屏幕方向。

import 'package:flutter/material.dart';

class Body extends StatefulWidget {
  @override
  _hhState createState() => _hhState();
}

class _hhState extends State<Body> {
  bool fullScreen;

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(children: <Widget>[
      Flexible(flex: 5, child: _buildBurnerWidgetContent()),
      !this.fullScreen
          ? Padding(padding: null, child: Text("description"))
          : Container(),
      !this.fullScreen
          ? Padding(padding: null, child: Text("TabView"))
          : Container(),
      !this.fullScreen
          ? Padding(padding: null, child: Text("comments"))
          : Container()
    ]));
  }

  _buildBurnerWidgetContent() {}
}

- David Kiarie Macharia

Answer 3

我也遇到了类似的问题，解决方案实际上在pub.dev的文档中。 你需要在widget树的顶部添加youtubeplayerbuilder，并且其他所有内容（如scaffold）将从其builder方法返回。 https://pub.dev/packages/youtube_player_flutter 输入图片说明

- Rutvik_110

---

它不起作用 :D - Alex Aung

Answer 4

如果使用ListView.separated，您可以将视频全屏打开

body: ListView.separated(
    itemBuilder: (context, index) {
      return YoutubePlayer(
        key: ObjectKey(_controllers[index]),
        controller: _controllers[index],
        actionsPadding: const EdgeInsets.only(left: 16.0),
        bottomActions: [
          CurrentPosition(),
          const SizedBox(width: 10.0),
          ProgressBar(isExpanded: true),
          const SizedBox(width: 10.0),
          RemainingDuration(),
          FullScreenButton(),
        ],
      );
    },
    itemCount: _controllers.length,
    separatorBuilder: (context, _) => const SizedBox(height: 10.0),
  ),
);

}

在此输入链接描述

- Vasyl

---

你甚至没有测试这段代码，它只是将视频缩放以匹配listView的大小。它不能将视频打开到全屏状态。 - ShadeToD

Answer 5

全屏支持

如果需要全屏支持，请使用YoutubePlayerBuilder来包裹您的播放器

YoutubePlayerBuilder(
    player: YoutubePlayer(
        controller: _controller,
    ),
    builder: (context, player){
        return Column(
            children: [
                // some widgets
                player,
                //some other widgets
            ],
        );
    ),
),

- Muhammet

Answer 6

您可以尝试使用以下代码检查设备的方向：

MediaQuery.of(context).orientation == Orientation.landscape

如果设备处于横屏状态，您可以隐藏应用程序栏：

完整示例：

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: _onWillPop,
    child: Scaffold(
          appBar: MediaQuery.of(context).orientation == Orientation.landscape
            ? null
            : AppBar(
            title: Text(App),
          ),
          body: youtube(),
        );
      }
    }),
  );
}

- RITTIK

Answer 7

你可以像这样使用YoutubePlayerBuilder，请注意我是在 Scaffold 之前添加它的，你可以尝试在 Scaffold 之后添加它，不过我以前没有尝试过。

YoutubePlayerBuilder(
    player: YoutubePlayer(
        controller: _controller,
    ),
    builder: (context, player){
        return Scaffold(
           body: SafeArea(
              child: Column(
                 children: [
                     player,
                     // any widget you want to add
                  ] 
              )
           )
        );
    ),
),

- Esraa Hamada