Flutter：需要帮助显示视频答案

【问题标题】：Flutter: Need help displaying videosFlutter：需要帮助显示视频
【发布时间】：2022-07-28 02:08:18
【问题描述】：

我正在尝试在颤振中创建一个 tik tok ui 克隆。我想显示我的资产中的视频，但运行代码时视频没有显示。有人可以查看我的代码并给出任何建议吗？

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

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

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

class _VideoTileState extends State<VideoTile> {
  late VideoPlayerController _videoController;
  late Future _intitializeVideoPlayer;

  @override
  void initState() {
    _videoController = VideoPlayerController.asset('assets/nft_vid1.mp4');
    _intitializeVideoPlayer = _videoController.initialize();
    _videoController.setLooping(true);
    _videoController.play();
    super.initState();
  }

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

  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: FutureBuilder(
        future: _intitializeVideoPlayer,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return VideoPlayer(_videoController);
          } else {
            return Container(color: Colors.pink);
          }
        },
      ),
    );
  }
}

【问题讨论】：

标签： flutter user-interface

【解决方案1】：

你可以试试这个代码：

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

class AssetVideo extends StatefulWidget {
  @override
  AssetVideoState createState() => AssetVideoState();
}

class AssetVideoState extends State<AssetVideo> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.asset('assets/nft_vid1.mp4');

    _controller.addListener(() {
      setState(() {});
    });
    _controller.setLooping(true);
    _controller.initialize().then((_) => setState(() {}));
    _controller.play();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

   @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : Container(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

【讨论】：

以上代码没有显示任何视频。我不想创建另一个材料应用程序。我项目中的视频小部件将与其他类似小部件列表一起使用，以创建类似于应用 tik tok 及其 UI 的发现页面。

【解决方案2】：

我的原始代码正在运行。只需要关闭我的 IDE 并重新启动我的模拟器。

【讨论】：

【解决方案3】：

我有同样的问题，但我发现当我删除容器颜色参数时会显示视频。也许这可以帮助你。

然而，我不知道如何解决这个问题。在我的代码的其他部分中，我有容器颜色并且视频显示...

【讨论】：