Flutter Video Player On Click 传递 URL 动态并加载视频进行播放

2024-03-30

下面附有视频播放器的示例屏幕 https://i.stack.imgur.com/PoeyX.png如何使视频播放器动态播放,同时通过传递视频 URL 来单击列表播放视频?

单击时我已经传递了 URL 并尝试重新初始化并开始播放它不起作用,状态没有改变

这是我的代码,

videoplayerscreen.dart,

class VideoPlayerScreen extends StatefulWidget {
  int playBackTime;
  int playBackTotalTime;
  String setPlayTime;
  String setPlayDuration;
  double aspectRatio;
  String videoUrl;
  bool isForward;
  bool isFullScreen;
  bool allowFullScreen;
  bool showControls;
  bool isAutoPlay;
  int startWithinSeconds;

  VideoPlayerScreen({
    Key key,
    this.playBackTime = 0,
    this.playBackTotalTime = 0,
    this.setPlayTime = "00:00",
    this.setPlayDuration = "00:00",
    this.aspectRatio = 16 / 9,
    this.videoUrl =
        "",
    this.isForward = true,
    this.isFullScreen = false,
    this.allowFullScreen = false,
    this.showControls = true,
    this.isAutoPlay = false,
    this.startWithinSeconds = 0,
  }) : super(key: key);

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

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController _controller;

  void initPlayer() async {
    _controller = VideoPlayerController.network(widget.videoUrl);
    await _controller.initialize();
    _controller.setLooping(true);
    _controller.seekTo(Duration(seconds: widget.startWithinSeconds));
    if (widget.isAutoPlay) {
      _controller.play();
    }
    _controller.addListener(() {
      setState(() {
        widget.playBackTime = _controller.value.position.inSeconds;
        widget.setPlayTime = timeFormatter(widget.playBackTime);
      });
    });
  }

  @override
  void initState() {
    initPlayer();
    super.initState();
  }

 @override
  void dispose() {
    _controller.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
    super.dispose();
  }

在配置中,

video_player: ^0.10.5

在其他类中调用 CourseDetails.dart ,

             Container(
                  padding: EdgeInsets.only(left: 20.0, right: 20.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(8.0),
                    child: _playUrl != null
                        ? VideoPlayerScreen(videoUrl: _playUrl)
                        : Image.asset(
                            'assets/images/test_video_player_screen.png'),
                  ),
                )
GestureDetector(
 **here i am changing the state **
      onTap: () {
        setState(() {
            _playUrl = videoLists['course_video_url'];
        });
      },
      child: Padding(
        padding:
            EdgeInsets.only(left: 10.0, right: 20.0, top: 2.0, bottom: 5.0),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Text(
              "${videoLists['sn_no']}",
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: Colors.black45,
                  fontFamily: 'Oswald-SemiBold'),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(left: 10.0),
                  child: Text(
                    "${videoLists['course_video_title']}",
                    textAlign: TextAlign.left,
                    style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                        color: Colors.black45,
                        fontFamily: 'Oswald-SemiBold'),
                  ),
                ),
                Row(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.only(left: 10.0),
                      child: Text(
                        "Video - ${videoLists['course_video_duration']}",
                        textAlign: TextAlign.left,
                        style: TextStyle(
                            fontSize: 12,
                            fontWeight: FontWeight.bold,
                            color: Colors.grey,
                            fontFamily: 'Oswald-SemiBold'),
                      ),
                    ),
                    Padding(
                        padding: EdgeInsets.only(left: 5.0),
                        child: videoLists['course_watched']
                            ? Image.asset(
                                'assets/images/green_tick_icon.png',
                                width: 12.0,
                                height: 12.0,
                              )
                            : null),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    )

感谢所有的答复。我得到了解决方案:

In Build函数,我检查了是否发生了任何 url 更改。如果发生变化,我会处理旧控制器并重新初始化视频控制器。然后,它对我来说效果很好。

