如何让ArtPlayer占满移动端全屏（包含摄像头刘海/挖孔区域）

嘿，我之前也碰到过这个问题！你的ArtPlayer没铺满刘海区域，主要是因为移动端默认会把页面限制在「安全区域」内，加上缺少关键的视口配置和CSS适配。下面一步步帮你解决：

关键修复步骤 #

1. 添加适配刘海的视口Meta标签 #

在<head>里必须加上viewport-fit=cover，这能让页面突破安全区域限制，延伸到刘海/挖孔区域。原来的代码里没这个标签，这是核心问题！

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

2. 优化CSS确保容器占满全屏 #

调整html、body和播放器容器的样式，确保它们完全覆盖包括刘海在内的整个屏幕：

html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
    /* 确保页面不会被安全区域挤压 */
    position: fixed;
    top: 0;
    left: 0;
}

.artplayer-app {
    width: 100%;
    height: 100%;
    /* 强制播放器容器延伸到安全区域外 */
    margin: 0;
    padding: 0;
}

3. 调整ArtPlayer配置，优化视频填充 #

修改ArtPlayer的初始化参数，开启原生全屏并设置视频填充模式为cover，让视频自动适配容器：

var art = new Artplayer({
    container: '.artplayer-app',
    url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
    fullscreenNative: true, // 优先使用原生全屏，更适配移动端
    video: {
        objectFit: 'cover', // 让视频填充容器，保持比例不拉伸
    },
});

// 如果需要自动进入全屏，可以这样写（可选）
art.on('ready', () => {
    art.fullscreen.native.request();
});

完整修改后的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ArtPlayer Demo</title>
    <meta charset="UTF-8" />
    <!-- 新增：适配刘海的视口配置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background: #000;
            position: fixed;
            top: 0;
            left: 0;
        }

        .artplayer-app {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div class="artplayer-app"></div>
    <script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
    <script>
        var art = new Artplayer({
            container: '.artplayer-app',
            url: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
            fullscreenNative: true,
            video: {
                objectFit: 'cover',
            },
        });

        // 可选：页面加载完成后自动进入全屏
        art.on('ready', () => {
            art.fullscreen.native.request();
        });
    </script>
</body>
</html>

为什么这样能解决问题？ #

• viewport-fit=cover：告诉浏览器不要把页面限制在安全区域内，允许内容延伸到刘海/挖孔区域。
• 100vw/100vh + position: fixed：确保页面容器完全覆盖设备的物理屏幕，不会被系统UI挤压。
• fullscreenNative: true：使用移动端原生全屏模式，相比web全屏更能适配系统的刘海区域。
• objectFit: 'cover'：让视频保持比例填充整个播放器容器，避免出现黑边或拉伸。

内容来源于stack exchange