微信小程序，video 全屏视屏展示，广告样式

视频全屏展示

文档地址：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
}

官方方法：

播放视频：VideoContext.play()

暂停视频：VideoContext.pause()

停止视频：VideoContext.stop()

跳转到指定位置：VideoContext.seek(number position)

发送弹幕：VideoContext.sendDanmu(Object data)

设置倍速播放：VideoContext.playbackRate(number rate)

进入全屏：VideoContext.requestFullScreen(Object object)若有自定义内容需在全屏时展示，需将内容节点放置到 video 节点内。

退出全屏：VideoContext.exitFullScreen()

VideoContext.showStatusBar() 显示状态栏，仅在iOS全屏下有效

VideoContext.hideStatusBar()隐藏状态栏，仅在iOS全屏下有效

VideoContext.exitPictureInPicture()退出小窗，该方法可在任意页面调用