播放背景的视频颤抖

Question

我正在通过可滚动页面的视图工作有点像tic tok，每次我离开屏幕时，视频在我不想要的后台连续播放，因为youtube教程中的代码ID，我不知道如何解决问题，所以请帮助我检查问题是否可行解决方案

import 'package:app/packageManager/package.dart';
import 'dart:io';


class Reels extends StatefulWidget {
  const Reels({Key? key}) : super(key: key);

  @override
  State<Reels> createState() => _ReelsState();
}

vidPicker(ImageSource src, BuildContext context) async{
  final vid = await ImagePicker().pickVideo(source: src);
  if(vid != null){
    Navigator.of(context).push(MaterialPageRoute(
        builder: (context) => VideoUploader(
          videoPath: vid.path, videoName:vid.name,
          videoFile:File(vid.path)
        )));
  }

} //To Pick a Video
showDialogueBox(BuildContext, context){
  return showDialog(context: context, builder: (context) => SimpleDialog(
    children: [
      SimpleDialogOption(
        onPressed: () => vidPicker(ImageSource.gallery, context),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: const [
              Icon(Icons.image),
              Text(" Gallery ")
            ],
          ),
        ),
      ),
      SimpleDialogOption(
        onPressed: () => Navigator.of(context).pop(),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: const [
              Icon(Icons.cancel),
              Text(" Cancel ")
            ],
          ),
        ),
      )
    ],
  ));
} //TO Show Option Like Gallery and Cancel

class _ReelsState extends State<Reels> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        automaticallyImplyLeading: false,
        elevation: 0,
        flexibleSpace: SizedBox(
          height: 200,
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                IconButton(onPressed: () => showDialogueBox(BuildContext,context),
                    icon: const Icon(Icons.add),
                  iconSize: 35,
                  color: Colors.teal[300],
                )
              ],
            ),
          ),
        ),
        backgroundColor: Colors.transparent,

      ),
      body: StreamBuilder(
        stream: fireStore.collection("videoReels").snapshots(),
        builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
          // TODO: Put Progress Bar Here
          if (!snapshot.hasData) return const Text("Loading...");
          return PageView.builder(
            itemCount: snapshot.data!.docs.length,
              scrollDirection: Axis.vertical,
              controller: PageController(viewportFraction: 1, initialPage: 0),
              itemBuilder: (context, index){
              DocumentSnapshot dataSnapshot = snapshot.data!.docs[index];
                return Stack(
                  alignment: Alignment.bottomCenter,
                  children: [
                    VideoPlayerContent(videoUrl: dataSnapshot["videoUrl"]),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Expanded(
                          flex: 3,
                          child: Container(
                            height: MediaQuery.of(context).size.height/6,
                            padding: const EdgeInsets.all(10.0),
                            child: Column(

                              children: [
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    Row(
                                      children: [
                                        InkWell(
                                          onTap: () => {},
                                          child: const Icon(Icons.thumb_up, color: Colors.blueAccent,),
                                        ),
                                        const SizedBox(width: 30,),
                                        InkWell(
                                          onTap: () => {},
                                          child: const Icon(Icons.favorite, color: Colors.red,),
                                        )
                                      ],

                                      ),
                                    const SizedBox(width: 20,),

                                    InkWell(
                                      onTap: () => {},
                                      child: Text(" Add Comment here... ", style: TextStyle( color: Colors.grey[500] ),),
                                    )
                                  ],
                                ),
                                const SizedBox(height: 30,),
                                // Second Row
                                Padding(
                                  padding: const EdgeInsets.fromLTRB(30.0, 4.0,30.0,4.0),
                                  child: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                    children: [
                                      InkWell(
                                        onTap: () => { } ,
                                        child:ClipRRect(
                                          borderRadius: BorderRadius.circular(50.0),
                                          child: CircleAvatar(backgroundImage: NetworkImage(dataSnapshot['avatar']), radius: 25,),
                                        ),
                                      ),
                                      Text((dataSnapshot["videoUrl"])),
                                      ElevatedButton(onPressed: ()=> {}, child: Text("Subscribe"))
                                    ],
                                  ),
                                )
                              ],
                            ),
                          ),
                        ),
                        // TODO: Remove this later

                      ],
                    )

                  ],
                );
              },

          );
        }
      ),
    );
  }
}

import 'package:app/packageManager/package.dart';


class VideoPlayerContent extends StatefulWidget {
  final videoUrl;
  const VideoPlayerContent({Key? key, required this.videoUrl}) : super(key: key);
  @override
  State<VideoPlayerContent> createState() => _VideoPlayerContentState();
}

class _VideoPlayerContentState extends State<VideoPlayerContent> {
  late VideoPlayerController _videoController;
  late Future _initializeVideoPlayer;


  @override
  void initState(){
    _videoController = VideoPlayerController.network(widget.videoUrl);
    _initializeVideoPlayer =  _videoController.initialize();
    _videoController.play();
    _videoController.setVolume(1);
    _videoController.setLooping(true);
    super.initState();

  }

  @override
  void dispose (){
    _videoController.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: FutureBuilder(
        future: _initializeVideoPlayer,
        builder: (context, snapshot){
          if (snapshot.connectionState == ConnectionState.done){
            return VideoPlayer(_videoController);
          }else{
            return Container(
              color: Colors.black,
              child: const Center(
                child:  CircularProgressIndicator(
                  value: 0.8,
                  valueColor: AlwaysStoppedAnimation<Color>(Colors.purpleAccent),
                ),
              )

            );
          }
        },
      ),
    );
  }
}

Answer 1

您是否尝试过WidgetSbindingObserver和VisibilityDetector？

如果您没有，那可能对您来说很方便。

对于WidgetBindingObserver，只需将其用作混合物：

class _VideoPlayerContentState extends State<VideoPlayerContent> with WidgetsBindingObserver{
  @override
  void initState(){
    WidgetsBinding.instance?.addObserver(this);
    super.initState();
  }
  
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.resumed:
        // TODO: Handle this case.
        break;
      case AppLifecycleState.inactive:
         // Do like this in other lifecylestate if required !
        _videoController.pause();
        
        // TODO: Handle this case.
        break;
      case AppLifecycleState.paused:
        // TODO: Handle this case.
        break;
      case AppLifecycleState.detached:
        
        // TODO: Handle this case.
        break;
    }
    super.didChangeAppLifecycleState(state);
  }
  
  // rest of the code .....
  
  @override
  void dispose(){
   WidgetsBinding.instance?.removeObserver(this);
   super.dispose();
  }
  

}

使用可见性检测器：

只需将视频播放器与此窗口小部件包裹：

VisibilityDetector(
 // Must provide key 
 key: ValueKey<String>('give any string value to represent key'),
 onVisibilityChanged: (visibilityInfo) {
      // 0 ---> visible, 1 --> not visible
      if(visibilityInfo.visibleFraction == 0){
        _videoController.pause();
        // might need setState over here 
      }
 },
 child : VideoPlayer(_videoController)

);