某种视频小程序(影视小程序)文章添加激励视频案例

孤独大概就是在深夜，你辗转反侧，拿起手机，解锁，看着满屏的应用，游戏，手指却犹豫不决，不知道该点开那个，最后只能看着屏幕慢慢变暗，看着自己，被黑暗吞噬

当小程序需要播放一个视频文件在到3分钟后，弹窗需要阅读激励视频广告。观看广告则可以继续播放剩下的内容，不看广告则返回上级页面；每当有一种新发现后它都将有可能出现在星宿UI上；该种模式我相信在某些小程序上已经体验过了，我们看看如何实现

构思

思路相比之前《小程序第一次阅读文章需要激励视频，随后某个时间段内重复可免费阅读》以及《【wordpress】uni-app小程序中访问文章需要输入密码可阅读》会简单很多，流程图如下

思考

在实现该案例中曾遇到以下几个问题，幸运的是微信小程序开发文档中有解决问题的方式

1. 如何获取视频播放到第几秒
2. 弹窗广告是视频如何自动暂停，广告观看后自动播放

问题1解决：

文档中有@timeupdate属性我们可以添加在video标签中

<video id="frVideo" src="https://cloud.video.taobao.com//play/u/41898112/p/1/e/6/t/1/308829759156.mp4"
        @timeupdate='frVideoTime'></video>

随后执行函数

frVideoTime(e) {
        console.log(e)
 },

控制台打印中，可以知道detail中currentTime是视频播放进度，duration是视频总长度

问题2解决：

video标签中添加id，在onLoad周期中执行createVideoContext获取节点

this.frVideoId = uni.createVideoContext('frVideo');

随后可使用以下代码控制视频在弹出广告弹窗后自动播放暂停

//暂停
this.frVideoId.pause();
//播放
this.frVideoId.play();

核心代码

核心由frVideoTime函数控制，其中if判断(代码第5行)中的2和3 就是表示在视频播放2秒后触发激励视频广告弹窗

frVideoTime(e) {
        console.log(e.detail.currentTime)
        // console.log(e)
        this.playVideos = e.detail.currentTime;
        if (this.playVideos > 2 && this.playVideos < 3 && this.isShowAd) {
          console.log('xuyao')
          this.frVideoId.pause();
          this.adPopup();
          this.isShowAd = false
        }
​
      },

其他注意

1.测试时请将请求中的视频地址换成自己的

2.该版本为uni-app框架需要hbuilder x编译，

3.请在manifest.json文件中将微信小程序运行配置添加您的小程序id

4.弹窗取消事件请在代码中38行添加，本案例是演示逻辑无上下级界面跳转5.视频播放多少秒出现弹窗在代码51行中if判断中数值2和3控制

案例

<template>
  <view class="content">
    <view class="fr-video">
      <video id="frVideo" src="https://cloud.video.taobao.com//play/u/41898112/p/1/e/6/t/1/308829759156.mp4"
        @timeupdate='frVideoTime'>
</video>
    </view>
  </view>
</template>
​
<script>
  let videoAd = null
  export default {
    data() {
      return {
        wxAD: 'adunit-9737fd476e3e42c1',
        isShowAd: true
      }
    },
    onLoad() {
      // 执行函数
      this.getFlowmain();
      this.frVideoId = uni.createVideoContext('frVideo');
    },
    methods: {
      //弹窗
      adPopup() {
        uni.showModal({
          title: '提示说明',
          content: '您需要观看激励广告方',
          cancelText: '不看',
          confirmText: '观看',
          success: (res) => {
            if (res.confirm) {
              this.tapAD()
              console.log('用户点击确定，触发广告');
              
            } else if (res.cancel) {
              // 请添加用户点击取消事件
              console.log('用户点击取消');
              
            }
          }
        });
      },
      // @timeupdate视频进度变化 获取currentTime视频播放时长 当值大于3秒触发adPopup函数且暂停视频
      // 其中if判断(代码第51行)中的2和3 就是表示在视频播放2秒后触发激励视频广告弹窗
      frVideoTime(e) {
        console.log(e.detail.currentTime)
        // console.log(e)
        this.playVideos = e.detail.currentTime;
        if (this.playVideos > 2 && this.playVideos < 3 && this.isShowAd) {
          console.log('xuyao')
          this.frVideoId.pause();
          this.adPopup();
          this.isShowAd = false
        }
​
      },
      // 广告预加载
      getFlowmain() {
        if (wx.createRewardedVideoAd) {
          videoAd = wx.createRewardedVideoAd({
            adUnitId: this.wxAD
          })
          videoAd.onLoad(() => {})
          videoAd.onError((err) => {
            uni.showToast({
              icon: 'none',
              title: "观看失败,请稍后重试"
            })
          })
        }
      },
​
      // 点击阅读按钮
      tapAD() {
        if (videoAd) {
          videoAd.show().catch(() => {
            // 失败重试
            videoAd.load()
              .then(() => videoAd.show())
              .catch(err => {
                console.log('激励视频 广告显示失败')
              })
          })
          videoAd.onError((err) => {
            uni.showToast({
              icon: 'none',
              title: "观看失败,请稍后重试"
            })
          })
          videoAd.onClose((res) => {
            if (res && res.isEnded) {
              console.log('广告成功')
              this.frVideoId.play();
            } else {
              uni.showToast({
                icon: 'none',
                title: "中途关闭广告"
              })
            }
          })
        }
      },
    }
  }
</script>
​
<style>
  .fr-video {
    width: 100%;
    height: 300rpx;
  }
</style>
​

案例下载

https://yinfengrui.lanzous.com/i2oG6oxh62h