🎯 产品介绍
📦 插件库
🧑🏻‍💻 与我联系
🚢 出海版
🎯 产品介绍
📦 插件库
🧑🏻‍💻 与我联系
🚢 出海版

📱 小视频详情

介绍

小视频提供 2 种模式方式进行展示

  • Widget 组件方式可嵌入 Flutter 页面，自由度高
  • 打开原生页面，自由度有限

示例图片

全屏模式 宫格模式 双列模式 广告展示

小视频组件

example/pages/video_page.dart
/// [width] View 的宽度
/// [height] View 的高度
/// [titleTopMargin] 标题距顶部的距离
/// [bottomOffset] 内容距底部的距离
/// [controller] 视频控制器
/// [channelType] 标题频道类型
/// [contentType] 展示内容类别
/// [style] 展示样式（全屏、宫格、双 Feed 流）
/// [hideChannelName] 隐藏频道名称
/// [hideFollow] 隐藏关注按钮
/// [showGuide] 显示引导
/// [enableRefresh] 开启刷新
/// [autoPlay] 自动播放
VideoWidget(
    width: 375,
    height: 812,
    hideFollow: true,
    style: VideoDrawParams.drawStyleFullscreen,
  )
💡 小提示
  • 要使用组件需修改 Android 启动页面继承 FlutterFragmentActivity
example/android/app/src/main/java/com/zero/flutter_adcontent_example/MainActivity.java
1import io.flutter.embedding.android.FlutterActivity;
2import io.flutter.embedding.android.FlutterFragmentActivity;
3
4public class MainActivity extends FlutterFragmentActivity {
5}

播放控制器

example/pages/drama_detail.dart
1/// 在 initState 中初始化，并传递给组件
2late ProVideoController controller;
3
4@override
5void initState() {
6  controller = ProVideoController();
7}
8
9@override
10Widget build(BuildContext context) {
11  return Scaffold(
12      body: DramaWidget(
13        controller: controller,
14        ...
15        )
16  )
17}
18
19/// 暂停&继续
20controller.pause();
21controller.resume();