HTML5中添加多媒体支持（一）

最新推荐文章于 2025-05-15 15:47:54 发布

Soloman

最新推荐文章于 2025-05-15 15:47:54 发布

阅读量2.2k

点赞数

分类专栏： Android移动开发 HTML5/CSS/JavaScript 文章标签： html5 browser video 浏览器 audio firefox

Android移动开发同时被 2 个专栏收录

77 篇文章

订阅专栏

HTML5/CSS/JavaScript

36 篇文章

订阅专栏

本文介绍如何在HTML5中嵌入视频和音频，包括多种格式支持、预加载、自动播放、循环播放等功能实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这次的教程来自Lynda.com.HTML5.Video.and.Audio.in.Depth。

尽管目前在HTML中嵌入视频还不是主流（貌似最多的是使用Flash吧），但毕竟是今后的趋势，所以还是很重要的。

简单的嵌入视频和音频的代码分别是：

   <video src="../_video/podcast.ogv" controls>
     <p>Your browser does not support HTML5 video.</p>
   </video>

   <audio src="../_audio/podcast-audio.oga" controls>
     <p>Your browser does not support HTML5 audio.</p>
   </audio>

其中：

src指定了节目的源；
controls表示带上浏览器自带的播放器控制；
<p></p>内的是页面遇到不支持的浏览器时显示的文本内容；

由于各个浏览器所能支持的压缩方式不一样，所以我们需要修改为能够支持多个浏览器的形式：

   <video controls>
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>

   <audio controls>
     <source src="../_audio/podcast-audio.m4a" type="audio/mp4" />
     <source src="../_audio/podcast-audio.oga" type="audio/ogg" />
     <p>Your browser does not support HTML5 audio.</p>
   </audio>

预加载：为了使得浏览器在页面加载后能够自后台缓冲数据，并且在播放时保证流畅码率，我们通过以下代码搞定：

<video controls preload="auto">

auto是默认值；如果取消预加载则使用none；还有一个值是"metadata"，表示部分预加载代表作者认为用戶不期望此视频，但页面提供了一些元数据（包括尺寸，第一帧，节目列表，节目时长等等）。

autoplay属性表示是否在页面加载后立即播放视频：

   <video controls preload="auto" autoplay>
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>

loop属性指定是否循环播放（貌似Firefox低版本可能不支持，但我在FF 13上已经能够看到支持了。遇到不支持的也不要紧，加上一段js代码搞定）：

   <video id="myVideo" controls preload="auto" autoplay loop>
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>
   <script>
      $("#myVideo").bind("ended", function(){
        this.play();
      });
   </script>

poster属性用来指定一张预览图片（在视频无法正常显示预览图时）：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Poster Demo</title>
</head>
<body>

   <p>1. No Poster, No Preload</p>
   <video controls preload="none">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>

   <br><br>

   <p>2. No Poster, Preload</p>
   <video controls preload="auto">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>

   <br><br>

   <p>3. Poster, No Preload</p>
   <video controls preload="none" poster="../_video/podcast-poster.jpg">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>

   <br><br>

   <p>4. Poster, Preload</p>
   <video controls preload="auto" poster="../_video/podcast-poster.jpg">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>

</body>
</html>

使用width/height设置宽和高，注意如果宽高比与视频宽高比不匹配可能无法充满指定的区域：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Width and Height Demo</title>
<style>
  body { width: 1500px; }
  video { border: 1px solid #ccc; }
  p { background-color: #eee; }
</style>
</head>
<body>

   <p>1. No Width/Height</p>
   <video controls preload="none">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>
   <video controls preload="auto">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>
   <video controls preload="none" poster="../_video/podcast-poster.jpg">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>

   <br><br>

   <p>2. Too Tall</p>
   <video controls width="240" height="300" preload="none">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>
   <video controls width="240" height="300" preload="auto">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>
   <video controls width="240" height="300" preload="none" poster="../_video/podcast-poster.jpg">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>

   <br><br>

   <p>3. Too Wide</p>
   <video controls width="400" height="150" preload="none">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>
   <video controls width="400" height="150" preload="auto">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>
   <video controls width="400" height="150" preload="none" poster="../_video/podcast-poster.jpg">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>

   <br><br>

   <p>4. Just Right</p>
   <video controls width="480" height="300" preload="none">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>
   <video controls width="480" height="300" preload="auto">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>
   <video controls width="480" height="300" preload="none" poster="../_video/podcast-poster.jpg">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>

   <br><br>

   <p>5. Black Background</p>
   <video controls width="240" height="300" preload="auto" style="background-color: #000;">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>

</body>
</html>

显示标题或字幕：

   <video width="480" height="300" controls preload="auto" poster="../_video/podcast-poster.jpg">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <track kind="captions" src="../_video/podcast-captions.vtt" />
     <p>Your browser does not support HTML5 video.</p>
   </video>

至此，一个基本的页面中添加播放器功能已经完成。