HTML5应用DOM开展自定操纵示例编码

日期:2021-02-25 类型:科技新闻 

关键词:凡科自助建站,企业网站怎么建设,智能建站系统,自己建个网站,搭建网站基本步骤

HTML5的video尽管能用controls来展现控制,并开展操纵播发中止等,可是不一样的访问器显示信息的实际效果将会不1样,因此许多情况下大家必须应用Dom来开展自定的1些实际操作和操纵。下面是1个小事例。
自然实际效果并不是很美观大方,若想漂亮的能够自身设定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 特性是马上能用的。
在视頻的元数据信息已载入后,别的特性才能用。