video标签的视频全屏

wanwanwandj 2020-06-02

按钮:

<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就可以了

相关推荐

ELEMENTS爱乐冬雨 / 0评论 2020-05-29