首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何:默认情况下显示video_player插件的播放控件(flutter-web)

在Flutter Web中,默认情况下,video_player插件不会显示播放控件。然而,我们可以通过一些方法来实现显示播放控件的功能。

一种方法是使用video_player插件的自定义控件功能。我们可以通过创建一个自定义的控件来实现播放控件的显示。首先,我们需要导入video_player插件的库:

代码语言:txt
复制
import 'package:video_player/video_player.dart';

然后,我们可以使用VideoPlayerController来控制视频的播放。在创建VideoPlayerController时,我们可以指定一个控制器来显示播放控件:

代码语言:txt
复制
VideoPlayerController _controller;

@override
void initState() {
  super.initState();
  _controller = VideoPlayerController.network('https://example.com/video.mp4')
    ..initialize().then((_) {
      setState(() {});
    });
}

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

@override
Widget build(BuildContext context) {
  return 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,
      ),
    ),
  );
}

在上面的代码中,我们创建了一个VideoPlayerController并指定了一个网络视频的URL。在初始化时,我们通过调用initialize()方法来初始化控制器,并在初始化完成后更新UI。在dispose()方法中,我们释放控制器资源。在build()方法中,我们使用VideoPlayer控件来显示视频,并使用一个悬浮按钮来控制播放和暂停。

另一种方法是使用flutter_video_player插件。这个插件是video_player的一个封装,提供了更多的功能,包括显示播放控件。我们可以通过在pubspec.yaml文件中添加依赖来使用该插件:

代码语言:txt
复制
dependencies:
  flutter_video_player: ^0.10.11

然后,我们可以使用VideoPlayerWidget来显示视频,并设置showControls参数为true来显示播放控件:

代码语言:txt
复制
import 'package:flutter_video_player/flutter_video_player.dart';

VideoPlayerController _controller;

@override
void initState() {
  super.initState();
  _controller = VideoPlayerController.network('https://example.com/video.mp4')
    ..initialize().then((_) {
      setState(() {});
    });
}

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: _controller.value.isInitialized
          ? VideoPlayerWidget(
              videoPlayerController: _controller,
              showControls: true,
            )
          : Container(),
    ),
  );
}

在上面的代码中,我们创建了一个VideoPlayerController并指定了一个网络视频的URL。在初始化时,我们通过调用initialize()方法来初始化控制器,并在初始化完成后更新UI。在dispose()方法中,我们释放控制器资源。在build()方法中,我们使用VideoPlayerWidget来显示视频,并设置showControls参数为true来显示播放控件。

以上是两种在Flutter Web中显示video_player插件播放控件的方法。你可以根据自己的需求选择其中一种来实现。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

FFmpeg开发笔记(五十二)移动端国产视频播放器GSYVideoPlayer

完成以上三处配置修改之后,才能在App代码中使用GSYVideoPlayer播放控件...App代码中用法分别说明如下:1、普通播放器NormalGSYVideoPlayerNormalGSYVideoPlayer用来播放单个视频文件,在XML文件中放置该控件代码如下所示:2、广告播放器GSYADVideoPlayerGSYADVideoPlayer用来播放视频文件片头广告,注意该控件要和NormalGSYVideoPlayer搭配使用。...ListGSYVideoPlayerListGSYVideoPlayer用来播放在时间上按顺序排成列表若干视频文件,在XML文件中放置该控件代码如下所示:<com.shuyu.gsyvideoplayer.video.ListGSYVideoPlayer...:因为NormalGSYVideoPlayer播放内核基于IJKPlayer、EXOPlayer和AliPlayer,默认就支持HLS、RTMP等直播链接,所以无需改动代码,只要把视频地址换成以m3u8

