HTML插入音频和视频的最佳方式

最新推荐文章于 2025-10-17 21:33:41 发布

原创最新推荐文章于 2025-10-17 21:33:41 发布 · 6.6k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #视频

HTML 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了HTML5中插入音频和视频的最佳方法，通过HTML5的 audio 和 video 元素，结合不同格式的资源，确保跨平台播放的兼容性。

最好的 HTML 解决方法
HTML5 + <object> + <embed>

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls="controls" autoplay="autoplay">
  <source src="/i/movie.ogg" type="video/ogg" />
  <source src="/i/movie.mp4" type="video/mp4" />
  <source src="/i/movie.webm" type="video/webm" />
  <object data="/i/movie.mp4" width="320" height="240">
    <embed width="320" height="240" src="/i/movie.swf" />
  </object>
</video>

</body>
</html>

音频
最好的 HTML 解决方法
HTML 5 +

<embed>

下面的例子使用了两个不同的音频格式。Html5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。

<!DOCTYPE HTML>
<html>
<body>

<audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="/i/song.mp3" type="audio/mpeg">
<embed height="100" width="100" src="/i/song.mp3" />
</audio>

</body>
</html>