当我使用 youtube_player_flutter 和 carousel_slider 包时，Youtube 播放器在 Flutter / Dart 应用程序中不起作用：

如何解决当我使用 youtube_player_flutter 和 carousel_slider 包时，Youtube 播放器在 Flutter / Dart 应用程序中不起作用：

我在 Flutter / Dart 中使用了以下 youtube_player_Flutter 和 carousel_slider 包：

https://pub.dev/packages/youtube_player_flutter

https://pub.dev/packages/carousel_slider

我已经在视频预览屏幕上设置了它们，但是当我使用 carousel_slider 从一个 youtube 视频导航到另一个 youtube 视频屏幕时，控制台面板中出现以下错误：

W/ContentCatcher(17665): Failed to notify a WebView
E/Flutter (17665): [ERROR:Flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: MissingPluginException(No implementation found for method evaluateJavascript on channel com.pichillilorenzo/Flutter_inappwebview_7)
E/Flutter (17665): #0      MethodChannel._invokeMethod
package:Flutter/…/services/platform_channel.dart:156
E/Flutter (17665): <asynchronous suspension>
E/Flutter (17665): #1      InAppWebViewController.evaluateJavascript
package:Flutter_inappwebview/…/in_app_webview/in_app_webview_controller.dart:1375
E/Flutter (17665): <asynchronous suspension>

我有 10 MB/s 的互联网速度，所以我 100% 确定这不是互联网速度/网络问题。

Youtube 视频网址为 https://www.youtube.com/watch?v=ZN_XrB_St-8

请找到所附的应用程序截图。请检查问题并建议我如何解决它。非常感谢。期待听到您的声音。

解决方法

以下是我们使用两个包的预览屏幕的完整代码：

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:videoproject/screens/PhotoEnlargeViewScreen.dart';
import 'package:videoproject/vendor/Constants.dart';
import 'package:videoproject/vendor/Masterfunctions.dart';
import 'package:videoproject/widgets/CustomLoaderWidget.dart';
import 'package:videoproject/widgets/CustomerLoaderCircularProgressIndicatorWidget.dart';
import 'package:videoproject/widgets/ShowAppDialog.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class PhotosViewerScreen extends StatefulWidget {
  final List filesPathList;
  final int fileIndex;

  PhotosViewerScreen({required this.filesPathList,this.fileIndex = 0});

  @override
  _PhotosViewerScreenState createState() => _PhotosViewerScreenState();
}

class _PhotosViewerScreenState extends State<PhotosViewerScreen> {
  MasterFunctions mf = MasterFunctions();
  CarouselController _carouselController = CarouselController();

  List _filesPathList = [];
  int? _activeFileIndex;
  String? _activeFilePath;
  bool _isPlayingVideo = false;

  bool _isLoading = false;

  YoutubePlayerController? _yTPlayerController;

  @override
  void initState() {
    _filesPathList = widget.filesPathList;
    _activeFileIndex = widget.fileIndex;
    _activeFilePath = widget.filesPathList[widget.fileIndex];

    if (_activeFilePath.toString().indexOf('youtube.com') != -1) {
      // video case
      _isPlayingVideo = true;
      _videoinit();
    } else {
      // photo case
      _isPlayingVideo = false;
    }

    //
    super.initState();
  }

  customcallbackFunction(
      int currentPhotoIndex,CarouselPageChangedReason reason) async {
    _activeFileIndex = currentPhotoIndex;
    _activeFilePath = _filesPathList[_activeFileIndex as int];

    print("_activeFilePath: $_activeFilePath");

    //
    if (_activeFilePath.toString().indexOf('youtube.com') != -1) {
      // video case
      _isPlayingVideo = true;
      _videoinit();
    } else {
      // photo case
      _isPlayingVideo = false;
    }

    if (mounted) {
      setState(() {});
    }
  }

