HTML5-多媒体标签

多媒体标签

audio标签

概念:在页面中插入音频，不同的浏览器对音频格式的支持不一样

语法:

ini 复制代码

<audio src="音频文件路径" controls="controls" autoplay="autoplay" preload="auto|media|none" loop="loop">
    你的浏览器不支持audio标签，请升级到最新版本
</audio>

说明

常用属性

src ：音频文件的来源
controls：是否显示控制面板，默认不显示
autoplay：是否自动播放，默认不自动播放
loop ：是否循环播放
muted ：是否静音
preload ：是否预加载
- none：不预加载
- auto：默认值，预加载
- metadata：只预加载元数据（即媒体字节数，第一帧，播放列表等)

实例

css 复制代码

<audio src="../video/example.mp3" autoplay controls loop></audio>

运行结果

视频格式

对于HTML5音频格式中，主要有3种格式

主流浏览器对音频的支持

格式	Chrome	Edge	Firefox	Safari	Opera
MP3	√	√	√	√	√
OGG	√	√	√		√
WAV	√	√	√	√	√

source元素

概念:如果想要音频在所有主流浏览器中成功播放，还得做兼容处理。在HTML5中，可以使用source元素来实现多种格式的音频播放

语法:

ini 复制代码

<audio>
    <source="audio/MP3" src="文件路径" />
    <source="audio/ogg" src="文件路径" />
</audio>

实例：

css 复制代码

<audio  autoplay controls loop>
            <source src="../video/example.mp3" />
            <source src="../video/example.ogg"/>
</audio>

运行结果

video标签

概念:在页面中插入视频，不同的浏览器对视频格式的支持不一样

语法:

ini 复制代码

<video src="视频文件路径" height="高度值" width="宽度值" poster="视频文件封面的路径" 
  controls autoplay preload="auto|meta|none" loop>
    你的浏览器不支持video标签，请升级到最新版本
</video>

常用属性

width/height ：视频播放器的尺寸
poster ：在视频加载前显示的图片
controls：是否显示控件
loop：是否循环播放
preload：是否预加载
- auto：默认值，预加载
- metadata：只预加载元数据（即媒体字节数，第一帧，播放列表等）
- none：不预加载

如果浏览器不支持video元素，就会显示标签中的内容"你的浏览器不支持video标签，请升级到最新版本"。这个提示文字可加可不加.

实例:

xml 复制代码

<video src="../video/myVideo.mp4" width='400' height="400" autoplay controls loop>
       <!--以上格式都不满足就会显示以下这句话-->
    你的浏览器不支持video标签，请升级到最新版本
</video>

运行结果:

视频格式

对于HTML5，主要有3种视频格式

mp4
ogg
webm

主流浏览器对视频格式的支持程度

格式	Chrome	Edge	Firefox	Safari	Opera
mp4	√	√	√	√	√
ogg	√	√	√		√
webm	√	√	√	√	√

source元素

概念:由于不同的浏览器对HTML5的视频格式各不相同，为满足需求，可能需要为视频文件提供多种不同的解码器，所以HTML5提供了一个新的元素source元素

语法:

bash 复制代码

<video>
    <source src="文件路径" type='video/mp4' media="解码器" />
    <source src="文件路径" type='video/ogg' media="解码器" />
    <source src="文件路径" type='video/webm' media="解码器" />
</video>

属性

src：视频源的URL
type：视频源的播放类型
media：指定视频源所匹配的源码器信息

实例:

xml 复制代码

<video controls>
            <source src="../video/myVideo.mp4" type="video/mp4">    
            <source src="../video/myVideo.ogg" type="video/ogg">    
            <source src="../video/myVideo.webm" type="video/webm">
       <!--以上格式都不满足就会显示以下这句话-->
            你的浏览器不支持video标签，请升级至最新版
</video>

运行结果

embed标签

概念:

多媒体文件是文本、图像、声音、动画、视频等媒体元素的统称。embed元素可以插入多种格式的多媒体文件，常见的格式有JPG、WMV、WAV、AIFF、MP3等。

语法:

arduino 复制代码

<embed src="url" width="宽度" height="高度" type="类型"></embed

说明

常用属性

src：文件来源
width：文件宽度
height：文件高度
type：可省略，文件类型

所有的type类型：www.iana.org/assignments...

实例

xml 复制代码

<!-- 显示图片 -->
<embed src="../img/a.jpg" height="200" width="200" ></embed>
<!-- 显示视频 -->
<embed src="../video/myVideo.mp4" height="300" width="400" ></embed>
<!-- 显示音频 -->
<embed src="../video/example.mp3" height="300" width="400" ></embed>

运行结果

object标签

概念:

object元素可以定义一个嵌入的对象。可以使用object向页面中添加文件。

object支持多种不同媒介类型，如图像、声音、动画、视频等。使用时必须要指定data和type属性。

语法:

xml 复制代码

<object type="类型" data="文件来源" width="宽度" height="高度">
      <!--无法加载就会显示以下这句话-->
        文件无法显示
</object>

实例

xml 复制代码

    <!-- 显示图片 -->
        <object type="image/jpg" data="../img/a.jpg" width="200" height="200">
     <!--无法加载就会显示以下这句话-->
            图片无法显示
        </object>
            <br/>
        <!-- 显示视频 -->
        <object type="video/mp4" data="../video/myVideo.mp4" width="200" height="300">
          <!--无法加载就会显示以下这句话-->
            视频无法显示
        </object>
        <!-- 显示音频 -->
        <object type="audio/mp3" data="../video/example.mp3" width="200" height="200">
          <!--无法加载就会显示以下这句话-->
        音频无法显示
        </object>

运行结果

音频与视频相关的属性

HTML5的常用音频/视频属性及描述如下所示，属性用于设置或返回播放的特性。

HTML5的常用音频/视频属性

属性	描述
autoplay	设置或返回是否在加载完成后随即播放音频或视频
controls	设置或返回音频/视频是否显示默认控制条（比如播放/暂停等）
currentTime	设置或返回音频/视频中的当前播放位置（以秒计）
duration	返回当前音频/视频的长度（以秒计）
loop	设置或返回音频/视频是否应在结束时重新播放
muted	设置或返回音频/视频是否静音
paused	设置或返回音频/视频是否暂停
readyState	返回音频/视频当前的就绪状态
src	设置或返回audio/video元素的当前来源
poster	设置或返回video元素的封面图片的地址
volume	设置或返回音频/视频的音量

HTML5的常用音频/视频方法

HTML5的音频/视频方法用于实现音频/视频的某些功能，如音频/视频的加载，播放，暂停播放等。

HTML5的常用音频/视频方法及描述

方法	描述
canPlayType()	检测浏览器是否能播放指定的音频/视频类型
load()	重新加载音频/视频
play()	开始播放音频/视频
pause()	暂停播放当前的音频/视频

HTML5的常用音频/视频事件

HTML5中的某个音频/视频事件是在满足某些条件的情况下触发的。如 error 事件是在加载错误期间出现错误时触发的，加载出错时要做什么处理，就把出错程序写在这个事件中。

HTML5的常用音频/视频事件及描述

事件	描述
ended	目前的播放列表已结束时触发
error	音频/视频加载期间发生错误时触发
pause	音频/视频已暂停播放时触发
play	音频/视频已开始播放或不再暂停播放时触发
volumechange	音量已更改时触发
progress	浏览器正在下载音频/视频时触发