前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

Web开发学习笔记(7)——HTML5(三)多媒体标签

在 HTML5 中,使用 audio 标签来播放声音文件或者音频流,该标签支持 Ogg、MP3、WAV 等音频格式。

其使用格式如下:

<audio src="URL" controls></audio>

参数说明:

  • src 属性:用于指定要播放的声音文件。
  • controls 属性:是 controls="controls" 简写形式,用于提供播放、暂停和音量控件。

除了上面两种属性,audio 还有:

  • autoplay 属性:音频自动播放。
  • loop 属性:音频自动重复播放。
  • preload 属性:用来缓冲 audio 标签的大文件,它有三个属性值 none(不缓冲)、auto(缓冲音频文件)、metadata (缓冲文件的元数据)。

audio 标签还可以通过子标签 source 来进行多数据源的设置。

其使用格式如下:

<audio>
  <source src="URL" />
</audio>

一个 audio 标签可以包含多个 source 标签,当播放器无法识别当前格式的播放源时会调用下一个 source 播放源进行播放。

source 标签是用来指定多个文件,给不同的浏览器提供可支持的编码格式。

例如:

<audio>
  <source src="filename.opus" />       <!--source是单数-->
  <source src="filename.ogg" />
  <source src="filename.mp3" />
</audio>

在 HTML 中,提供了 video 标签向文档中嵌入媒体播放器。

语法格式如下所示:

<video controls>
  <source src="URL" />
</video>

video 标签中加入 poster 属性即可给视频添加封面。

使用格式如下:

<video poster="URL"></video>

属性值 URL 是封面图的地址。

For example,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <video poster="elena.png" controls muted>
      <source src="video.mp4" />
    </video>
  </body>
</html>

muted表示默认静音,controls表示显示控件。去掉这两个属性,现象相反。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言