首页 > 其他分享 >Flutter video_player播放视频

Flutter video_player播放视频

时间:2023-12-20 15:33:42浏览次数:30  
标签:视频 控件 isVideo 初始化 player controller video 播放 Flutter

1、pubspec.yaml文件引入插件

dependencies:
  ...
  video_player: ^2.8.1

2、页面使用(这里我是宽度百分百,高度自适应了)

late VideoPlayerController _controller;

Container(
    width: MediaQuery.of(context).size.width,
    child: AspectRatio(
       aspectRatio: _controller.value.aspectRatio,
       child: FittedBox(
          fit: BoxFit.cover,
          child: SizedBox(
             width: _controller.value.size.width,
             height: _controller.value.size.height,
             child: VideoPlayer(_controller),
          ),
     ),
))

// 播放视频
 void playVideo(String url) {
    _controller = VideoPlayerController.networkUrl(Uri.parse(url))
      ..initialize().then((value) { // 控件初始化后才能进行以下操作
        setState(() {
        });
        _controller.addListener(() {
          setState(() {});
        });
        _controller.setLooping(true); // 循环播放
        _controller.play(); // 播放
      });
 }

3、一些其他的操作及注意事项

  3.1 判断当前的视频控件是否已经初始化

if (_controller.value.isInitialized) {...} // 不能用这种方法来判断,因为控件没初始化这样写会报控件未初始化的错

// 解决方法,可以在initialize成功时setState赋值给一个变量,后续根据这个变量的值去判断是否已经初始化

  3.2 切换视频链接,直接调playVideo方法传新的链接(该插件现在没有直接能切换视频链接的方法?)

_controller.pause(); // 先暂停当前的视频再去调
playVideo(newUrl);

  3.3 跳转路由时视频还继续播放的问题,我想要的效果是:离开页面暂停播放,回到页面重新播放

  我的解决方法是用路由监听的方式去处理(暂时不清楚有没有别的方法可以实现),详情请见Flutter 利用路由监听页面的展示与否

// 例子 
// isVideoInit是用来判断控件是否初始化,在初次初始化时赋值为true
...
@override
  void didPush() {
    print('跳转该页面而显示');

    if (isVideo && !isVideoInit) {
      // 视频播放
      playVideo(url);
    }

    if (isVideo && isVideoInit) {
      // 视频播放
      _controller.play();
    }
  }

  @override
  void didPushNext() {
    print('跳转下一个页而隐藏');
    if (isVideo) {
      _controller.pause();
    }
  }

  @override
  void didPop() {
    print('当前页面被pop而隐藏');
    if (isVideo) {
      _controller.pause();
    }
  }

  @override
  void didPopNext() {
    print('上一个页面关闭而显示');

    if (isVideo && !isVideoInit) {
      // 视频播放
      playVideo(url);
    }

    if (isVideo && isVideoInit) {
      // 视频播放
      _controller.play();
    }
  }
...

  3.4 控件的部分操作

// 播放
_controller.play()

// 暂停
_controller.pause()

// 设置视频的音量
_controller.setVolume(0.5); // 值0~1.0

// 是否初始化、播放;音量值等
_controller.value.xxx

 

标签:视频,控件,isVideo,初始化,player,controller,video,播放,Flutter
From: https://www.cnblogs.com/atao24/p/17916615.html

相关文章

  • 【Dotnet 工具箱】推荐一个 Flutter 和 .NET 开源的实时聊天 APP
    1.推荐一个Flutter和.NET开源的实时聊天APPHeyy-chat-appHeyy-chat-app是一个开源的聊天应用,使用Flutter、Asp.NetCoreWebApi、SignalR、WebRTC等技术构建的。Flutter作为用户客户端。Asp.NetCoreRESTful作为后端服务。Signalr和WebRTC用于实时通信。SQ......
  • flutter开发总结2
    整个flutter的项目的大局观:分层架构、单一职责、模块化我们遵循这几种构建的理念,在不同的项目中可能具体的实现不同,但是大体是这样的。分层架构主要体现在如:业务逻辑层、数据层、表示层单一职责和模块化:common代表一些通用的工具类,data负责接收数据相关,page代表每个界面,login是一个......
  • H5网页流媒体播放器EasyPlayer播放H.265录像时,无法倍速回放是什么原因?
    流媒体播放器EasyPlayer是我们流媒体组件系列中关注度较高的产品,经过多年的发展和迭代,目前已经有多个应用版本,包括RTSP版、RTMP版、Pro版,以及js版,其中js版本作为网页播放器,受到了用户的广泛使用。在功能上,EasyPlayer支持直播、点播、录像、快照截图、MP4播放、多屏播放、倍数播放......
  • Flutter 用PageView实现轮播
    import'package:flutter/material.dart';classPageSwiperextendsStatefulWidget{constPageSwiper({super.key});@overrideState<PageSwiper>createState()=>_PageSwiperState();}class_PageSwiperStateextendsState<PageSwi......
  • flutter去除隐藏标题栏
    使用 SystemChrome 类来控制系统UI元素的显示和隐藏import'package:flutter/material.dart';import'package:flutter/services.dart';voidmain(){runApp(MyApp());}classMyAppextendsStatelessWidget{@overrideWidgetbuild(BuildContextco......
  • Flutter Dialog Toast 弹窗
    AlertDialogshowDialog(barrierDismissible,//点击遮罩背景是否关闭弹窗context:context,builder:(context){returnAlertDialog(title:constText('Alert弹窗'),content:constText('Alert弹窗内容'),actions:[TextBu......
  • flutter中去除导航栏与状态栏
    方法一SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays:[SystemUiOverlay.bottom]);//隐藏状态栏上方黑边SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays:[SystemUiOverlay.top]);//隐藏导航栏SystemChrome.setEnable......
  • flutter杂知识点
    child和children用于在一个容器小部件(如Container、Column、Row等)中放置一个或多个子小部件1.child属性用于容器只包含一个子小部件的情况;2.children属性用于容器包含多个子小部件的情况。Center小部件(居中、定位、多个方向上居中)Center小部件用于将其子小部件放置在父容器的......
  • Real-Time Single Image and Video Super-Resolution Using an Efficient Sub-Pixel C
    Real-TimeSingleImageandVideoSuper-ResolutionUsinganEfficientSub-PixelConvolutionalNeuralNetwork*Authors:[[WenzheShi]],[[JoseCaballero]],[[FerencHuszar]],[[JohannesTotz]],[[AndrewP.Aitken]],[[RobBishop]],[[DanielRueckert]],[[Z......
  • Java、Kotlin、Flutter、HarmonyOS基本数据类型
    一.Java数据类型基本数据类型整型(byte、short、int、long)、浮点型(float、double)、字符型(char)和布尔型(boolean)1.1整数类型整型是Java中最基本的数据类型之一。它可以用来存储整数值,包括正数、负数和0。Java中的整型有四种类型:byte、short、int和long。byte:占用1个字节,范围从-128......