首页 > 代码库 > 音频的使用和插入以及动态文字的使用
音频的使用和插入以及动态文字的使用
大多数音频是通过加载插件来播放音频的文件的，常用的是flash。但是并不是所有的浏览器都拥有同样的插件。为此和HTML4相比，HTML5中新增了audio标签。规定一种包括音频的方法。
audio标签概述：只要定义播放声音文件和音频流的标准。支持三种音频格式，分别为ogg，mp3,Wav。
在HTML5中播放音频，代码如下：
<audio src=http://www.mamicode.com/”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=http://www.mamicode.com/”11.mp4” controls=”controls”>
</video>
Video属性：
|
属性 |
值 |
描述 |
|
Autoplay |
autoplay |
如果出现该属性，视频在就绪后马上播放 |
|
Controls |
Controls |
如果出现该属性，则向用户显示控件，如按钮 |
|
Loop |
如果出现该属性，每当音频结束后自动播放 |
|
|
Preload |
如果出现该属性，预播放 |
|
|
url |
要播放视频的url地址 |
|
|
Width |
宽度值 |
设置视频播放器的宽度 |
|
heigth |
高度值 |
设置视频播放器的高度 |
|
poster |
url |
在视频没有加载出来时提供一个以一定比例缓冲的图片 |
设置背景音乐
<audio src=http://www.mamicode.com/”111.mp3” controls=”controls”>
您的浏览器不支持audio的标签
</audio>
设置背景音乐的循环播放
<audio controls=”controls” loop=”loop”>
<sounce src=http://www.mamicode.com/”111.mp3”>
</audio>
添加网页视频文件
<video src=http://www.mamicode.com/”11.mp4” controls=”controls”>
您的浏览器不支持video标签
<video>
设置自动运行：
<video src=http://www.mamicode.com/”11.mp4” controls=”controls” autoplay=”autoplay”>
</video>
设置视频窗口的宽度和高度
<video width=”500px” height=”300px” controls=”controls” >
<sounce src=http://www.mamicode.com/”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="http://www.mamicode.com/111.mp3" controls="controls">
该浏览器不支持video标签
</audio><br/>
<audio controls="controls" loop="loop">
<source src="http://www.mamicode.com/111.mp3"/>
该浏览器不支持video标签
</audio>
<br/>
<video src="http://www.mamicode.com/11.mp4" controls="controls"></video>
<video src="http://www.mamicode.com/11.mp4" autoplay="autoplay"></video>
<video controls="controls" loop="loop">
<source src="http://www.mamicode.com/22.mp4"/>
该浏览器不支持video标签
</video>
<br>
<video width="200" height="150" controls="controls">
<source src="http://www.mamicode.com/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>
音频的使用和插入以及动态文字的使用