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中iconfont的使用
Aug 04 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 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
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
php中strtotime函数用法详解
2014/11/15 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
js表头排序实现方法
2015/01/16 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
学习python (1)
2006/10/31 Python
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
捷克时尚网上商店:OTTO
2018/03/15 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
个人教师自我评价范文
2013/12/02 职场文书
仓库规划计划书
2014/04/28 职场文书
招股说明书范本
2014/05/06 职场文书
应届毕业生自荐书
2014/06/18 职场文书
高二化学教学反思
2016/02/22 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript