视频内容

视频内容

此章节将演示如何请求在Flutter环境下请求与展示视频内容

视频内容分为原生视频内容视频内容组件两种类型:

  • 原生视频内容是拉起一个新的AndroidActivity,接入相对简单,效率更高;

  • 视频内容组件可以集成在当前的页面中,使用更加灵活。

原生视频内容

调用ZJAndroid.contentAd方法请求原生视频内容并处理结果。其中请求失败与展示失败事件合并为了展示失败的Event:

class ZJAndroid {
  /// 原生展示视频内容
  static void contentAd(

      /// 广告位ID
      String posId, {

        /// 回调。具体事件见 example
        Function(ZJEvent ret)? contentAdListener,
      });
}

原生视频内容回调说明

ret.action说明
ZJEventAction.onAdError广告展示失败
ret.code:错误码,非错误事件为0
ret.msg:错误信息,非错误事件为空字符串
ZJEventAction.onAdClose广告展示成功并已关闭

原生视频内容接入示例

example/lib/content_ad.dart
/// 原生加载广告
void _loadContentAd(String posId) {
  ZJAndroid.contentAd(
    // 广告位ID
    posId, 
    contentAdListener: (ret) {
      switch (ret.action) {
        case ZJEventAction.onAdError:
          Fluttertoast.showToast(msg: "视频内容错误:${ret.msg}");
          if (kDebugMode) {
            print("${ret.action}:${ret.code}-${ret.msg}");
          }
          break;
        case ZJEventAction.onAdClose:
          Fluttertoast.showToast(msg: "视频内容关闭");
          break;
        default:
          // ignore
      }
    }
  );
}

视频内容组件

相比原生接入,Widget接入更加灵活,可以直接嵌入到FlutterView中。但需要处理View的移除

注意

使用视频内容组件加载时,需要确保 Android 的MainActivity继承io.flutter.embedding.android.FlutterFragmentActivity,Flutter会默认继承 io.flutter.embedding.android.FlutterActivity。详见example/MainActivity

/// 视频内容视图
class ZJContentAdView extends StatefulWidget {
  /// 广告位ID
  final String posId;

  /// 宽
  final double width;

  /// 高
  final double height;

  /// 回调
  final Function(ZJEvent ret)? contentAdListener;

  /// 创建成功通知
  final ContentAdViewCreated? onCreatedCallback;
  const ZJContentAdView(this.posId,
      {super.key,
        required this.width,
        required this.height,
        this.contentAdListener,
        this.onCreatedCallback});
}

视频内容组件回调说明

ret.action说明
ZJEventAction.onAdError广告展示失败
ret.code:错误码,非错误事件为0
ret.msg:错误信息,非错误事件为空字符串
ZJEventAction.onAdShow广告展示成功
ZJEventAction.onAdClose广告关闭

ContentAdViewCreated 说明

视频内容组件创建成功后回调的ContentAdViewController对象,包含hide()show()两个方法,分别用于控制组建的隐藏和显示

视频内容组件接入示例

example/lib/content_ad.dart
child: ZJContentAdView(
    // 广告位ID
    posId,
    width: double.infinity,
    height: double.infinity,
    onCreatedCallback: _contentAdViewController,
    contentAdListener: (ret) {
      switch (ret.action) {
        // 广告错误
        case ZJEventAction.onAdError:
          Fluttertoast.showToast(msg: "视频内容错误:${ret.msg}");
          if (kDebugMode) {
            print("${ret.action}:${ret.code}-${ret.msg}");
          }
          _reset();
          break;
        // 展示成功
        case ZJEventAction.onAdShow:
          Fluttertoast.showToast(msg: "视频内容展示");
          break;
        // 关闭
        case ZJEventAction.onAdClose:
          Fluttertoast.showToast(msg: "视频内容关闭");
          break;
        default:
          // ignore
      }
    },
  ),



  /// 加载视频内容组件到容器中
  void _loadContentView() {
    if (controller == null) {
      // 未加载广告时改变状态,绘制组件
      setState(() {
        showContentView = true;
      });
    } else {
      // 已加载,显示视频
      // 第一次请求时默认显示
      controller!.show();
    }
  }

  /// 隐藏视频内容组件
  void _hide() {
    if (controller == null) {
      Fluttertoast.showToast(msg: "请先以Widget形式加载");
    } else {
      // 隐藏
      controller!.hide();
    }
  }

  /// 以Widget加载时的组件控制器
  void _contentAdViewController(ContentAdViewController controller) {
    this.controller = controller;
  }