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

Posted Jacklovely

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 属性是立即可用的。 
在视频的元数据已加载后,其他属性才可用。

以上是关于HTML5的video虽然可用controls来展示控件的主要内容,如果未能解决你的问题,请参考以下文章

html5中的video标签和audio标签详解

html5 中的 video 如何隐藏底部的全屏按钮或控制条

怎么让 html5 的 video标签在 ios播放

html5如何更改video的src属性

html5中视频播放问题总结

Html5视频播放video标签使用详解转