video标签的视频全屏
Posted zyz-s
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了video标签的视频全屏相关的知识，希望对你有一定的参考价值。
按钮：
<div class="fullScreen" @click="fullScreen"><i class="el-icon-full-screen"></i></div>
视频标签
<video id="video" width="100%" height="100%" autoplay="autoplay" muted>
<source :src="videoUrl" type="video/mp4" />
</video>
js部分：
// 全屏
Screen (element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.oRequestFullscreen) {
element.oRequestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
} else {
var dochtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById(‘video‘);
var cssText = ‘width:100%;height:100%;overflow:hidden;‘;
docHtml.style.cssText = cssText;
docBody.style.cssText = cssText;
videobox.style.cssText = cssText+‘;‘+‘margin:0px;padding:0px;‘;
document.IsFullScreen = true;
}
},
fullScreen () {
let element = document.getElementById(‘video‘)
this.Screen(element)
},
然后退出其实直接按ESC就可以了
以上是关于video标签的视频全屏的主要内容，如果未能解决你的问题，请参考以下文章
html5开发，android中的微信内置浏览器如何让video标签的视频不全屏播放
html5开发，iphone中的微信内置浏览器如何让video标签的视频不全屏
我用html5的video标签做的视频页面，在iphone上测试的时候视频都是全屏的，怎么才能不全屏？