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 相关文章推荐
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
php文件读取方法实例分析
2015/06/20 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python素数检测的方法
2015/05/11 Python
Python实现的RSS阅读器实例
2015/07/25 Python
Python实现网站表单提交和模板
2019/01/15 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
python读取xml文件方法解析
2020/08/04 Python
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
促销活动总结模板
2014/07/01 职场文书
安全责任书范文
2014/08/25 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
嘉宾邀请函
2015/01/31 职场文书
企业计划生育责任书
2015/05/09 职场文书
《小小的船》教学反思
2016/02/18 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
Python Pandas 删除列操作
2022/03/16 Python
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技