向网页中添加视频：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>
5623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
