android Flutteryoutube播放器Flutter：^7.0.0+6全屏

iibxawm4 于 2023-01-15 发布在 Android

关注(0)|答案(5)|浏览(226)

我正在使用这个插件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
                    ],
                    );
                },
                ),
              ],
            ),
          ),
        ),
      ),

    );
  }
}

android

来源：https://stackoverflow.com/questions/62670138/flutter-youtube-player-flutter-7-0-06-full-screen

5条答案

按热度按时间

oyt4ldly1#

我刚才也有同样的问题。
我试过这个，它似乎适用于全屏。还添加了一个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的默认菜单。如果你想出更好的解决方案，请让我知道。

赞(0）回复(0）举报 2023-01-15

xt0899hw2#

如果你想达到的目标是
1.在整个屏幕上显示视频（全屏）

1.与其他小部件一起在纵向显示视频小部件

这是我如何修复它

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

赞(0）回复(0）举报 2023-01-15

ckocjqey3#

所以我也遇到过类似的问题，解决方案实际上就在www.example.com上的文档中pub.dev。你需要在小部件树的顶部添加youtubeplayerbuilder，其他的东西，比如scaffold，都会从它的builder方法中返回。https://pub.dev/packages/youtube_player_flutter enter image description here

赞(0）回复(0）举报 2023-01-15

6yt4nkrj4#

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

}
enter link description here

赞(0）回复(0）举报 2023-01-15

cotxawn75#

用于全屏支持

如果需要全屏支持，请使用YoutubePlayerBuilder Package 播放器

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

赞(0）回复(0）举报 2023-01-15

我来回答

android Flutteryoutube播放器Flutter：^7.0.0+6全屏

5条答案

基于方向构建主体

使用不同部分构建主体时，检查屏幕方向

相关问题

热门标签

最新问答