Html5支持的视频文件格式和音频文件格式有哪些？

原创于 2025-07-03 17:35:56 发布 · 313 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ffmpeg #html5 #前端 #html5调用视频

html5 同时被 2 个专栏收录

161 篇文章

订阅专栏

播放器开发专栏

34 篇文章

订阅专栏

视频文件格式

MP4：MPEG-4 Part 14，支持H.264编码。几乎所有的浏览器都支持该格式。

WebM：谷歌开发的格式，使用VP8或VP9编码，可以在大多数现代浏览器中播放

Ogg：开放媒体格式，使用Vorbis编码，可以在大多数现代浏览器中播放。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 视频示例</title>
    <style>
        video {
            max-width: 100%; /* 使视频在响应式布局中自适应宽度 */
            height: auto;
            display: block; /* 避免视频下方出现空白间隙 */
            margin: 0 auto; /* 居中显示 */
            border: 1px solid #ccc;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>

    <h1>我的 HTML5 视频播放器</h1>

    <video controls poster="path/to/your/poster-image.jpg" width="640" height="360" preload="metadata">
        <source src="path/to/your/video.webm" type="video/webm">
        <source src="path/to/your/video.mp4" type="video/mp4">
        <source src="path/to/your/video.ogg" type="video/ogg">

        您的浏览器不支持 HTML5 视频。请<a href="path/to/your/video.mp4">点击此处下载视频</a>观看。
    </video>

    <p>这是一个使用 HTML5 &lt;video&gt; 标签嵌入视频的示例。</p>

</body>
</html>

音频文件格式

MP3：MPEG-1或MPEG-2 Audio Layer III，可以在几乎所有的浏览器中播放。

AAC：Advanced Audio Coding，可以在大多数现代浏览器中播放。

Ogg：开放媒体格式，使用Vorbis编码，可以在大多数现代浏览器中播放。

WAV：Waveform Audio File Format，可以在几乎所有的浏览器中播放，但文件较大，不适合在网络上播放。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 音频示例</title>
    <style>
        audio {
            max-width: 100%; /* 使音频播放器在响应式布局中自适应宽度 */
            display: block; /* 避免出现空白间隙 */
            margin: 20px auto; /* 居中显示，并添加一些上下边距 */
            border: 1px solid #ddd;
            padding: 10px;
            box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>

    <h1>我的 HTML5 音频播放器</h1>

    <audio controls preload="metadata">
        <source src="path/to/your/audio.mp3" type="audio/mpeg">
        <source src="path/to/your/audio.ogg" type="audio/ogg">
        <source src="path/to/your/audio.webm" type="audio/webm">

        您的浏览器不支持 HTML5 音频。请<a href="path/to/your/audio.mp3">点击此处下载音频</a>收听。
    </audio>

    <p>这是一个使用 HTML5 &lt;audio&gt; 标签嵌入音频的示例。</p>

</body>
</html>

数字化动态ID随机水印