@override
Widget build(BuildContext context) {
    if (currentObjectVideoUrl != widget.videoUrl) {
       _controller.dispose();
       initPlayer();
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter Video Player On Click 传递 URL 动态并加载视频进行播放 的相关文章

随机推荐

  • Peewee - 无法连接到主机上的 MySQL 服务器

    我正在使用 peewee ORM 开发一个基于 Flask 的 python 应用程序 我最初连接到本地存储在我的计算机上的数据库 现在尝试过渡到远程连接到数据库 我已经通过服务器的 cpanel 部分在 phpmyadmin 中设置了数据
  • 猫鼬方法和静态有什么用?

    猫鼬方法和静态有什么用 它们与普通函数有何不同 谁能用例子解释一下区别 数据库逻辑应该封装在数据模型中 Mongoose 提供了两种方法来做到这一点 方法和静态 Methods向文档添加实例方法 而Statics向模型本身添加静态 类 方法
  • 如何在 NSUserDefaults 中设置 NSArray?

    我想知道为什么有 arrayForKey 方法 但没有 setArrayForKey 方法 我该如何设置该数组 只需使用setObject forKey 我想原因是有一个特殊的arrayForKey and dictionaryForKey
  • Oracle - 将多个计数作为一个查询返回

    我有几个疑问 详情如下 我希望能够运行一个返回两个计数的 SQL 查询 这可能吗 1 select nvl count rowid 0 from tablename where OPP FOO and date BAZ 2 select n
  • 如何比较 MongoDB 中的两个对象(忽略键的顺序)?

    查找 objA 与 objB 相同的所有文档的最佳方法是什么 键的顺序并不重要 灵感来自另一个问题 https stackoverflow com questions 74962485 how to use lookup on two co
  • 针对 .NET 框架的多个版本的最佳方法是什么?

    我正在构建一个类库 并将其部署为 NuGet 包 这使我可以根据所添加项目的 NET Framework 版本选择要添加为引用的不同程序集 这是一个非常好的功能 但我想知道是否可以拥有一个类库项目 并针对多个版本的 NET 框架构建它 我宁
  • Python 电子邮件正文为空

    我来这里是想请你帮忙 问题是 我的电子邮件主题没问题 但当我打开电子邮件时 它是空的 我真的不明白为什么 这是我的代码 from urllib2 import urlopen import smtplib s smtplib SMTP sm
  • 禁用 JavaScript 时 SSR 不起作用

    在这里参考这张票 https github com zeit next js issues 4210 https github com zeit next js issues 4210我目前想知道为什么当您禁用 javascript 时 使
  • 有 C++ 的样式检查器吗?

    我已经使用java有一段时间了 我发现格子风格 http checkstyle sourceforge net 非常有用 我开始使用 c 我想知道是否有具有类似功能的样式检查器 我主要寻找编写定制支票的能力 关于什么Vera http ww
  • cartopy中shapefile的匹配投影

    我正在尝试使用 matplotlib 和 cartopy 制作 Choropleth 地图 显然我需要首先绘制 shapefile 然而 尽管有人提出了类似的问题 但我没能做到这一点here https stackoverflow com
  • 反引号无法在 shell 脚本中运行 mysql 查询

    您好 我正在尝试从 shell 脚本运行 MySQL 查询 mysql u root p 1234 e CREATE TABLE DB aa vv cc id int 10 unsigned NOT NULL AUTO INCREMENT
  • Json压缩传输

    我想知道基于 javascript 的 json 压缩的当前状态是什么 当前是否有任何库允许通过用单个字符替换长名称或其他方法来压缩 json 有人有用 Javascript 实现 HPPack https github com WebRe
  • Files.newDirectoryStream 与 Files.list

    我知道文件 列表 路径 http docs oracle com javase 8 docs api java nio file Files html list java nio file Path uses 文件 newDirectory
  • 使用适用于 Android 的 XSL-FO 生成 PDF

    是否可以使用 XSL FO 在 Android 应用程序中生成 PDF 下载 Apache FOP 并查看 Android 运行时中是否包含所需的依赖项 可能会比较慢 您可以使用 iText 或 PDFBox 来呈现 PDF 或者使用服务器
  • Cloudwatch Insights 在多行日志中搜索

    日志示例 REQUEST ID 123 Video id 444 REQUEST ID 123 Request error REQUEST ID 534 Video id 555 REQUEST ID 534 Request ok 问题 如
  • tensorflow2.1 InvalidArgumentError:断言失败:[0] [Op:Assert]名称:EagerVariableNameReuse

    我训练了自定义模型并使用了 TensorFlow 2 1 当我运行代码时 我收到以下错误 InvalidArgumentError 断言失败 0 Op Assert 名称 EagerVariableNameReuse 这是显示错误的行 se
  • HammerJS 滑动与 Mat-Tabs 阻止垂直滚动

    所以我的 Angular 应用程序中有一个组件 其中包含数据类别的选项卡以及选项卡内容的值数组 我想使用 HammerJS 在选项卡之间滑动以获得更原生的体验 我还安装了这个虚拟滚动包 https github com rintoj ang
  • 网站管理员 API - 配额限制

    我们正在尝试通过调用使用 Webmasters API NET 客户端库下载网站的页面数据WebmastersService SearchAnalytics Query 为此 我们正在使用Batching https developers
  • 通过匹配其他数组来更改对象属性的位置

    我有一个对象 var data D 1 AA Changes xml This is a string D 2 Compare AA Changes xml This is a string 我需要将该属性与我拥有的另一个数组相匹配 如下所
  • Flutter Video Player On Click 传递 URL 动态并加载视频进行播放

    下面附有视频播放器的示例屏幕 https i stack imgur com PoeyX png如何使视频播放器动态播放 同时通过传递视频 URL 来单击列表播放视频 单击时我已经传递了 URL 并尝试重新初始化并开始播放它不起作用 状态没