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