大多数音频是通过加载插件来播放音频的文件的,常用的是flash。但是并不是所有的浏览器都拥有同样的插件。为此和HTML4相比,HTML5中新增了audio标签。规定一种包括音频的方法。
audio标签概述:只要定义播放声音文件和音频流的标准。支持三种音频格式,分别为ogg,mp3,Wav。
在HTML5中播放音频,代码如下:
<audio src=”song.mp3” controls=”controls”>
</audio>
Controls属性是属性供添加播放,暂停和音量控件。在<audio>浏览器不显示</audio>
Audio常见属性
属性 |
值 |
描述 |
Autoplay |
Autoplay(自动播放) |
如果出现该属性,音频在就绪后马上播放 |
Controls(控制) |
如果出现该属性,则向用户显示控件,如按钮 |
|
Loop(循环) |
如果出现该属性,每当音频结束后自动播放 |
|
Preload(加载) |
如果出现该属性,预播放 |
|
url(地址) |
要播放音频的url地址 |
|
autobuffer |
Autobuffer(自动缓冲) |
缓冲 |
另外可以用audio标签通过source添加多个音频文件
<audio controls=”controls”>
<source scr=”222.mp4” type=”audio/mp3”>
<source scr=”111.mp3” type=”audio/mp3”>
</audio>
网页视频标签:Video
在HTML5中播放频,代码如下:
<video src=”11.mp4” controls=”controls”>
</video>
Video属性:
属性 |
值 |
描述 |
Autoplay |
autoplay |
如果出现该属性,视频在就绪后马上播放 |
Controls |
Controls |
如果出现该属性,则向用户显示控件,如按钮 |
Loop |
如果出现该属性,每当音频结束后自动播放 |
|
Preload |
如果出现该属性,预播放 |
|
url |
要播放视频的url地址 |
|
Width |
宽度值 |
设置视频播放器的宽度 |
heigth |
高度值 |
设置视频播放器的高度 |
poster |
url |
在视频没有加载出来时提供一个以一定比例缓冲的图片 |
设置背景音乐
<audio src=”111.mp3” controls=”controls”>
您的浏览器不支持audio的标签
</audio>
设置背景音乐的循环播放
<audio controls=”controls” loop=”loop”>
<sounce src=”111.mp3”>
</audio>
添加网页视频文件
<video src=”11.mp4” controls=”controls”>
您的浏览器不支持video标签
<video>
设置自动运行:
<video src=”11.mp4” controls=”controls” autoplay=”autoplay”>
</video>
设置视频窗口的宽度和高度
<video width=”500px” height=”300px” controls=”controls” >
<sounce src=”11.mp4”/>
</video>
滚动文字的应用
<marquee>aaa</marquee>
属性:direction=“left/right/up/down”
Alternate=“scroll/slide/alternate”
Scrollamount=“滚动速度/值(数字)”
Scrolldelay=“滚动延迟(数字)”
滚动循环
<marquee loop=“循环次数”>aaa</marquee>
<!-- behavior=alternate 行为alternate是来回滚动;slide是滚动一次停止;scroll是循环滚动-->
<!-- Scrollamount=50 是速度 Scrolldelay=4是延迟-->
附:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<audio src="111.mp3" controls="controls">
该浏览器不支持video标签
</audio><br/>
<audio controls="controls" loop="loop">
<source src="111.mp3"/>
该浏览器不支持video标签
</audio>
<br/>
<video src="11.mp4" controls="controls"></video>
<video src="11.mp4" autoplay="autoplay"></video>
<video controls="controls" loop="loop">
<source src="22.mp4"/>
该浏览器不支持video标签
</video>
<br>
<video width="200" height="150" controls="controls">
<source src="11.mp4"/>
该浏览器不支持video标签
</video>
<marquee direction="up" >我说了所有的谎</marquee><br/>
<marquee direction="left" >你全都相信</marquee><br/>
<marquee direction="down" >我爱你你却老不信</marquee><br/>
<marquee behavior=alternate>你书里的剧情</marquee><br/>
<marquee behavior=slide>我不想上演</marquee><br/>
<!-- behavior=alternate 行为alternate是来回滚动;slide是滚动一次停止;scroll是循环滚动-->
<marquee Scrollamount=50 Scrolldelay=4>因为我喜欢喜剧收尾</marquee><br/>
<marquee Scrollamount=3 Scrolldelay=40>我试过完美放弃</marquee><br/>
<!-- Scrollamount=50 是速度 Scrolldelay=4是延迟-->
<marquee width="100" height="100">的却很踏实</marquee><br/>
<marquee width="500" height="10">醒来了梦散了</marquee><br/>
</body>
</html>