Youtube_player_flutter: [BUG] Masalah pengguliran YoutubePlayerIFrame (Web bergetar)

Dibuat pada 3 Feb 2021 · 9Komentar · Sumber: sarbagyastha/youtube_player_flutter

Jelaskan bugnya
Jika Anda meletakkan YoutubePlayerIFrame di dalam tampilan daftar, arahkan kursor ke widget dan coba gulir - tidak berfungsi.

Untuk Mereproduksi
Langkah-langkah untuk mereproduksi perilaku:

Buat aplikasi bergetar
Tambahkan paket youtube_player_iframe
Buat tampilan daftar, tambahkan beberapa elemen uji dan widget YoutubePlayerIFrame.
Menggulir tidak berfungsi saat mouse berada di atas widget YoutubePlayerIFrame. Sepertinya itu memotong semua gerakan.

Perilaku yang diharapkan
ListView harus dapat digulir seperti di aplikasi asli.

Detail Teknis:

Perangkat: [Flutter Web]

bug

Sumber

ozz-rjq

👍7

Komentar yang paling membantu

Coba tambahkan kode ini untuk mencegah tampilan web ke dalam komponen mencoba menangani peristiwa gulir

YoutubePlayerIFrame(
      gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{},
      controller: _controller,
),

Di ponsel berfungsi dengan baik , salam!

Jairolaya12x pada 26 Feb 2021

👍6

Semua 9 komentar

Coba tambahkan kode ini untuk mencegah tampilan web ke dalam komponen mencoba menangani peristiwa gulir

YoutubePlayerIFrame(
      gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{},
      controller: _controller,
),

Di ponsel berfungsi dengan baik , salam!

Jairolaya12x pada 26 Feb 2021

👍6

      gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{},

Solusi ini tidak berfungsi di web.

Saya memiliki masalah yang sama.

FerBueroTrebino pada 23 Mar 2021

👍2

ane ngalamin hal yang sama gan, ada yg bisa kasih solusi ga?

quangvtvp pada 3 Jun 2021

ane ngalamin hal yang sama gan, ada yg bisa kasih solusi ga?

@quangvtvp solusi saya adalah mengubah ke paket youtube_plyr_iframe.

FerBueroTrebino pada 3 Jun 2021

ane ngalamin hal yang sama gan, ada yg bisa kasih solusi ga?
@quangvtvp solusi saya adalah mengubah ke paket youtube_plyr_iframe.

@FerBueroTrebino juga tidak berfungsi di web, apakah Anda menggunakan konfigurasi tertentu?

deepakrana0011 pada 9 Jun 2021

@deepakrana0011 Apakah Anda mencoba menambahkan widget Scrollbar?

Berikut adalah kode implementasi saya:

class YoutubePlayer extends StatefulWidget {
  final String videoID;
  YoutubePlayer(this.videoID);
  <strong i="8">@override</strong>
  _YoutubePlayerState createState() => _YoutubePlayerState();
}

class _YoutubePlayerState extends State<YoutubePlayer> {
  <strong i="9">@override</strong>
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () {
          _showDialog(
            context,
            widget.videoID,
          );
        },
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Stack(
              children: <Widget>[
                LayoutBuilder(
                  builder: (context, constraints) {
                    if (kIsWeb && constraints.maxWidth > 800) {
                      return Container(
                        color: Colors.transparent,
                        padding: EdgeInsets.all(5),
                        width: MediaQuery.of(context).size.width / 2,
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10.0),
                          child: new Image.network(
                            YoutubePlayerController.getThumbnail(
                                videoId: widget.videoID,
                                // todo: get thumbnail quality from list
                                quality: ThumbnailQuality.max),
                            fit: BoxFit.fill,
                          ),
                        ),
                      );
                    } else {
                      return Container(
                        color: Colors.transparent,
                        padding: EdgeInsets.all(5),
                        width: MediaQuery.of(context).size.width * 2,
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10.0),
                          child: new Image.network(
                            YoutubePlayerController.getThumbnail(
                                videoId: widget.videoID,
                                // todo: get thumbnail quality from list
                                quality: ThumbnailQuality.max,
                                webp: false),
                            fit: BoxFit.fill,
                          ),
                        ),
                      );
                    }
                  },
                ),
              ],
            ),
            Icon(
              Icons.play_circle_filled,
              color: Colors.white,
              size: 55.0,
            ),
          ],
        ),
      ),
    );
  }

FerBueroTrebino pada 9 Jun 2021

@deepakrana0011 Apakah Anda mencoba menambahkan widget Scrollbar?

Berikut adalah kode implementasi saya:

class YoutubePlayer extends StatefulWidget {
  final String videoID;
  YoutubePlayer(this.videoID);
  <strong i="9">@override</strong>
  _YoutubePlayerState createState() => _YoutubePlayerState();
}

class _YoutubePlayerState extends State<YoutubePlayer> {
  <strong i="10">@override</strong>
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () {
          _showDialog(
            context,
            widget.videoID,
          );
        },
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Stack(
              children: <Widget>[
                LayoutBuilder(
                  builder: (context, constraints) {
                    if (kIsWeb && constraints.maxWidth > 800) {
                      return Container(
                        color: Colors.transparent,
                        padding: EdgeInsets.all(5),
                        width: MediaQuery.of(context).size.width / 2,
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10.0),
                          child: new Image.network(
                            YoutubePlayerController.getThumbnail(
                                videoId: widget.videoID,
                                // todo: get thumbnail quality from list
                                quality: ThumbnailQuality.max),
                            fit: BoxFit.fill,
                          ),
                        ),
                      );
                    } else {
                      return Container(
                        color: Colors.transparent,
                        padding: EdgeInsets.all(5),
                        width: MediaQuery.of(context).size.width * 2,
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10.0),
                          child: new Image.network(
                            YoutubePlayerController.getThumbnail(
                                videoId: widget.videoID,
                                // todo: get thumbnail quality from list
                                quality: ThumbnailQuality.max,
                                webp: false),
                            fit: BoxFit.fill,
                          ),
                        ),
                      );
                    }
                  },
                ),
              ],
            ),
            Icon(
              Icons.play_circle_filled,
              color: Colors.white,
              size: 55.0,
            ),
          ],
        ),
      ),
    );
  }

@FerBueroTrebino sesuai kode Anda hanya menampilkan thumbnail video youtube tempat Anda memutar video youtube

deepakrana0011 pada 10 Jun 2021

Sama di sini, saya benar-benar tidak tahu harus berbuat apa ....
Iv membuat pemutar dari awal ke VIMEO dan berfungsi dengan baik, menggunakan pemutar video dari flutter itu sendiri, tetapi semua pemain dari youtube semuanya memiliki banyak masalah yang tidak dapat dijawab oleh siapa pun bagaimana cara memperbaikinya