Flutter视频滚动播放的解决方案是什么

发布时间:2021-12-07 19:43:51 作者:柒染
来源:亿速云 阅读:217

Flutter视频滚动播放的解决方案是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

视频列表滚动播放。

分类

视频列表的播放规则一般需要和具体产品、交互确认,播放一般都是静音的,根据露出坐标规律,常见的有两大类:

固定位置播放

如滑动屏幕的中间位时,延迟若干毫秒自动播放。

固定索引+屏占比播放

如第一个符合屏占比的视频可以自动播放;屏占比可以是当前视频组件的高度百分比,也可以是屏幕上的固定位置;当我们把屏占比定位60%时,第一个视频的可见区小于60%会暂停播放,触发可见的下一个视频。

更多相关学习内容看GitHub: https://github.com/Meng997998/AndroidJX
以下视频内容学习vx:xx13414521

Flutter视频滚动播放的解决方案是什么

有料视频流

在开发安居客-有料内容Feed流时,我们遇到的交互是第二种,由于视频贴出现不固定,待播放的位置也不固定。 在这种情况下要实现与Native一致的效果是一个不小的难题。

我们在开发过程中将这个问题进行了分解:

组件原型

下面看一下我们设计的原型组件效果。

Flutter视频滚动播放的解决方案是什么

video-play.gif

我们将视频贴子用一个色块进行占位。通过监听滑动事件,当停止后,从屏幕顶端开始,遍历当前视窗范围内的控件,如果是视频控件,并且在屏幕上的露出比符合预期,那么将其返回。供开发者后续处理。

核心流程如下图所示:

Flutter视频滚动播放的解决方案是什么

基于这个思路,我们开发了一个ScrollDetectListener组件:

Flutter视频滚动播放的解决方案是什么

MetaConsumer(
  index: index,  data: data,  builder: (BuildContext context, VideoPlayModel model, Widget child) {    var play = model.playIndex == index;    return Container(
      width: MediaQuery.of(context).size.width,      alignment: Alignment.center,      height: 100,      padding: EdgeInsets.zero,      child: play ? Text('Playing $data') : Text('$data'),      color: play ? Colors.redAccent : Colors.grey[100] ?? Colors.grey,
  );
})

视频检测组件

通过原型完成必要的调试和优化之后,我们可以尝试接入视频控件。

Demo1

Flutter视频滚动播放的解决方案是什么

Demo2

Flutter视频滚动播放的解决方案是什么

在处理视频的时候,需要注意的点也很多,比如:

Flutter视频滚动播放的解决方案是什么

其他方案

除了我们的实现方案,目前还可以找到的一个开源库: inview_notifier_list。

这个开源库它支持固定位置播放,也就是我们说的以第一种类型。

该项目提供了预览效果和demo,非常良心的作者。

Demo1

Flutter视频滚动播放的解决方案是什么

Demo2

Flutter视频滚动播放的解决方案是什么

他的基本原理如下:

我们用一张图来概括性大致流程:

Flutter视频滚动播放的解决方案是什么

image

可以看到这里面有两个集合,分别用那个有缓存控件的Context和名中控件数据。为了避免遍历的性能问题,作者引入了缓存阈值,可以由使用者根据实际情况调整缓存context的个数。比如我们可以把个数设置为一个屏幕最多能展示的视频条数。这样很可能不超过5个。

///Add the widget's context and an unique string id that needs to be notified.void addContext({@required BuildContext context, @required String id}) {
  _contexts.add(_WidgetData(context: context, id: id));
}///Keeps the number of widget's contexts the InViewNotifierList should stored/cached for///the calculations thats needed to be done to check if the widgets are inView or not.///Defaults to 10 and should be greater than 1\. This is done to reduce the number of calculations being performed.void removeContexts(int letRemain) {  if (_contexts.length > letRemain) {
    _contexts = _contexts.skip(_contexts.length - letRemain).toSet();
  }
}

这个实现方案基本满足的场景一的规则。并且实现了局部刷新的监听。

下面我们看下场景二,如果要基于当前视频的位置做计算,这个库支持不了。

可以看到它暴露的参数: 视频控件上边缘差值,下边缘差值值,视窗高度H

//Check if the item is in the viewport by evaluating the provided widget's isInViewPortCondition condition.
  isInViewport = _isInViewCondition(deltaTop, deltaBottom, vpHeight);

如果我们要计算视频控件自身的露出情况,需要单独获取控件的坐标和大小来计算。如果进行二次开发,只需要将判定函数扩展一些参数即可。

这两种方案,在检测视频贴的逻辑上分别采用了主动检测和被动检测; 最大差异是我们没有将视频贴提前添加到集合中,所以不用维护一个固定容量的缓存集合。

关于Flutter视频滚动播放的解决方案是什么问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。

推荐阅读:
  1. 视频加密播放
  2. Flutter 滚动监听及实战appBar滚动渐变的实现

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

flutter

上一篇:IIS出现Service Unavailable 地址池问题该怎么解决

下一篇:ProxyStrike运行bug的解决办法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》