HTML5中添加多媒体支持(一)

本文介绍如何在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>

其中:

  1. src指定了节目的源;
  2. controls表示带上浏览器自带的播放器控制;
  3. <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>


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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值