微信小程序，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
}