首页 > 代码库 > 音频的使用和插入以及动态文字的使用

音频的使用和插入以及动态文字的使用

大多数音频是通过加载插件来播放音频的文件的,常用的是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>

 

音频的使用和插入以及动态文字的使用