1、嵌入视频和音频
1.1 在HTML5中嵌入视频(video)
语法格式:
在上面的语法格式中,src属性用于设置视频文件的路径,controls属性用于为视频提供播放控件,这两个属性是video元素的基本属性。并且
和
!DOCTYPE html>
<html>
<head>
<title>复仇者联盟</title>
<meta charset="utf-8" />
<style type="text/css">
video{
width:1000px;
height:420px;
margin:100px auto 0;
display:block;
}
</style>
</head>
<body>
<video src="http://www.yyfun001.com/res/htmlclassics/full/video/avenger.mp4"
controls="controls"
poster="http://www.yyfun001.com/res/htmlclassics/full/images/video_bg.png">
</video>
</body>
</html>
在video元素中还可以添加其他属性,来进一步优化视频的播放效果。
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 规定视频的音频输出应该被静音。 |
poster | URL | 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 “autoplay”,则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
1.2 在HTML5中嵌入音频(audio)
在HTML5中,audio标签用于定义播放音频文件的标准,它支持三种音频格式,分别为Ogg、MP3和wav。
语法格式:
<audio src="音频文件路劲" controls="controls"></audio>