Flutter短视频观看插件oyu_reels_viewer的使用
Flutter短视频观看插件oyu_reels_viewer的使用
这是一个模仿Instagram短视频播放器的插件，通过传递视频URL即可实现类似Instagram Reels的短视频观看体验。
使用方法
在您的Flutter项目的pubspec.yaml文件中添加以下依赖：
dependencies:
...
oyu_reels_viewer: ^1.0.0在您的库中导入以下内容：
import 'package:oyu_reels_viewer/oyu_reels_viewer.dart';有关Flutter的基础使用，请参考官方文档。
示例代码
初始化视频列表
List<ReelModel> reelsList = [
ReelModel(
'https://assets.mixkit.co/videos/preview/mixkit-tree-with-yellow-flowers-1173-large.mp4', // 视频URL
'Darshan Patil',
likeCount: 2000,
isLiked: true,
musicName: 'In the name of Love',
reelDescription: "Life is better when you're laughing.",
profileUrl:
'https://opt.toiimg.com/recuperator/img/toi/m-69257289/69257289.jpg',
commentList: [
ReelCommentModel(
comment: 'Nice...',
userProfilePic:
'https://opt.toiimg.com/recuperator/img/toi/m-69257289/69257289.jpg',
userName: 'Darshan',
commentTime: DateTime.now(),
),
ReelCommentModel(
comment: 'Superr...',
userProfilePic:
'https://opt.toiimg.com/recuperator/img/toi/m-69257289/69257289.jpg',
userName: 'Darshan',
commentTime: DateTime.now(),
),
ReelCommentModel(
comment: 'Great...',
userProfilePic:
'https://opt.toiimg.com/recuperator/img/toi/m-69257289/69257289.jpg',
userName: 'Darshan',
commentTime: DateTime.now(),
),
],
),
ReelModel(
'https://assets.mixkit.co/videos/preview/mixkit-father-and-his-little-daughter-eating-marshmallows-in-nature-39765-large.mp4',
'Rahul',
musicName: 'In the name of Love',
reelDescription: "Life is better when you're laughing. ",
profileUrl:
'https://opt.toiimg.com/recuperator/img/toi/m-69257289/69257289.jpg',
),
ReelModel(
'https://assets.mixkit.co/videos/preview/mixkit-mother-with-her-little-daughter-eating-a-marshmallow-in-nature-39764-large.mp4',
'Rahul',
),
];简单实现
OyuReelsViewer(
reelsList: reelsList, // 设置视频列表
appbarTitle: 'Instagram Reels', // 设置AppBar标题
onShare: (url) { // 分享按钮回调
log('Shared reel url ==> $url');
},
onLike: (url) { // 点赞按钮回调
log('Liked reel url ==> $url');
},
onFollow: () { // 关注按钮回调
log('======> Clicked on follow <======');
},
onComment: (comment) { // 评论按钮回调
log('Comment on reel ==> $comment');
},
onClickMoreBtn: () { // 更多选项按钮回调
log('======> Clicked on more option <======');
},
onClickBackArrow: () { // 返回箭头按钮回调
log('======> Clicked on back arrow <======');
},
onIndexChanged: (index) { // 当前视频切换时触发
log('======> Current Index ======> $index <========');
},
showProgressIndicator: true, // 是否显示加载指示器
showVerifiedTick: false, // 是否显示认证标志
showAppbar: false, // 是否显示AppBar
playedColor: Colors.orange, // 视频播放进度条颜色
);更多关于Flutter短视频观看插件oyu_reels_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter短视频观看插件oyu_reels_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
oyu_reels_viewer 是一个用于在 Flutter 应用中实现类似 Instagram Reels 或 TikTok 短视频浏览体验的插件。它允许用户上下滑动切换视频，并提供了基本的视频播放控制功能。以下是如何在 Flutter 项目中使用 oyu_reels_viewer 插件的步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 oyu_reels_viewer 插件的依赖：
dependencies:
flutter:
sdk: flutter
oyu_reels_viewer: ^1.0.0 # 请使用最新版本然后运行 flutter pub get 来获取依赖。
2. 导入包
在你的 Dart 文件中导入 oyu_reels_viewer 包：
import 'package:oyu_reels_viewer/oyu_reels_viewer.dart';3. 使用 OyuReelsViewer
OyuReelsViewer 是一个 Widget，你可以将它直接添加到你的 UI 中。以下是一个简单的示例：
class ReelsPage extends StatelessWidget {
final List<String> videoUrls = [
'https://www.example.com/video1.mp4',
'https://www.example.com/video2.mp4',
'https://www.example.com/video3.mp4',
];
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('短视频观看'),
),
body: OyuReelsViewer(
reelsList: videoUrls,
onPageChanged: (int page) {
print('当前播放的视频索引: $page');
},
onReelsEnd: () {
print('所有视频播放完毕');
},
),
);
}
}