html5学习1

1.放上一个视频

<video width="320" height="240" controls="controls">
<source src="/i/movie.ogg" type="video/ogg">
<source src="/i/movie1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

使用video标签，width和height属性是视频占的空间大小，controls属性是浏览器提供的控件。

两个source应该是有个兼容的效果在里面。浏览器会选择第一个支持的播放。

loop=loop是循环播放，autoplay是自动播放。

2.使用javascript来控制视频的播放和变化

按钮代码，div表示一个区域

<div style="text-align:center;">
<button onclick="playPause()">播放/暂停</button> 
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<br /> 
<video id="video1" width="420" style="margin-top:15px;">
<source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
<source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 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>

使用document.getElementById来获取video的各项属性。

通过video的各个默认函数来达到效果。