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中Transform动画属性用法详解
Jul 04 HTML / CSS
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 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和ACCESS写聊天室(一)
2006/10/09 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP线程的内存回收问题
2016/07/08 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
python海龟绘图实例教程
2014/07/24 Python
详细探究Python中的字典容器
2015/04/14 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
python数据处理实战(必看篇)
2017/06/11 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
Django发送邮件功能实例详解
2019/09/02 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
个人生活学习自我评价范文
2013/11/26 职场文书
物流仓储计划书
2014/01/10 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
公司活动邀请函
2014/01/24 职场文书
预备党员政审材料
2014/02/04 职场文书
会议接待欢迎标语
2014/10/08 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
企业法人任命书
2015/09/21 职场文书
贷款担保书范本
2015/09/22 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP