html
<button bindtap='play' >播放</button>
<video id='myvideo' class='{{fullScreen?"show":"hide"}}' src="视屏地址" autoplay="true" bindfullscreenchange="fullScreen" bindended="closeVideo" controls></video>
js
/**播放视屏 */
play(e) {
//执行全屏方法
var videoContext = wx.createVideoContext('myvideo', this);
videoContext.requestFullScreen();
this.setData({
fullScreen:true
})
},
/**关闭视屏 */
closeVideo() {
//执行退出全屏方法
var videoContext = wx.createVideoContext('myvideo', this);
videoContext.exitFullScreen();
},
/**视屏进入、退出全屏 */
fullScreen(e){
var isFull = e.detail.fullScreen;
//视屏全屏时显示加载video,非全屏时,不显示加载video
this.setData({
fullScreen:isFull
})
}
css
.show{
display:show;
}
.hide{
display:none;
}
源码地址: https://github.com/yiyueqinghui/video-fullscreen-play
参考链接: https://developers.weixin.qq.com/miniprogram/dev/api/api-video.html