Shulou(Shulou.com)06/02 Report--

What is the solution to Flutter video scrolling? For this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more friends who want to solve this problem find a simpler and easier way.

Video list scrolling.

classification

The playback rules of video lists generally need to be confirmed with specific products and interactions. The playback is generally silent. According to the rules of exposure coordinates, there are two common categories:

Fixed position playback

If you slide the middle position of the screen, delay for several milliseconds to automatically play.

Fixed index + screen ratio playback

For example, the first video that meets the screen ratio can be automatically played; the screen ratio can be the percentage of the height of the current video component, or it can be a fixed position on the screen; when we position the screen ratio to 60%, the visible area of the first video is less than 60% will pause, triggering the next visible video.

For more information, see GitHub: https://github.com/Meng997998/AndroidJX

The following video content learning vx:xx13414521

Video streaming

When developing the Anjuke-content Feed stream, the interaction we encountered was the second type, because the video post appeared unfixed and the position to be played was not fixed. In this case, achieving the same effect as Native is a big problem.

We broke this down during development:

Scroll detection: Put aside the video, simply design a component that can detect specific widgets on demand

Video playback component: video playback is introduced, and video controls are accessed according to scrolling detection requirements

component prototype

Let's take a look at the prototype component we designed.

video-play.gif

We'll place the video post in a color block. By listening for slide events, when stopped, start at the top of the screen, traverse the controls within the current window range, and return them if they are video controls and are more exposed on the screen than expected. For developers to follow up on.

The core process is shown below:

Based on this idea, we developed a ScrollDetectListener component:

Wrap ListView with ScrollDetectListener, ListView for business-related video streaming posts.

Video posts wrapped with MetaConsumer;

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, );}) Video detection component

After the necessary debugging and optimization is done through the prototype, we can try to plug in video controls.

Demo1

Demo2

When processing videos, there are also many points to pay attention to, such as:

The first frame preview/cover image of the video paste, using the first frame of the video, will encounter the problem of black screen at the beginning of the video, using the independent cover image will be better.

Video aspect ratio control

Post status control: to be played, loading, playing, loop/mute, etc.

other programmes

In addition to our implementation, there is an open source library currently available: inview_notifier_list.

This open source library supports fixed position playback, which is what we call the first type.

The project provides preview effects and demo, very conscientious author.

Demo1

Demo2

His rationale is as follows:

Designed an InViewState container, inherited ChangeNotification, used to record the context information of child widgets in the list, InViewState state = InViewNotificerList.of(context);

When the video Widget executes build, call InViewState.addContext to add to the collection

At the same time, the video Widget itself needs to use AnimatedBuilder to associate InViewState with video state, that is, when InViewState is updated, rebuild the video Widget.

When to update InViewState? The answer is sliding. When sliding, it starts to traverse the context of the video Widget added earlier. In fact, it is to determine whether the final coordinates of the control conform to the rules through the context.

If the coordinate position hits the rule, it caches the ID of the current control into a collection_currentInViewIds and notifies the observer that the data has changed, so AnimatedBuilder triggers the build of the child.

During child build (i.e. video space build mentioned above), it will determine whether the id of the current video is in_currentInViewIds and perform differential rendering.

Let's summarize the general process with a diagram:

image

You can see that there are two collections here, one for the Context with cached controls and one for the control data in the name. In order to avoid traversal performance problems, the author introduces cache threshold, which allows users to adjust the number of cache contexts according to actual conditions. For example, we can set the number to the maximum number of videos that can be displayed on a screen. This is probably no more than five.

///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(); }}

This implementation scheme basically satisfies the rules of Scenario 1. And the implementation of local refresh monitoring.

Let's look at scenario 2. If you want to do calculations based on the position of the current video, this library can't support it.

You can see the parameters it exposes: video control top edge difference, bottom edge difference value, window height H

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

If we want to calculate the exposure of the video control itself, we need to obtain the coordinates and size of the control separately to calculate. If secondary development is carried out, it is only necessary to extend the decision function by some parameters.

These two schemes use active detection and passive detection in the logic of detecting video stickers respectively; the biggest difference is that we do not add video stickers to the collection in advance, so we do not need to maintain a fixed capacity cache collection.

About Flutter video scrolling solution is what the answer to the problem is shared here, I hope the above content can be of some help to everyone, if you still have a lot of doubts not solved, you can pay attention to the industry information channel to learn more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.