Links
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