HTML5音频和视频

Posted 2021-07-27 So istes immer

html5新增了两个多媒体元素：audio和video

1.audio

属性：

autoplay: 自动播放

controls: 显示控件，比如播放按钮

loop: 循环播放

preload: 音频在页面加载时进行加载，并预备播放，如果使用autoplay,则忽略该属性

src: 要播放的音频的URL

在audio标签中可以包含多个source标签，用来导入不同的音频文件，浏览器会自动选择第一个可以识别的格式进行播放

source标签包含三个属性

media:定义媒体资源的类型

src: 定义媒体文件的URL

type:定义媒体资源的MIME类型。如果媒体类型和源文件不匹配，浏览器可能会拒绝播放

<audio autoplay loop>
    <source src="medias/test.ogg" type="audio/ogg">
    <source src="medias/test.mp3" type="audio/mpeg">
您的浏览器不支持audio标签
</audio>

当浏览器不支持audio标签，会显示在<audio>和</audio>之间的HTML字符串

2.video

属性

autoplay: 自动播放

controls: 显示控件，比如播放按钮

loop: 循环播放

preload: 音频在页面加载时进行加载，并预备播放，如果使用autoplay,则忽略该属性

src: 要播放的音频的URL

height:视频播放器的高度

width:视频播放器的宽度

muted:设置视频音频静音

poster:设置视频下载时显示的图像，或用户单击“播放”按钮前显示的图像

同样，在video标签中可以包含多个source标签，用来导入不同的视频文件

video标签支持三种常用的视频格式：Ogg,MPEG4,WebM

3.audio和vedio相同的脚本属性

4.audio和vedio相同的脚本方法

load():可以加载音频或视频文件

play():可以加载并播放音频或视频文件

pause(): 暂停

canPlayType(type):检测video元素是否支持给定MIME类型的文件

该方法返回

probably:表示浏览器确定支持此媒体类型

maybe:表示浏览器可能支持此媒体类型

空字符串:表示浏览器不支持此媒体类型