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

js

// 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()退出小窗，该方法可在任意页面调用