HTML5增加音频和视频

文章目录

    • video标签的用法
      • video标签常用属性值
      • video标签的视频格式
    • DOM video对象
    • audio标签
      • audio标签
    • DOM audio对象

video标签的用法

    在HTML5之前,网页中只能处理文字和图像数据,在HTML5中为网页提供了处理视频数据的能力,使用

<video src="路径" controls="controls">
您的浏览器不支持video标签
</video>

video标签常用属性值

HTML5增加音频和视频_第1张图片

video标签的视频格式

  ogg:带有Theora视频编码和Vorbis音频编码的0gg文件。
  MPEG4:带有H.264视频编码和AAC音频编码的MPEG 114文件。
  webM:带有VP8视频编码和Vorbis 音频编码的WebM文件。
HTML5增加音频和视频_第2张图片
目前为止没有一 种视频格式让所有浏览器都支持, 为此,HTML 5中提
供了标签,用于指定多个备用的不同格式的文件的路径,语法如下所示:

<video controls>
<source src="视频文件地址”type="媒体文件类型/格式">
<source src="视频文件地址”type="媒体文件类型/格式">
......
</video>

*此标签对音频文件依然适用

DOM video对象

  video常用的方法,属性和事件
HTML5增加音频和视频_第3张图片HTML5增加音频和视频_第4张图片HTML5增加音频和视频_第5张图片

audio标签

    目前为止在网页中播放音频没有固定的标准,大多数音频是通过插件 (比如Flash)来播放的,但并非所有浏览器都有同样的插件,HTML5中提供/标签来定义Web上的声音文件或音频流,它的使用方法与/标签基本相同,语法如下所示:

<audio src="音频文件路径" controls> 
您的浏览器不支持audio标签
</audio>

HTML5增加音频和视频_第6张图片

audio标签

  audio标签常用方法,属性和对象
HTML5增加音频和视频_第7张图片

这里是引用

HTML5增加音频和视频_第8张图片HTML5增加音频和视频_第9张图片

DOM audio对象

  其实/标签和/有很大的相似性,Audio对 象和Video的DOM操作功能其实都是由HTML Medi aE lement对象统一定义的核心功能,Audio对象指的是HTML Aud ioE lement对象,它完全继承了HTML MediaEl ement对象提供的功能,而Video对 象指的是HTMLVideoElement对象,在该对象中提供了额外的功能,主要表现在一些额外的属性上,如下表所示。
HTML5增加音频和视频_第10张图片

你可能感兴趣的:(HTML5增加音频和视频)