欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5 行使DOM举办自界说节制示例代码

发布时间:2016-11-28  编辑:杨雨个人博客网站   点击:   

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 属性是当即可用的。
在视频的元数据已加载后,其他属性才可用。 本文地址:http://itbyc.com/web/html5/13566.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1