|
audio标签有一些属性用来控制音频的内容、何时以及如何播放等方面的情况，这些属性分别是：src(文件名)、preload(在页面加载时加载)、controls(显示控制)、loop(循环)和autoplay(自动播放)。在下面的例子中，只要页面一加载音频就开会播放，其会持续播放，所提供的控制可以让用户停止或是重新开始播放音频：
复制代码 代码如下:
<audio src="http://www.jb51.net/html5/MyFirstMusic.ogg" controls="controls" autoplay="autoplay" loop="loop">
你的浏览器不支持audio元素。
</audio>
如果浏览器不支持该元素，则显示元素的文本信息。
如果设置了autoplay元素，则自动忽略preload属性。设置preload="auto"的话，则页面加载后载入音频。
audio元素允许指定多个source元素来兼容浏览器的问题。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：
复制代码 代码如下:
<audio>
<source src="http://www.jb51.net/html5/song.ogg" type="audio/ogg">
<source src="http://www.jb51.net/html5/song.wma" type="audio/x-ms-wma">
<source src="http://www.jb51.net/html5/song.mp3" type="audio/mpeg">
你的浏览器不支持audio元素。
</audio>
视频元素
video元素允许你播放视频片段或是流化视觉媒体。该元素支持的格式如下表所示：
格式
IE
Firefox
Opera
Chrome
Safari
Ogg
No
3.5+
10.5+
5.0+
No
MPEG 4
9.0+
No
No
5.0+
3.0+
WebM
No
4.0+
10.6+
6.0+
No
它拥有audio元素所有的属性，另外再加上：muted(静音)、poster(等待图片)、width和height。最后两个意思不用说了。当视频正在加载或是视频处于完全没有加载的情况中时，poster属性(指定一个绝对的或相对的URL)可让你找出一张图像来应付着先；muted代表静音。
video也支持利用source元素解决兼容性问题。看一个小例子：
复制代码 代码如下:
<video controls="controls" poster="/images/screen.gif">
<source src="http://www.jb51.net/html5/movie.mp4" type="video/mp4" />
<source src="http://www.jb51.net/html5/movie.ogg" type="video/ogg" />
你的浏览器不支持video元素。
</video>
如果想不播放视频的声音，则设置muted="muted"即可。
除此以外，video元素还提供了一些方法、属性和事件来支持在DOM操作中控制播放的进程。比如调用元素的播放、暂停、加载等方法。还有音量、播放时间等属性可以直接读取或设置。此外还有开始播放、暂停、结束的事件等可以使用。看下面的例子：
复制代码 代码如下:
<!DOCTYPE html>
<html>
<body>
<div>
<button>Play/Pause</button>
<button>Big</button>
<button>Small</button>
<button>Normal</button>
<video>
<source src="http://www.jb51.net/html5/mov_bbb.mp4" type="video/mp4" />
<source src="http://www.jb51.net/html5/mov_bbb.ogg" type="video/ogg" />
你的浏览器不支持video元素。
</video>
</div>
<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>
这里其实需要注意一种新的写法：上面的例子中我们是这样写音频元素的：
复制代码 代码如下:
<audio src="http://www.jb51.net/html5/MyFirstMusic.ogg" controls="controls" autoplay="autoplay" loop="loop">
你的浏览器不支持audio元素。
</audio>
其实，在html5中引入了很多项controls，autoplay,loop这种布尔属性，这些属性你像上面这种写是没问题的，但是推荐的写法是下面这种：
复制代码 代码如下: （编辑：焦作站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
