HTML视频源插入方法及页面视频无法显示的问题求助

嘿，我看了你的代码，视频不显示的问题其实有个很明显的小错误，另外我也会详细讲怎么正确在HTML里插入视频源。

一、你的视频无法显示的问题修复 #

先看这段视频代码：

<video width="400" height="300" controls="controls">
<source src="media/Artefact2.mov" type="video/.mov">
</video>

这里的核心问题是**type属性写错了**：.mov格式对应的标准MIME类型是video/quicktime，而不是video/.mov（多了个点），浏览器识别不了这个类型，所以没法加载视频。

另外还有几个要注意的细节：

• 检查路径：确认media/Artefact2.mov的路径是对的——你的项目里得有个media文件夹，而且视频文件确实在里面，注意路径大小写（比如macOS/Linux是区分大小写的）。
• 兼容性：.mov在部分浏览器（比如Chrome）里支持不太好，建议你转个MP4格式的版本作为备选，这样大部分用户都能正常播放。

给你修正后的代码：

<video width="400" height="300" controls>
  <!-- 优先用MP4，兼容性拉满 -->
  <source src="media/Artefact2.mp4" type="video/mp4">
  <!-- 保留mov作为备选 -->
  <source src="media/Artefact2.mov" type="video/quicktime">
  <!-- 浏览器不支持video标签时的 fallback 提示 -->
  你的浏览器不支持HTML5视频播放，请更新浏览器或下载视频查看。
</video>

小提示：controls="controls"可以简化成controls，HTML5里布尔属性只要写属性名就生效啦～

二、如何在HTML中正确插入视频源 #

插入视频源主要靠<video>标签搭配内部的<source>标签，下面是完整的实操指南：

1. 基础结构写法
   用<video>包裹多个<source>，每个<source>对应不同格式的视频，浏览器会自动挑第一个能播放的：

   <video controls width="600" height="400" poster="images/video-cover.jpg">
     <source src="video/main.mp4" type="video/mp4">
     <source src="video/main.webm" type="video/webm">
     <source src="video/main.ogv" type="video/ogg">
     你的浏览器不支持HTML5视频，请使用最新版浏览器访问。
   </video>
   

2. 常用属性说明
   • controls：显示播放、暂停、音量等控制栏，不用赋值，写属性名就行。
   • width/height：设置视频显示尺寸，也可以用CSS来控制更灵活。
   • poster：设置视频未播放时的封面图，提升用户体验。
   • autoplay：加载后自动播放（注意现在多数浏览器需要用户先和页面交互，比如点击，才能触发自动播放）。
   • loop：播放完自动循环。
   • muted：默认静音，配合autoplay更容易触发自动播放。
3. 格式选择技巧
   为了让所有主流浏览器都能播放，建议至少准备两种格式：
   • MP4（H.264编码）：所有主流浏览器都支持，必选。
   • WebM：开源格式，文件更小，Chrome和Firefox支持很好，作为备选。
4. 正确的MIME类型对照表
   别再写错type属性了，常用格式对应：
   • MP4: video/mp4
   • WebM: video/webm
   • Ogg: video/ogg
   • MOV: video/quicktime

按照上面的方法调整后，你的视频应该就能正常显示啦，如果还是不行，先把视频放到根目录试试，排除路径问题～

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