Comment on page

Video Feed

Currently, there are five source types of video feed:
Discover Feed
Channel Feed
Playlist Feed 
Playlist Group Feed
Dynamic Content
Integration
import 'package:fw_flutter_sdk/fw_flutter_sdk.dart';
​
/// discover
VideoFeed(
  height: 200,
  source: VideoFeedSource.discover,
);
​
/// channel
VideoFeed(
  height: 200,
  source: VideoFeedSource.channel,
  channel: "your encoded channel id",
);
​
/// playlist
VideoFeed(
  height: 200,
  source: VideoFeedSource.playlist,
  playlist: "your encoded playlist id",
  channel: "your encoded channel id",
);
​
​
/// playlist group
VideoFeed(
  height: 200,
  source: VideoFeedSource.playlistGroup,
  playlistGroup: "your encoded playlist group id",
);
​
/// dynamic content
VideoFeed(
  height: 200,
  source: VideoFeedSource.dynamicContent,
  dynamicContentParameters: const {
    '<cohort key>': ['<cohort value1>', '<cohort value2>']
  },
);
Please refer to the Encoded IDs help article to learn about how to find your encoded channel ID, playlist ID, playlist Group ID
Mode
VideoFeed widget supports three modes: row, column, and grid.
Use grid mode:
Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Expanded(
      child: VideoFeed(
        source: VideoFeedSource.discover,
        mode: VideoFeedMode.grid,
      ),
    )
  ],
);
Video feed configuration
VideoFeed widget provides videoFeedConfiguration property for configuring Video Feed. The current configurable are backgroundColor, cornerRadius, and titlePosition etc. Please refer to VideoFeedConfiguration for more details.
final videoFeedConfiguration = VideoFeedConfiguration();
videoFeedConfiguration.title = VideoFeedTitleConfiguration();
videoFeedConfiguration.title?.hidden = false;
videoFeedConfiguration.titlePosition = VideoFeedTitlePosition.nested;
VideoFeed(
  source: VideoFeedSource.discover,
  videoFeedConfiguration: videoFeedConfiguration,
);
Video player configuration
VideoFeed widget provides videoPlayerConfiguration property for configuring Video Player. The current configurable are playerStyle, videoCompleteAction, and ctaButtonStyle etc. Please refer to VideoPlayerConfiguration for more details.
final videoPlayerConfiguration = VideoPlayerConfiguration();
videoPlayerConfiguration.playerStyle = VideoPlayerStyle.full;
videoPlayerConfiguration.videoCompleteAction = VideoPlayerCompleteAction.advanceToNext;
videoPlayerConfiguration.showShareButton = true;
videoPlayerConfiguration.showMuteButton = true;
videoPlayerConfiguration.showPlaybackButton = true;
​
VideoFeed(
  source: VideoFeedSource.discover,
  videoPlayerConfiguration: videoPlayerConfiguration,
);
Video feed loading result callback
VideoFeed component provides onVideoFeedLoadFinished property for setting video feed loading result callback.
VideoFeed(
  source: VideoFeedSource.discover,
  onVideoFeedLoadFinished: (error) {},
);
Force refreshing  video feed
VideoFeedController? _feedController;
​
VideoFeed(
  source: VideoFeedSource.discover,
  onVideoFeedCreated: (controller) {
    _feedController = controller;
  },
);
​
IconButton(
  onPressed: () {
    //force refreshing video feed
    _feedController?.refresh();
  },
  icon: const Icon(
    Icons.refresh,
  ),
);
​
Picture in Picture(Only supported on iOS)
This feature allows the user to watch media while the application is in a background state. While in background mode a video will display in a floating, resizable window.
To enable PiP functionality, you also need to add Background Modes capability via Signing & Capabilities in your iOS project settings. More information about this can be found here: Apple Documentation​
Once the background mode is enabled, moving from an active state to a background state will immediately trigger the Picture In Picture functionality. In addition to enabling the background mode, you also need to set enablePictureInPicture to true.
final videoFeedConfiguration = VideoFeedConfiguration();
videoFeedConfiguration.enablePictureInPicture = true;
VideoFeed(
  source: VideoFeedSource.discover,
  videoFeedConfiguration: videoFeedConfiguration,
);
Reference
​VideoFeed​
​

Getting Started

Shopping

Last modified 4mo ago