视频无法在颤振 Web 应用程序中播放答案

【问题标题】：Video not playing in flutter web application视频无法在颤振 Web 应用程序中播放
【发布时间】：2021-10-13 03:47:58
【问题描述】：

我正在尝试使用 Viedo 作为 Flutter Web 应用程序中脚手架小部件的背景，但视频没有显示，虽然它在 android 中运行良好，但没有显示在 web 中，也没有给出任何错误。

我正在使用这个插件来实现视频播放器https://pub.dev/packages/video_player

我的代码：

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  VideoPlayerController? _videoPlayerController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _videoPlayerController =
    VideoPlayerController.asset("assets/backgroundVideo.mp4")
      ..initialize().then((_) {
        _videoPlayerController!.play();
        _videoPlayerController!.setLooping(true);
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
          body: Stack(
            children: <Widget>[
              SizedBox.expand(
                child: FittedBox(
                  fit: BoxFit.fill,
                  child: SizedBox(
                    width: _videoPlayerController!.value.size.width ?? 0,
                    height: _videoPlayerController!.value.size.height ?? 0,
                    child: VideoPlayer(_videoPlayerController!),
                  ),
                ),
              ),
              Container(
                width: 100,
                height: 100,
                child: Text("Hi"),
              )
            ],
          ),
        ));
  }
}

【问题讨论】：

标签： flutter flutter-dependencies flutter-web video-player flutter-video-player

【解决方案1】：

第一次在 pubspec.yaml 上添加 video_player_web: ^2.0.2。

然后运行这个小部件。不要只是热重启，再次运行/重建。

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

class HomeLocalVideo extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<HomeLocalVideo> {
  late VideoPlayerController _videoPlayerController;

  @override
  void initState() {
    super.initState();
    _videoPlayerController =
        VideoPlayerController.asset("assets/videoplayback.mp4")
          ..initialize().then((_) {
            _videoPlayerController.play();
            _videoPlayerController.setLooping(true);
            setState(() {});
          });
  }

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: _videoPlayerController.value.isInitialized
            ? Stack(
                children: <Widget>[
                  SizedBox.expand(
                    child: FittedBox(
                      fit: BoxFit.fill,
                      child: SizedBox(
                        width: _videoPlayerController.value.size.width,
                        height: _videoPlayerController.value.size.height,
                        child: VideoPlayer(_videoPlayerController),
                      ),
                    ),
                  ),
                  Container(
                    width: 100,
                    height: 100,
                    child: Text("Hi"),
                  )
                ],
              )
            : Container(),
      ),
    );
  }
}

【讨论】：