18510
  • Flutter 实现视频全屏播放逻辑及解析

    一、前言 相信做过移动端视频开发同学应该了解,想要实现视频从普通播放到全屏播放逻辑并不是很简单,比如在 GSYVideoPlayer 中动态全屏切换效果,就使用了创建全新 Surface 来替换实现...image 如下代码所示,首先在正常播放页面下加入官方 video_player 插件 VideoPlayer 控件,并且初始化 VideoPlayerController 用于加载需要播放视频并初始化...,另外此处还用了 Hero 控件用于实现页面跳转过渡动画效果。...三、实现逻辑 之所以可以如此简单地实现动态化全屏效果,其实主要涉及到 video_player 插件在 Flutter 上实现:外接纹理 Texture 。...image 举个例子,在 Android 原生层中 video_player 使用是 exoplayer 播放内核,那么如上图所示,VideoPlayerController 会在初始化时候通过 MethodChannel

    3.3K10

    Flutter 音视频播放实现思路及设计理念

    短视频、IM、新媒体等相对较重业务中都会有音视频身影 ,那么如何通过一个强大跨平台框架去实现一个强大 、高性能、可控音视频播放功能呢?我们是否还仅仅停留在使用插件上层API ?...Flutter 音频播放两种实现思路    开始之前,大家可以先思考一下如果是你来做一个Flutter视频播放器,你会如何去实现?你会遇到哪些困难呢?带着问题来看文章往往会更有收获 。...是Flutter官方plugin中音视频播放插件,我们不妨以这个插件为例,细看其中一些端倪。...以上部分介绍了实现音视频播放插件基础类,接下来进入到我们插件具体实现部分 。...Widget就可以把你提供这些数据显示出来。

    3.2K40

    flutter系列之:在flutter中使用媒体播放

    直播可能会比较复杂,因为涉及到了拉流和推流,需要服务器端支持,但是视频播放就比较简单了,那么如何在flutter中使用媒体播放器呢? 一起来看看吧。...使用前准备工作 flutter本身是不支持媒体播放功能,为了实现这个功能,我们需要使用额外第三方插件叫做video_player。...: sdk: flutter video_player: ^2.4.7 添加好依赖包之后,我们还需要为应用添加相应权限,你确保能够使用影音播放权限。...video_player中和video播放相关类叫做VideoPlayerController,在IOS中底层使用是AVPlayer,在Android中底层使用是ExoPlayer。...总结 这样一个可以播放外部视频app就做好了,运行之后它界面是这样: 大家可以在这个播放基础上进行扩张,一个属于你自己视频APP就完成了。

    1.6K00

    Flutter单引擎和外接纹理内存优化探索之路

    , 包装原生ImageView,做到了利用原生图片缓存,详情可以参考我写这篇文章 Flutter利用原生控件加载图片,馋原生图片缓存 在图片较少时,这种方式固然可以,但是一旦出现像列表加载图片场景...所以PlatformView不适合用于列表,仅仅适合用户页面呈现单一控件情景,比如地图,比如单个视频播放器,有很多引用列表展示视频,使用PlatformView实现那些视频播放插件很显然不适合,我们可以发现...,flutter团队视频播放器https://pub.dev/packages/video_player实现就不是platfomView,是使用外接纹理。...demo没有找到,不知道如何推进,可以留着后面继续研究。...Android OpenGLES2.0(一)——了解OpenGLES2.0 Android OpenGLES2.0(八)——纹理贴图之显示图片 大致了解到 纹理映射是将2D纹理映射到3D场景中立体物体上

    5.6K71

    【译】Flutter 1.20 发布

    现在,在进行 release 版本构建时,默认情况下在移动应用程序中会出现这个行为,目前仅限 TrueType 字体,但在将来版本中将取消该限制。...默认情况下,几个常用小部件将显示开发者期望光标,或者开发者可以从受支持光标列表中指定另一个。 ?...发布插件需要新 pubspec.yaml 格式 当然,Flutter不仅是控件,它也是工具,此版本附带太多更新,但是,这里有一些亮点。...Typesafe platform channels for platform interop 为了响应用户调查中插件作者普遍需求,最近我们一直在尝试如何使 Flutter 与主机平台之间通信对于插件和...image 虽然仍然处于预发行阶段,但是 Pigeon 已经变得足够成熟,因此我们可以在 video_player 插件中使用它。

    4K10

    从 Flutter Go 到 Flutter Go web - 手把手带你轻松玩转 Flutter-web(一)

    从5月后到目前(9月)业内对于 Flutter for Web 观点,也是喜忧参半。 目前官方自述问题包括以下内容: Flutter for Web 还没有插件系统。...Flutter for web 生成代码可能运行缓慢,或者显示重要UI jank 目前,桌面用户界面的互动并不齐全,因此 flutter_web 在PC浏览器上运行,运行用户界面像手机APP一样...第一:亲历Flutter for Web 到底如何; 第二:为需要从Flutter native 到 Flutter-web 开发者,摸石头趟条路,毕竟从native 到 web,并不是一键生成,还有许多坑要填...准备 言归正传,开发前还是建议大家对 Flutter-web 有一个基本了解。如果熟悉请忽略。 请了解 Flutter-web 官方说明 请了解 Flutter-web 迁移指南 构建环境 1....篇幅有限,这些个问题我会在《从 Flutter Go 到 Flutter Go web - 手把手带你轻松玩转 Flutter-web(二)》做解答,如有兴趣想知道我如何解决,敬请继续关注。

    1.7K20

    SkeyePlayer插件使用说明

    鉴于大家对于SkeyePlayer插件使用还不太熟悉,特此写一篇插件使用文档,供大家参考;SkeyePlayer插件有两种,一种是基于IEActiveX控件,一种是基于FireFox(也支持多浏览器...下面我们开始讲解两种插件如何使用。...,诸如缓存,是否播放音频,是否按比列显示,是否显示码率信息;参数说明:sFrameCache:缓存帧数,1-n ,该数值越小,延时越小,当然播放画面可能再网络带宽不理想情况下会比较卡,反之则延时越大,...相应播放也会比较流畅;sPlaySound:是否播放音频,1=播放,0=不播放sShowToScale:是否按比列显示,1=是 0=否 ,软解码时有效sShowStatisticInfo:是否显示码率信息...Close(void);Close关闭Start打开流;注意目前ActiveX控件定义一个控件初始化一个唯一SkeyePlayer播放器实例,一个Start对应一个Close函数;Start函数只能调用一次

    51910

    【译】Flutter beta 2 Now

    之前资源系统偶尔会导致旧款Android手机发布时间延迟。 其次,它允许插件插件本机代码一侧(即Java,Kotlin,Objective-C或Swift)访问资源。...让我们来看一个具体例子,video_player我们几个月前推出插件。 到目前为止,它只能播放来自网络视频,但一些开发人员要求能够使用Flutter资产系统“传递”已经嵌入到应用中视频文件。...我们测试显示Dart 2接近完成,并且非常稳定。Flutter第二个测试版默认启用Dart 2。结果你会看到更快异步调用,以及更丰富类型系统。...接下来考虑应用程序如何使用此列表: 由于对待办事项列表项目的访问是有条件,所以错误会在晚些时候发生。...在这种情况下,只要应用程序启动,我们就会失败,动态列表todo将传递给TodoList构造函数,该构造函数需要List: 控制台输出: Dart 2和可选new / const Dart 2还增加了在调用构造函数时使新和

    2.3K30

    三分钟带你了解FL Studio21版本新增功能

    默认情况下,这将与您当前FL Studio位置并行安装。测试版将过期!一个替代测试版可能还没有准备好。...快捷方式- 添加了Shift+F以切换“显示淡入淡出编辑控件”图标。浏览器:内容类型- .fxp、.fxb 和 .vstpreset 文件现在被标记为插件预设。...选项%3E文件-增加了每分钟自动保存选项(Afrojack请求)。选项%3E常规-新增“将未完成录音放入回收站”。默认情况下打开。否则它们将会丢失。自动化片段编辑器-网格线较粗,有助于提高可见度。...小演示项目,因为我们还没有开始预设开发...总节拍-新“杂耍科学”预设声音字体播放器-增加了“程序模式”选项,以确定如何触发补丁。...-在调试日志中显示更新浏览器文件夹名称播放列表-将“打卡入/出记录”标记重命名为“开始记录”和“停止记录”插件管理器-一些不正确插件搜索路径不再被允许。

    3.4K00

    9.HTML多媒体对象标签元素介绍

    示例: 演示如何为其浏览器支持 Ogg 格式用户提供 Ogg 格式视频,以及如何为其浏览器支持 Ogg 格式用户提供 QuickTime 格式视频....举个例子,当一个媒体已经加载(或部分加载)情况下话调用 load() 方法,这个事件就将被触发。 ended : 播放到媒体结束位置,播放停止。...width: 视频显示区域宽度,单位是 CSS 像素(仅限绝对值;不支持百分比)。 muted: 布尔属性,指明在视频中音频默认设置为开启。 loop: 循环播放。...disablepictureinpicture: 防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式。...属性: height : 资源显示高度. width : 资源显示宽度. src : 被嵌套资源 URL。 type : 用于选择插件实例化 MIME 类型。

    1.3K40

    我用flutter做了一个维基How中文版

    image.png 比如,我们想了解如何健身,只需要搜关键字,健身,它就给你罗列一大堆专业认识编辑wiki给你看: image.png 图文并茂,非常仔细,一般详细列举出了,步骤,提示,警告,所以...可以扫码这个二维码体验 目前支持功能有: 支持显示推荐列表 支持搜索,但是只能搜索到英文,因为api不支持搜索到中文 查看详情 详情里面播放视频功能 显示html文本 支持收藏 支持从收藏移除...widget这里是我封装一些自定义组件,里面包括,在列表里面播放视频控件等 所以,需要那些库呢,这里我贴一下 pull_to_refresh: ^1.5.8 flutter_bloc: ^...flutter_html 因为详情也有些地方内容是html,因此需要使用一个展示html控件。...neeko&chewie&video_player 是视频所需控件,不过我最后没使用neeko,还是用chewie。

    2.2K342

    videojs播放插件使用详解

    控制条高级自定义,如图中进度条及时间在上面,播放按钮、上一个视频、下一个视频,设置及音量在下面这种控件如何实现?...muted 类型: boolean 默认情况下会静音任何音频。 poster 类型: string 在视频开始播放之前显示图像URL。这通常是视频框架或自定义标题屏幕。...Video.js特定选项 undefined除非另有说明,否则默认情况下每个选项 aspectRatio 类型: string 将播放器置于流体模式,并在计算播放动态大小时使用该值。...如果指定,Video.js显示控件(类vjs-playback-rate)允许用户从选择数组中选择播放速度。选项以从下到上指定顺序显示。...默认情况下,这意味着Html5首选技术。其他注册技术将在此技术之后按其注册顺序添加。

    52.8K117

    iOS--React Native视频播放插件

    在React Native移动平台项目开发中,除了React Native 提供封装好部分插件和原声组建外,在实际项目中还需要使用到很多其他插件,比如网络请求、数据库、相机、相册、通讯录、视频播放器...另外,这些博文都是来源于我日常开发中技术总结,在时间允许情况下,我会针对技术点分别分享iOS、Android两个版本,如果有其他技术点需要,可在文章后留言,我会尽全力帮助大家。...这篇文章重点介绍原生视频播放插件开发与使用。 源码Demo获取方法 如果需要React Native浏览器插件源码demo,欢迎关注 【网罗开发】微信公众号,回复【63】便可领取。...()宏 添加React Native跟控制器 声明被JavaScript 调用方法 创建一个视频播放控制器 创建一个视频播放图层 将视频播放图层添加到父控件图层 JavaScript调用浏览器方法 三...将视频播放图层添加到父控件图层 //将视频播放图层添加到父控件图层 [_playerVC.view.layer addSublayer:playLayer];

    1.1K10

    videojs插件使用「建议收藏」

    videojs插件使用 介绍:兼容性强,开源免费,文档清晰,界面可定制等 使用整理:使用主要针对于移动端视频播放,考虑点:视频显示适配手机宽度;适配定义样式;在微信端,安卓、ios视频空间控件不同,定制等会自动被微信视频控件覆盖...以在播放控制条中添加一个关闭按钮为例,展示如果使用插件实现我们自己想要功能。...: true, /** * 视频播放显示宽度 * 参数类型:String|Number * 例如:200 or "200px" **/ width: 300, /** * 视频播放显示高度 *...lang目录下 */ language: 'zh-CN', /** * 语言列表 * 参数类型:Object * 自定义播放器中可用语言 * 注:一般情况下,这个选项是不需要,最好是通过自定义语言videojs.../** * 是否允许重写默认消息显示出来时,video.js无法播放媒体源 * 参数类型:Boolean */ notSupportedMessage: false, /** * 插件 * 参数类型:

    10.3K21

    FL Studio21最新中文版本全新功能详细介绍

    常规设置(General Settings):默认情况下开启“将撤消记录放入回收站”。若关闭此功能,则在撤消时被删除。·翻转铅笔按钮-将笔辅助按钮行为与主按钮交换。...触摸控制器(Touch Controller)-当音符数据从钢琴卷帘窗播放时,在触摸控制器上可视化来自所选通道音符活动。键入值(Type in value)-选择时显示当前值更多信息。...·视图(View)-当取消选择显示淡色预览/增色预览时,按住 (Alt) 可进行淡色和增加色彩临时预览。·菜单(Menu)-(右键单击)“显示淡色编辑控件”图标,用于快速访问淡色选项。...·快捷键(Shortcut)-添加 (Shift + F) 以切换“显示淡色编辑控件”图标。...Gross Beat-新“Juggling Science”预设。Soundfont Player-增加了一个“程序模式”选项,以确定如何触发Patcher(补丁)。

    3.7K20

    水果编曲FL Studio20.99中文版吗免费下载

    工具栏 –新增一个工具栏按钮用来更改设置语言(不再需要进入设置一层层点击了),当语言从默认值更改后,按钮才会显示出来。...MIDI设置 -为链接到外部控制器控件添加了“拾取”功能(常规设置中选项)。混音器 -混音器发送旋钮提示值 现在显示dB分贝值。...Patcher- 现在地图选项卡(The Map tab)是一个带有滚动条静态工作区,在放置插件预设时按住(Alt)键,可以在没有任何连接情况下添加它。...ui.ScrollWindow选项,在可能情况下进行水平滚动用于直接访问脚本可选取pot拾取功能miDisplayRect参数,用于指示矩形对象适用于哪些轨道播放列表模块中轨道选择功能在选定编辑通道周围显示一个红框方法测试版...钢琴键盘 -添加了更宽八度音阶和根音选择。层通道 -添加了新顺序播放模式(循环方式)。录音 - “监控外部输入”默认值现在是“布防时”。

    1.1K00

    最新版水果FL Studio21新版本更新全解析!80项更新与改进!

    常规设置(General Settings):默认情况下开启“将撤消记录放入回收站”。若关闭此功能,则在撤消时被删除。·翻转铅笔按钮-将笔辅助按钮行为与主按钮交换。...触摸控制器(Touch Controller)-当音符数据从钢琴卷帘窗播放时,在触摸控制器上可视化来自所选通道音符活动。键入值(Type in value)-选择时显示当前值更多信息。...·视图(View)-当取消选择显示淡色预览/增色预览时,按住 (Alt) 可进行淡色和增加色彩临时预览。·菜单(Menu)-(右键单击)“显示淡色编辑控件”图标,用于快速访问淡色选项。...·快捷键(Shortcut)-添加 (Shift + F) 以切换“显示淡色编辑控件”图标。...Gross Beat-新“Juggling Science”预设。Soundfont Player-增加了一个“程序模式”选项,以确定如何触发Patcher(补丁)。

    3.4K30
    领券