HTML5使用DOM进行自定义控制示例代码


Posted in HTML / CSS onJune 08, 2013

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 属性是立即可用的。
在视频的元数据已加载后,其他属性才可用。
HTML / CSS 相关文章推荐
玩转CSS3色彩
Jan 16 HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 #HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 #HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 #HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 #HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 #HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 #HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 #HTML / CSS
You might like
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
python定时器(Timer)用法简单实例
2015/06/04 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
python使用smtplib模块发送邮件
2020/12/17 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
大二自我鉴定范文
2013/10/05 职场文书
高级电工工作职责
2013/11/21 职场文书
采购经理岗位职责
2014/02/16 职场文书
质量提升方案
2014/06/16 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
交通事故责任认定书
2015/08/06 职场文书
2016年感恩节寄语
2015/12/07 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL
Go 内联优化让程序员爱不释手
2022/06/21 Golang