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个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 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开发过程中常用函数收藏
2009/12/14 PHP
php简单提示框alert封装函数
2010/08/08 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
php扩展开发入门demo示例
2019/09/23 PHP
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
Jquery 扩展方法
2010/05/06 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
jQuery中children()方法用法实例
2015/01/07 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
Sanic框架配置操作分析
2018/07/17 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Python 学习教程之networkx
2019/04/15 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
python Cartopy的基础使用详解
2020/11/01 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
Hotels.com印度:酒店预订
2019/05/11 全球购物
公证委托书大全
2014/04/04 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS
python自动化测试通过日志3分钟定位bug
2021/11/20 Python