微信小程序，video 全屏視屏展示，廣告樣式

原創

cyclv

2020-07-04 00:43

視頻全屏展示

文檔地址：https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.html

文檔位置：微信官方文檔小程序—》開發—》API—》媒體—》視頻—》VideoContext。

使用方法：

注意我這個是自定義組件寫法：

wxml:

<view class="video-wrap-info">
  <video 
  class="my-video" 
  id="myVideo" 
  src="{{videoUrl}}" 
  loop='{{true}}' 
  autoplay='{{true}}' 
  controls='{{false}}' 
  enable-progress-gesture='{{false}}' 
  show-fullscreen-btn='{{false}}'       
  objectFit='cover'
  >
    <view class="close-popup" bindtap="exitScreen">關閉</view>
  </video>
</view>

// components/video-popup/video-popup.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {

  },

  /**
   * 組件的初始數據
   */
  data: {
    videoUrl: 'https://6c6f-local-rt3cu-1301453265.tcb.qcloud.la/0022qDRZgx07Epy8ibf201041200gHCV0E010.mp4'
    // videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
  },
  ready: function () {
    this.videoContext = wx.createVideoContext('myVideo', this); // 	創建 video 上下文 VideoContext 對象。
    this.videoContext.requestFullScreen({
      direction: 0
    });
    // 獲取視頻時長
    // wx.downloadFile({//需要先下載文件獲取臨時文件路徑 單個文件大小不得超過50M
    //   url: this.data.videoUrl,
    //   success(res1) {
    //     console.log(res1.tempFilePath)
    //     //獲取視頻相關信息
    //     wx.getVideoInfo({
    //       src: res1.tempFilePath,//視頻臨時路徑
    //       success(res) {
    //         console.log('獲取文件地址成功')
    //         console.log(res)
    //       },
    //       fail: function (res) {
    //         console.log('獲取文件地址失敗')
    //         console.log(res)
    //       },
    //       complete(res) {
    //         console.log('獲取文件地址')
    //       }
    //     })
    //   }
    // })
  },
  /**
   * 組件的方法列表
   */
  methods: {
    // 退出全屏
    exitScreen: function () {
      this.videoContext = wx.createVideoContext('myVideo', this);
      this.videoContext.exitFullScreen(); //退出全屏
    }
  }
})

wxss

/* components/video-popup/video-popup.wxss */

.video-wrap-info {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0rpx;
  left: 0rpx;
  display: flex;
  flex: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.my-video {
  width: 100%;
  height: 100%;
}

.close-popup {
  width: 750rpx;
  height: 120rpx;
  z-index: 1010;
  background: red
}