<source src=”movie.mp4″ type=”video/mp4″ />
<source src=”movie.ogg” type=”video/ogg” />
你的浏览器不支持video元素。
</video>
如果想不播放视频的声音,则设置muted="muted"即可。
除此以外,video元素还提供了一些方法、属性和事件来支持在DOM操作中控制播放的进程。比如调用元素的播放、暂停、加载等方法。还有音量、播放时间等属性可以直接读取或设置。此外还有开始播放、暂停、结束的事件等可以使用。看下面的例子:
复制代码
<!DOCTYPE html>
<html>
<body>
<div style=”text-align:center”>
<button onclick=”playPause()”>Play/Pause</button>
<button onclick=”makeBig()”>Big</button>
<button onclick=”makeSmall()”>Small</button>
<button onclick=”makeNormal()”>Normal</button>
<video id=”video1″ width=”420″>
<source src=”mov_bbb.mp4″ type=”video/mp4″ />
<source src=”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=”MyFirstMusic.ogg” controls=”controls” autoplay=”autoplay” loop=”loop”>
你的浏览器不支持audio元素。
</audio>
其实,在html5中引入了很多项controls,autoplay,loop这种布尔属性,这些属性你像上面这种写是没问题的,但是推荐的写法是下面这种:
复制代码
<audio src=”MyFirstMusic.ogg” controls autoplay loop>
你的浏览器不支持audio元素。
</audio>
因为浏览器遇到这些属性就说明这些属性开启了,也就是说如果你写上这些属性,并强行设置为false,效果还是等同于true,所以一般推荐只写属性名称。
这个写法问题在form中也是存在的,很多form和input的新属性都是布尔属性,都应该使用推荐的写法。
指示度量的元素
下面这些元素并不是每个浏览器都支持,但是基本上在Chrome上还可以可以看到效果的。









