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 box-sizing属性使用参考指南
Jan 08 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
css弧边选项卡的项目实践
May 07 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调用Twitter的RSS的实现代码
2010/03/10 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
深入解析php中的foreach函数
2013/08/31 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
python实现通过shelve修改对象实例
2014/09/26 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
python基础练习之几个简单的游戏
2017/11/10 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
python 读取修改pcap包的例子
2019/07/23 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
法学个人求职信范文
2014/01/27 职场文书
小学节能减排倡议书
2014/05/15 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
三国演义读书笔记
2015/06/25 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers