码迷,mamicode.com
首页 > 其他好文 > 详细

video标签的视频全屏

时间:2020-06-02 19:05:38      阅读:271      评论:0      收藏:0      [点我收藏+]

标签:webkit   cbo   video标签   width   hidden   src   icon   VID   按钮   

 

按钮:

<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标签的视频全屏

标签:webkit   cbo   video标签   width   hidden   src   icon   VID   按钮   

原文地址:https://www.cnblogs.com/zyz-s/p/13032912.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!