flutter - 您如何在视频播放器类之外播放视频？

Question

抱歉，如果问题不是那么直截了当，我才刚刚开始。我通过颤振示例看到的每个播放视频示例都使用与视频播放器在同一类中的浮动操作按钮。我想在我的主屏幕上添加一个视频播放器实例并尝试不同的方式来播放视频（点击不同的元素等。我似乎无法访问实例来访问控制器。我不确定如何实际创建一个视频播放器实例，然后从另一个地方访问视频控制器。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';


class VideoPlayerScreen extends StatefulWidget {
  VideoPlayerScreen({Key key}) : super(key: key);
  final VideoPlayerScreenState videoState = new VideoPlayerScreenState();
  @override
  VideoPlayerScreenState createState() => VideoPlayerScreenState();
}

class VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController controller;
  Future<void> initializeVideoPlayerFuture;  

  @override
  void initState() {
    // Create and store the VideoPlayerController. The VideoPlayerController
    // offers several different constructors to play videos from assets, files,
    // or the internet.
    controller = VideoPlayerController.network('https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    );

    // Initialize the controller and store the Future for later use
    initializeVideoPlayerFuture = controller.initialize();

    // Use the controller to loop the video
    controller.setLooping(true);

    super.initState();
  }


  @override
  void dispose() {
    // Ensure you dispose the VideoPlayerController to free up resources
    controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      // Use a FutureBuilder to display a loading spinner while you wait for the
      // VideoPlayerController to finish initializing.
      child: FutureBuilder(
        future: initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // If the VideoPlayerController has finished initialization, use
            // the data it provides to limit the Aspect Ratio of the Video
            return AspectRatio(
              aspectRatio: controller.value.aspectRatio,
              // Use the VideoPlayer widget to display the video
              child: VideoPlayer(controller),
            );
          } else {
            // If the VideoPlayerController is still initializing, show a
            // loading spinner
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

//this is the button I'm calling from the app.dart file

Widget playPauseButton(VideoPlayerScreen videoPlayer){

  return IconButton(
    alignment: Alignment.center,

    onPressed: (){
      // Wrap the play or pause in a call to `setState`. This ensures the
          // correct icon is shown
          setState(() {

            // If the video is playing, pause it.
            if (videoPlayer.videoState.controller.value.isPlaying) {
              videoPlayer.videoState.controller.pause();
            } else {
              // If the video is paused, play it
              videoPlayer.videoState.controller.play();
            }
          });
        },
      icon: Icon(videoPlayer.videoState.controller.value.isPlaying ? Icons.pause: Icons.play_arrow),

  );
}

标签： flutterdart

Answer 1

您可以创建一个名为的类VideoProvider并在其中放置一个VideoPlayer小部件。之后，您只需要创建一个名为的参数并将controller其传递给您的VideoPlayer小部件。controller应该是VideoPlayerController; 这是一个例子：

class MySpecificPage extends StatefulWidget {
    @override
    State<StatefulWidget> createState() {
        return _MySpecificPageState();
    }
}

class _MySpecificPageState extends State<MySpecificPage> {

    VideoPlayerController controller;
    VoidCallback listener;

    @override
    void initState() {
        listener = () => setState(() {});
        videoHandler();
        super.initState();
    }

    void videoHandler() {
        if (controller == null) {
            controller = VideoPlayerController.network('https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4')
                ..addListener(listener)
                ..setVolume(0.5)
                ..initialize();
        } else {
            if (controller.value.isPlaying) {
                controller.pause();
            } else {
                controller.play();
            }
        }
    }


    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Videop Provider Example'),
            ),
            body:Container(
            child: Column(
                children: <Widget>[
                    VideoProvider(controller),
                    RaisedButton(
                        child: Text('click here to play & puase the video'),
                        onPressed: () {
                            videoHandler();
                        },
                        )
                ],
                ),
            ),
        );
    }
}

class VideoProvider extends StatelessWidget {
    final VideoPlayerController controller;

    VideoProvider(this.controller);

    @override
    Widget build(BuildContext context) {
        return AspectRatio(
            aspectRatio: 16 / 9,
            child: VideoPlayer(
                controller
            ),
        );
    }
}