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


    );
  }
}

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 的默认菜单。如果您想出更好的解决方案，请告诉我。

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

基于方向构建身体

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() {}
}

Answer 3

如果要使用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),
  ),
);

}

在此输入链接描述