Video.js播放HLS流问题：自站无法自动播放及全屏适配

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video-js.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video.min.js"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
        }
        .video-js {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <video-js id="vid1" controls preload="auto" autoplay muted>
        <source src="https://vcp.myplaytv.com/promar/promar/playlist.m3u8" type="application/x-mpegURL" />
    </video-js>

    <script>
        const vid = document.getElementById('vid1');
        const player = videojs(vid, {
            autoplay: true,
            muted: true,
            preload: 'auto'
        });

        // 可选：若需要取消静音，需绑定用户交互事件（如点击），浏览器不允许自动取消静音
        // document.addEventListener('click', () => {
        //     player.muted(false);
        // });
    </script>
</body>
</html>

问题1：实现自动播放&消除初始黑框 #

• 适配浏览器自动播放规则：主流浏览器要求自动播放的视频必须静音，所以给<video-js>标签加上autoplay muted属性，同时在Video.js初始化配置里同步声明autoplay: true和muted: true，确保播放器能自动启动。
• 修复HTML结构错误：原代码把<meta>标签放在<head>外，会导致viewport配置失效，现在移到<head>内部。
• 消除初始小黑框：通过CSS让播放器一开始就占满视口，配合preload="auto"提前加载视频元数据，避免仅显示小尺寸黑框。

问题2：结合viewport实现全屏显示 #

• 优化viewport配置：在<meta>标签添加maximum-scale=1, user-scalable=no，禁止用户缩放页面，保证视频始终适配屏幕尺寸。
• 全屏样式设置：给html和body清除默认边距、隐藏滚动条并设置高度100%；给.video-js设置width:100vw和height:100vh，让播放器完全覆盖整个视口，实现真正的全屏效果。

注意事项 #

若需要自动播放时带声音，浏览器会直接阻止——必须由用户主动触发（比如点击页面、播放按钮）才能取消静音，可参考代码中注释的交互绑定逻辑。

内容的提问来源于stack exchange，提问作者Javier_Caceres