Flutter:需要帮助显示视频

Question

我正试图在flutter中创建一个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);
}
},
),
);
}
}

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

Answer 2

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

Answer 3

我也有同样的问题，但我发现当我删除Container颜色参数时，视频会显示出来。也许这能帮到你。

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