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实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
html中相对位置与绝对位置的具体使用
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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
浅谈php调用python文件
2019/03/29 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
详解redux异步操作实践
2018/08/15 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
Python数据结构之Array用法实例
2014/10/09 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
全民健身日活动方案
2014/01/29 职场文书
商业活动邀请函
2014/02/04 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书