full-screen-video-ad.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <view>
  3. <page-head :title="title"></page-head>
  4. <view class="uni-padding-wrap uni-common-mt">
  5. <button :loading="loading" :disabled="loading" type="primary" class="btn" @click="showAd">显示广告</button>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. title: '全屏视频广告',
  14. loading: false,
  15. loadError: false
  16. }
  17. },
  18. onReady() {
  19. // #ifdef APP-PLUS
  20. this.adOption = {
  21. adpid: '1507000611'
  22. };
  23. // #endif
  24. this.createAd();
  25. },
  26. methods: {
  27. createAd() {
  28. var _ad = this._ad = uni.createFullScreenVideoAd(this.adOption);
  29. _ad.onLoad(() => {
  30. this.loading = false;
  31. this.loadError = false;
  32. _ad.show();
  33. console.log('onLoad event')
  34. });
  35. _ad.onClose((res) => {
  36. // 用户点击了【关闭广告】按钮
  37. if (res && res.isEnded) {
  38. // 正常播放结束
  39. console.log("onClose " + res.isEnded);
  40. } else {
  41. // 播放中途退出
  42. console.log("onClose " + res.isEnded);
  43. }
  44. setTimeout(() => {
  45. uni.showToast({
  46. title: "全屏视频" + (res.isEnded ? "成功" : "未") + "播放完毕",
  47. duration: 10000,
  48. position: 'bottom'
  49. })
  50. }, 500)
  51. });
  52. _ad.onError((err) => {
  53. this.loading = false;
  54. if (err.code) {
  55. this.loadError = true;
  56. }
  57. console.log('onError event', err)
  58. uni.showToast({
  59. title: err.errMsg,
  60. position: 'bottom'
  61. })
  62. });
  63. },
  64. showAd() {
  65. this.loading = true;
  66. this._ad.load();
  67. }
  68. }
  69. }
  70. </script>
  71. <style>
  72. .btn {
  73. margin-bottom: 20px;
  74. }
  75. .ad-tips {
  76. color: #999;
  77. padding: 30px 0;
  78. text-align: center;
  79. }
  80. </style>