HTML5:向网页中添加视频和音频


向网页中添加视频:video标签的使用


video标签有很多属性用于控制视频的播放:

  • src 用于指定视频文件的路径。
  • poster 用于指定一个图像,在当前视频播放之前或视频数据无效时显示(预览图)。视频数据无效可能是视频正在加载,可能是视频地址错误等等。
  • controls 用于向浏览器指明页面制作者没有使用脚本生成播放控制器,需要浏览器提供默认的播放控件(须包括播放暂停控制、播放进度控制、音量控制等)。
  • loop 用于指定视频是否循环播放,是一个布尔属性。
  • autoplay 用于设置视频是否自动播放,是一个布尔属性。

    注意:HTML中布尔属性的值不是true和false。正确的用法是,在标签中使用此属性表示true,此时属性要么没有值,要么其值恒等于它的名字;而在标签中不使用此属性表示false。

  • preload 用于在没有设置autoplay时定义视频是否预加载,它有三个可选择的值:none、metadata、auto。如果不使用此属性,默认为auto。

    None:不进行预加载。使用此属性值,可能是页面制作者认为用户不期望此视频,或者减少HTTP请求。
    Metadata:部分预加载。使用此属性值,代表页面制作者认为用户不期望此视频,但为用户提供一些元数据(包括尺寸、首帧图像、播放列表、持续时间等)。
    Auto:全部预加载。

video标签内可以包含多个source标签:

source标签 用于给媒体指定多个可选择的(浏览器最终只能选一个)文件地址,且只能在video标签没有使用src属性时使用。浏览器按source标签的顺序检测标签指定的媒体是否能够播放(可能是媒体格式不支持,媒体不存在等等),如果不能播放,换下一个。此方法多用于兼容不同的浏览器。source标签本身不代表任何含义,不能单独出现。

此标签包含src、type、media三个属性:

  • src用于指定媒体的地址,和video标签的一样。
  • type:用于说明src属性指定媒体的类型,帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。
  • media:用于说明媒体在何种媒介中使用,不设置时默认值为all,表示支持所有媒介。

除此之外,video标签内还可以包含当指定的视频都不能播放时,返回的内容。

示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Adding HTML5 Video</title>
  </head>
  <body>
    <video src="video/snow.mp4" 
      poster="images/snow.jpg"
      width="320" height="240" 
      controls 
      autoplay 
      loop>
      <p>A video of snow in WHU</p>
    </video>
  </body>
</html>

向网页中添加音频:audio标签的使用


audio标签有很多属性用于控制音频的播放:

  • src 用于指定音频文件的路径。
  • controls 用于表明播放器是否显示播放控件。如果没有该特性,播放控件就会默认隐藏。
  • loop 用于指定音频是否循环播放,是一个布尔属性。
  • autoplay 用于设置音频是否自动播放,是一个布尔属性。
  • preload 用于在没有设置autoplay时定义音频是否预加载。它可选用的值与video标签的可选值相同。

audio标签内可以包含多个source标签,其用法与video内的相同。
类似地,audio标签内还可以包含当指定的音频都不能播放时,返回的内容。

示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Adding HTML5 Audio</title>
  </head>
  <body>
    <audio controls autoplay loop>
      <source src="happy birthday.mp3" type="audio/mpeg">
      <source src="happy birthday.ogg" type="audio/ogg">
      <p>This browser does not support our audio format.</p>
    </audio>
  </body>
</html>
发布了3 篇原创文章 · 获赞 29 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览