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伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
HTML高亮关键字的实现代码
Oct 22 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 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 URL编码解码函数代码
2009/03/10 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
PHP new static 和 new self详解
2017/02/19 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
深入了解javascript中的prototype与继承
2013/04/14 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
Python 字符串定义
2009/09/25 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
公司成立感言
2014/01/11 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
兴趣小组活动总结
2014/05/05 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
校车司机安全责任书
2015/05/11 职场文书
党支部季度考核意见
2015/06/02 职场文书