视频文件格式

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随机水印