  _videoinit() {
    String videoId;
    videoId = YoutubePlayer.convertUrlToId(_activeFilePath.toString())!;

    if (_yTPlayerController == null) {
      _yTPlayerController = YoutubePlayerController(
        initialVideoId: videoId,//'iLnmTe5Q2Qw',flags: YoutubePlayerFlags(
          autoPlay: true,// mute: true,),);
      if (mounted) {
        setState(() {});
      }
    } else {
      // already initialized a video and wants to play next video
      // dispose last video if playing
      final _oldYTPlayerController = _yTPlayerController;
      WidgetsBinding.instance!.addPostFrameCallback((_) async {
        _oldYTPlayerController!.dispose();

        // Initing new controller
        _yTPlayerController = YoutubePlayerController(
          initialVideoId: videoId,flags: YoutubePlayerFlags(
            autoPlay: true,);
        if (mounted) {
          setState(() {});
        }
      });

      //
      if (mounted) {
        setState(() {
          _yTPlayerController = null;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    final double heightWrapper = MediaQuery.of(context).size.height;
    bool isPortrait =
        (MediaQuery.of(context).orientation == Orientation.portrait);

    return CustomLoaderWidget(
      isLoadingStatus: _isLoading,appBodyWidget: Scaffold(
        appBar: (_isPlayingVideo == false ||
                (_isPlayingVideo == true && isPortrait == true))
            ? AppBar(
                title: Column(
                  mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,mainAxisSize: MainAxisSize.max,children: [
                    Text(
                      (widget.filesPathList.length > 1)
                          ? 'Photos/Videos Preview'
                          : "${(_activeFilePath.toString().indexOf('youtube.com') != -1) ? 'Video' : 'Photo'} Preview",style: Theme.of(context).appBarTheme.textTheme!.headline1,if (widget.filesPathList.length > 1)
                      Text(
                        // "${(_activeFilePath.toString().indexOf('youtube.com') != -1) ? 'Video' : 'Photo' } ${_activeFileIndex! + 1} out of ${widget.filesPathList.length}","Showing ${_activeFileIndex! + 1} out of ${widget.filesPathList.length}",style: Theme.of(context).textTheme.bodyText2,],actions: [
                  IconButton(
                    icon:
                        Icon(Icons.help,color: Theme.of(context).primaryColor),onPressed: () {
                      ShowAppDialog.showAlertDialog(
                          context: context,titleText: 'Tips',subtitleText:
                              '- Swipe left or right to see more photos/videos.\n- Tap on photo to see enlarge view.\n- Rotate phone horizontally to see video on full screen.');
                    },)
            : null,body: Container(
          height: MediaQuery.of(context).size.height,width: MediaQuery.of(context).size.width,decoration: BoxDecoration(
              // color: Colors.black,child: Center(
            child: (_filesPathList.length > 0)
                ? CarouselSlider(
                    carouselController: _carouselController,options: CarouselOptions(
                      height: heightWrapper,viewportFraction: 1.0,initialPage: _activeFileIndex!,enableInfiniteScroll: false,enlargeCenterPage: false,onPageChanged: customcallbackFunction,// autoPlay: false,items: _filesPathList.map((mapFilePath) {
                      if (_activeFilePath.toString().indexOf('youtube.com') !=
                          -1) {
                        // video case
                        if (_yTPlayerController != null) {
                          return Container(
                            // color: Colors.black,padding: EdgeInsets.symmetric(
                                vertical: (isPortrait)
                                    ? (heightWrapper * 0.20)
                                    : 0.0),child: Hero(
                              tag: _activeFilePath.toString(),child: YoutubePlayer(
                                controller: _yTPlayerController!,showVideoProgressIndicator: true,progressIndicatorColor: CONST_APP_PRIMARY_COLOR,aspectRatio: 1,);
                        } else {
                          return Container(
                            width: 200.0,height: 200.0,child: Text('player not found'),);
                        }
                      } else {
                        // photo case
                        return Container(
                          child: (mf.isValidUrl(_activeFilePath!))
                              ? InkWell(
                                  onTap: () {
                                    Navigator.push(
                                      context,MaterialPageRoute(
                                        builder: (context) =>
                                            PhotoEnlargeViewScreen(
                                                photoPath: _activeFilePath!),);
                                  },child: Hero(
                                    tag: _activeFilePath.toString(),child: CachedNetworkImage(
                                      imageUrl: _activeFilePath!,placeholder: (context,url) =>
                                          new CustomerLoaderCircularProgressIndicatorWidget(),errorWidget: (context,url,error) =>
                                          new Icon(Icons.error),)
                              : Image.asset(
                                  'assets/images/person04.jpg',alignment: Alignment.center,fit: BoxFit.cover,);
                      }
                    }).toList(),)
                : Container(
                    child: CustomerLoaderCircularProgressIndicatorWidget(),);
  }
}

请分享您的建议，我们将不胜感激。非常感谢。