电话
13363039260
HTML5网站建设中如何添加视频和音频
2019-12-26 22:56 admin
HTML5网站建设中如何添加视频和音频呢？煜阳网站建设制作人员整理了以下内容，供您参考。
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>
————————————————
版权声明：本文为CSDN博主「_Silvia」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_36894564/article/details/79189771