zoukankan      html  css  js  c++  java
  • 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 = '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就可以了
  • 相关阅读:
    安卓学习记录(四)——体温表APP
    2012ACM/ICPC亚洲区域赛成都赛区 总结
    poj 1011 Sticks(dfs+剪枝)
    uva 10891 Game of Sum (DP水题)
    poj 1077 Eight (bfs+康拓展开,A*&&IDA*算法)
    USACO Shaping Regions(离散化)
    poj 2741 Colored Cubes(dfs暴力枚举)
    LightOJ 1400 Employment (Stable Marriage)
    uva 10859 Placing Lampposts / Tree DP
    poj 1062 昂贵的聘礼(dfs+剪枝)
  • 原文地址:https://www.cnblogs.com/zyz-s/p/13032912.html
Copyright © 2011-2022 走看看