HTML内嵌视频无法播放问题排查及代码问题咨询

一、HTML代码里的直接错误 #

• 尺寸属性语法错误：你给<video>写的width= 100%; height= 100%;不符合规范，浏览器解析会出问题，导致视频容器尺寸异常，看起来像没显示。正确写法要么用style属性包裹：style="width:100%;height:100%;"，要么写成width="100%" height="100%"（注意引号和无分号）。
• 自动播放限制：现代浏览器默认不让无静音的视频自动播放。你没加controls时，视频因为无法自动播放（没开静音），所以完全看不到；加了controls后用户能手动点播放，视频才出来。必须加muted属性才能让autoplay生效。

二、视频格式/编码的坑 #

• MOV格式兼容性差：MOV是苹果专属格式，除了Safari，其他浏览器原生支持都不好，这也是原视频显示异常的原因。
• MP4有音无画：这说明你转格式时用了浏览器不支持的视频编码。浏览器只认H.264（AVC）编码的视频流+AAC编码的音频流，要是你转的MP4用了ProRes、VP9这类编码，就只能播声音，画面出不来。

三、具体修复步骤 #

1. 修正HTML代码，补上muted属性，修正尺寸写法：

<div class="about">
    <!-- 段落内容保留不变 -->
    <div class="video-view">
        <video style="width:100%;height:100%;" controls loop autoplay muted>
            <source src="video/TheKingdom.mp4" type="video/mp4">
            Your browser does not support the video tag!
        </video>
    </div>
</div>

2. 重新转MP4格式：用HandBrake、FFmpeg这类工具，把原MOV转成标准H.264+AAC编码的MP4。比如用FFmpeg的话，执行这条命令：

ffmpeg -i video/TheKingdom.mov -c:v libx264 -c:a aac video/TheKingdom.mp4

3. 检查文件路径：确认video/TheKingdom.mp4的位置和HTML文件的相对路径是对的（比如HTML在根目录，视频就必须在根目录下的video文件夹里）。

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