HTML中video标签controls属性不生效，多IDE测试失败求错误排查

1. 修正DOCTYPE声明错误 #

当前代码的DOCTYPE声明格式错误，会导致浏览器进入怪异渲染模式，无法正常识别HTML5的video标签特性：

错误写法：<DOCTYPE! html>
正确写法：<!DOCTYPE html>

2. 修正视频路径写法 #

你使用了本地磁盘绝对路径F:\Steve Jobs Commencement.mp4，浏览器出于安全策略限制，默认不允许通过file://协议打开的HTML页面直接访问本地磁盘的绝对路径资源，同时路径中的空格也可能引发解析错误，按以下要求调整即可：

• 把视频文件和你的HTML文件放在同一个文件夹下
• 重命名视频文件删除文件名中的空格，例如改为steve-jobs-commencement.mp4
• 修改source标签的src属性为：src="steve-jobs-commencement.mp4"
• 如果修改路径后仍不生效，建议使用本地静态服务打开页面（比如VS Code的Live Server插件），不要直接双击打开HTML文件

3. 确认视频编码兼容性 #

MP4只是容器格式，只有使用H.264编码的MP4视频才能被所有主流浏览器兼容识别，如果视频编码不符合要求，也会出现视频无法加载、控制条不显示的问题。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Started Again</title>
</head>
<body>
    <h1>
        This is again I started learning website so that I can benefit others through my knowledge!
    </h1>
    <video width="700" height="500" controls>
        <source src="steve-jobs-commencement.mp4" type="video/mp4">
    </video>
</body>
</html>

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