网页中怎么播放本地视频_网页播放本地视频的HTML5代码示例-html教程-PHP中文网

网页中怎么播放本地视频_网页播放本地视频的HTML5代码示例

蓮花仙者

发布： 2025-10-08 17:07:01

原创

812人浏览过

使用HTML5的video标签可直接在网页播放本地视频，需正确设置src路径并添加controls属性以启用播放控制，推荐通过本地服务器运行避免加载问题。

网页中怎么播放本地视频_网页播放本地视频的html5代码示例

要在网页中播放本地视频，可以使用HTML5的 video 标签。这个标签原生支持多种视频格式，无需额外插件，只需将本地视频文件路径正确引入即可在浏览器中播放。

基本HTML5视频播放代码

以下是一个简单的示例，展示如何通过HTML5播放本地视频文件：

<video width="640" height="360" controls>
<source src="video/my-video.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>

说明：
- src：指定本地视频文件路径，如 "video/my-video.mp4" 表示在当前目录下的 video 文件夹中的 mp4 视频。
- controls：添加播放、暂停、音量等控制条。
- width / height：设置播放器尺寸，也可用CSS控制。
- 支持的常见格式包括 MP4 (H.264)、WebM 和 Ogg。

支持多格式兼容写法

为确保不同浏览器都能播放，可提供多个格式的视频源：

<video width="640" height="360" controls>
    <source src="my-video.mp4" type="video/mp4">
    <source src="my-video.webm" type="video/webm">
    <source src="my-video.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

浏览器会自动选择第一个它能播放的格式。

立即学习“前端免费学习笔记（深入）”；