2，css代码.video {
width:100%;
height:100%;
}
.other_cont {
position: relative;
width:100%;
height:200px; /* 设置视频容器的高度 */
overflow: hidden;
}
.other_scr {
width:100%;
height:100%;
}
3，js代码// 监听视屏点击事件document.getElementById('video').addEventListener('click', function() {
// 视屏全屏 document.getElementById('video').webkitRequestFullScreen();
});
// 监听全屏状态改变事件document.addEventListener('fullscreenchange', function() {
// 如果不在全屏状态，则关闭视频播放 if (!document.fullscreenElement) {
document.getElementById('video').pause();
}
});
// 监听页面隐藏事件document.addEventListener('visibilitychange', function() {
// 如果页面不可见，则关闭视频播放 if (document.visibilityState === 'hidden') {
document.getElementById('video').pause();
}
});
4，uni-app中全屏播放视频的实现在uni-app中实现全屏播放视频需要使用原生的video组件，并且通过原生的API来实现全屏播放。首先需要在template中添加video组件，并且设置好相应的属性：
然后在methods中实现playFullScreen方法用来实现点击视频全屏播放的功能：
methods: {
playFullScreen() {
this.$refs.video.webkitRequestFullScreen(); // 调用webkitRequestFullScreen方法实现全屏播放 }
}
通过以上实现，点击视频时就能实现全屏播放的效果。
5，原生微信小程序中全屏播放视频的实现在原生微信小程序中实现全屏播放视频需要使用原生的video组件，并且通过原生的API来实现全屏播放。首先需要在wxml中添加video组件，并且设置好相应的属性：
然后在js中实现playFullScreen方法用来实现点击视频全屏播放的功能：
Page({
data: {
videoSrc: '视频地址',
videoPoster: '视频封面',
controls: true },
playFullScreen() {
const videoContext = wx.createVideoContext('video'); // 获取video组件的上下文 videoContext.requestFullScreen(); // 调用requestFullScreen方法实现全屏播放 }
})
通过以上实现，点击视频时就能实现全屏播放的效果。
总结通过以上的方法和代码实现，就可以在uni-app和原生微信小程序中实现点击视频直接全屏并且进入播放状态的功能。在实现全屏播放时需要注意一些兼容性问题，比如不同设备和不同浏览器可能会有一些差异，需要做好相应的兼容性处理。希望以上内容能够对您有所帮助。
