优雅实现前端大屏视频九宫格—强迫症福音！

一只大加号
190 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

这几天忙的连更文时间都没有，业务的需求确实最近有点多，搞得我都抽不开身更文(其实是懒)，最近的一个需求是我比较感兴趣的，看上去是一个比较高大上的需求，一开始接到需求的时候还觉得一头雾水不知道怎么做，但经过面向百度编程之后，形成了一个比较清晰的形成思路，实现的效果对于强迫症的话来说真的是太舒服了。

话不多说，我们开始

image.png

不好意思，拿错了

image.png

效果展示

667.gif

全屏实现

我们来看一下MDN的官方文档，我们可以通过以下几个api来切换浏览器的全屏模式

document.fullscreenElement //判断是否处于全屏状态
document.documentElement.requestFullscreen() //切换到全屏
document.exitFullscreen()//退出全屏

根据上面这几个api，我们可以来对浏览器进行全屏切换的控制，这里做了一个简单的小栗子

document.onclick = function (event) {
    if (document.fullscreenElement) {
        document.exitFullscreen()
    } else {
        document.documentElement.requestFullscreen()
    }

点击屏幕的时候判断全屏状态，根据全屏状态来切换全屏模式

image.png

image.png

单元素全屏实现

但是从上面的代码实现效果来看，我们只是实现了浏览器页面的全屏模式，如果想要实现需求的效果，全屏展示九个视频，那么我们应该如何实现？

image.png

我再来面向百度编程，从MDN中我们再找到一个api（原谅我基础知识不扎实，原来已经存在现有的api能用我都不知道) 其实上面的api就是讲页面所有元素全屏，我们如果要对单元素全屏，就需要获取对应的元素

` Element.requestFullscreen()  ` 方法用于发出异步请求使元素进入全屏模式。

请求浏览器（user agent）将特定元素（甚至延伸到它的后代元素）置为全屏模式，隐去屏幕上的浏览器所有 UI 元素，以及其它应用。返回一个 Promise，并会在全屏模式被激活的时候变成 resolved 状态。

当然我们需要判断在不同浏览器的兼容性，有些低级版本的浏览器可能不支持分屏，并且不同的浏览器使用的可能也有一点区别

// 判断各种浏览器
function launchFullScreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
    else {
        wtx.info("当前浏览器不支持部分全屏！");
    }
}

九宫格实现

<div id="video_list">
    <div>
        <video style="height: 100px"  controls><source  src="" type="video/mp4"></video>
        <video style="height: 100px" controls><source  src="" type="video/mp4"></video>
        <video style="height: 100px"  controls><source  src="" type="video/mp4"></video>
        <video style="height: 100px"  controls><source  src="" type="video/mp4"></video>
        <video style="height: 100px"  controls><source  src="" type="video/mp4"></video>
        <video style="height: 100px"  controls><source  src="" type="video/mp4"></video>
        <video style="height: 100px"  controls><source  src="" type="video/mp4"></video>
        <video style="height: 100px"  controls><source  src="" type="video/mp4"></video>
        <video style="height: 100px"  controls><source  src="" type="video/mp4"></video>
    </div>
    <div>底部栏</div>
</div>

由于九宫格需要排版，而且我们只能对单元素进行全屏操作，所以我们将九宫格和底部栏放到一个div中，对最外层的div进行操作全屏，排版完成之后，我们其实只是对页面的元素进行了一个放大的操作而已，样式什么都不会改变的。

function tochange(){
    let list = document.getElementById('video_list')
    launchFullScreen(list)
}

其实这是一个很简单的实现过程，但是九宫格的视频看起来有一种排版很清楚的样子，这里给大家做一个分享，码字不易，觉得有趣的话可以给个赞。

image.png

avatar
文章
阅读
粉丝