本文介绍了HTML5中用于嵌入音频和视频的`<video>`和`<audio>`标签，详细讲解了它们的属性，如`src`、`controls`、`autoplay`、`loop`、`muted`和`preload`等，并提供了实例展示如何设置视频封面和音频播放控制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识音频</title>
</head>
<body>
<video src="./resource/video/3.mp4" controls autoplay width="500" height="500" poster="/canvas/bg.png">
<!--video标签的属性
width : 视频显示区域的宽度,单位是css像素
height : 视频显示区域的高度,单位是css像素
poster : 一个海报帧的URL,用于在用户播放或者跳帧之前展示 (可以用于指定视频封面)
src : 要嵌入页面的视频的URL
controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
muted : 是否静音
preload : 告诉浏览器作者认为达到最佳的用户体验的方式是什么
none: 提升作者认为用户不需要查看该视频,服务器也想要最小化访问流量
即提示浏览器该视频不需要缓存
metadata: 提升尽管作者认为用户不需要查看该视频
不过抓取元数据(如：长度)还是合理的
auto: 用户需要这个视频优先加载,即提示,如果有需要,可以下载整个视频,即使用户不一定会用它
空字符串: 代值auto值
-->
</video>
<audio src="./resource/audio/1.mp3" muted controls>
<!--src : 要嵌入页面的视频的URL
controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
muted : 是否静音
preload : 告诉浏览器作者认为达到最佳的用户体验的方式是什么
none: 提升作者认为用户不需要查看该视频,服务器也想要最小化访问流量
即提示浏览器该视频不需要缓存
metadata: 提升尽管作者认为用户不需要查看该视频
不过抓取元数据(如：长度)还是合理的
auto: 用户需要这个视频优先加载,即提示,如果有需要,可以下载整个视频,即使用户不一定会用它
空字符串: 代值auto值
-->
</audio>
</body>
</html>
扫一扫
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
