HTML5的video虽然可用controls来展现控件

HTML5的video虽然可用controls来展现控件，并进行控制播放暂停等，可是不一样的浏览器显示的效果可能不同，因此不少时候咱们须要使用Dom来进行自定义的一些操做和控制。下面是一个小例子。 
固然效果不是很美观，若想好看的能够本身设置css样式等。 

复制代码

代码以下:

<div id="video_div" style="text-align:center;"> 
<button onclick="playPause()">播放/暂停</button> 
<button onclick="toBig()">大</button> 
<button onclick="toNormal()">中</button> 
<button onclick="toSmall()">小</button> 

<video id="myVideo" width="500" height="250" style="margin-top:15px;"> 
<source src="demo.mp4" type="video/mp4" /> 
<source src="demo.ogg" type="video/ogg" /> 
您的浏览器不支持此HTML5 视频标签。 
</video> 
</div> 

复制代码

代码以下:

<script type="text/javascript"> 
var myVideo=document.getElementById("myVideo"); 
function playPause() 
{ 
if (myVideo.paused) 
myVideo.play(); 
else 
myVideo.pause(); 
} 
function toBig() 
{ 
myVideo.width=560; 
} 
function toNormal() 
{ 
myVideo.width=420; 
} 
function toSmall() 
{ 
myVideo.width=320; 
} 
</script> 

须要注意的是在全部属性中，只有 videoWidth 和 videoHeight 属性是当即可用的。 
在视频的元数据已加载后，其余属性才可用。