在 web 前端开发中，经常会涉及到视频的播放和展示。而要在网页中展示视频，就需要使用<video>标签。<video>标签可以通过src属性来指定视频文件的路径，从而实现视频的播放。在本篇文章中，我将详细介绍video标签的src属性的用法，帮助大家更好地理解和使用视频在网页中的展示。
video 标签
首先，让我们先来看一下<video>标签的基本用法。<video>标签用于在网页中嵌入视频，其基本语法如下：
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>在上面的代码中，<video>标签用于定义视频播放器，controls属性用于显示视频控制条。<source>标签用于指定视频文件的路径和类型，src属性用于指定视频文件的路径，type属性用于指定视频文件的类型。如果浏览器不支持<video>标签，会显示Your browser does not support the video tag.这段文字。
src 属性
src属性用于指定视频文件的路径。可以是相对路径，也可以是绝对路径。在指定src属性时，需要注意以下几点：
- 相对路径：相对路径是相对于当前网页的路径。例如，如果视频文件和网页文件在同一个目录下，可以直接指定视频文件的文件名作为路径。
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>- 绝对路径：绝对路径是完整的文件路径，可以是网络上的视频文件路径，也可以是本地文件系统中的视频文件路径。
<video controls>
<source src="https://example.com/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>- 多个视频源：为了兼容不同浏览器和不同视频格式，可以在
<video>标签内使用多个<source>标签指定不同格式的视频文件。
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>示例代码
下面是一个完整的示例代码，演示了如何在网页中使用<video>标签和src属性来展示视频：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
------------ ------------
-------
------
--------- ---------
------ ---------
------- --------------- -----------------
------- ---------------- ------------------
---- ------- ---- --- ------- --- ----- ----
--------
-------
-------通过以上示例代码，你可以在自己的网页中展示视频，并灵活地使用src属性来指定视频文件的路径。希望本文能够帮助你更好地理解和使用<video>标签的src属性。祝你在 web 前端开发的道路上越走越远！