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),

  );
}

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
            ),
        );
    }
}

您如何在视频播放器课程之外播放视频？

1 个答案: