让div内容在video视频上显示

最新推荐文章于 2025-01-13 13:51:59 发布

「已注销」

最新推荐文章于 2025-01-13 13:51:59 发布

阅读量7.5k

点赞数 3

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/qq_20889171/article/details/105274385

版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在HTML5的video标签中添加全屏功能，通过在视频播放器上放置一个全屏按钮，并使用JavaScript代码实现不同浏览器的全屏模式切换。包括HTML结构、CSS样式及JS函数的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考代码

业务场景：在video标签上面添加一个全屏图标

html

        <div class="s-video-all" >
            <!--VIDEO视频标签容器 -->
            <div class="s-video" :id=videoId>
                <!--把VIDEO视频标签初始化到这里 -->
            </div>
            <div class="s-full" title="点击全屏" @click="fullScreen">
                <el-icon class="el-icon el-icon-full-screen"></el-icon>
            </div>
        </div>

css

    .s-video-all {
        width: 100%;
        position: relative;
    }
    
    .s-full {
        position: absolute;
        right: 10px;
        bottom: 20px;
        
        width: 40px;
        color: white;
        padding-right: 10px;
        font-size: 20px;
        cursor: pointer;
    }

PS

如果需要vidEO全屏，可参考如下js函数

            fullScreen() {
                const ele = document.getElementById(this.videoId);
                //只在播放视频时全屏生效
                if (ele.innerHTML) {
                    if (ele.requestFullscreen) {
                        ele.requestFullscreen();
                    } else if (ele.mozRequestFullScreen) {
                        ele.mozRequestFullScreen();
                    } else if (ele.webkitRequestFullScreen) {
                        ele.webkitRequestFullScreen();
                    }
                }
            }