HTML5使用DOM进行自定义控制示例代码
2013-06-08 10:09
696 查看
HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,所以很多时候我们需要使用Dom来进行自定义的一些操作和控制。下面是一个小例子。
当然效果不是很美观,若想好看的可以自己设置css样式等。
需要注意的是在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。
在视频的元数据已加载后,其他属性才可用。
当然效果不是很美观,若想好看的可以自己设置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 属性是立即可用的。
在视频的元数据已加载后,其他属性才可用。
相关文章推荐
- HTML5 <video> - 使用 DOM 进行自定义控制示例
- HTML5 视频(二) <video> 使用 DOM 进行控制
- HTML5 <video> - 使用 DOM 进行控制
- android播放器音量控制-使用震动示例代码-进度条控制音量
- 博客园使用highlight.js对代码进行高亮,并实现自定义关键词高亮
- HTML5 Canvas自定义圆角矩形与虚线示例代码
- Tensorflow 使用CNN 进行mnist 训练代码示例
- HTML5 audio标签使用js进行播放控制实例
- Outlook 2010中添加自定义Form并使用VB代码处理事务的示例
- spring mvc示例代码(使用SimpleFormController表单控制)
- Outlook 2010中添加自定义Form并使用VB代码处理事务的示例
- Xcode中使用Git进行代码版本控制
- 使用jdbcTemplate查询返回自定义对象集合代码示例
- 使用VPD进行数据访问控制的示例
- 使用delphi+intraweb进行微信开发1~4代码示例
- Control Study->AdRotator广告控件显示自定义配置文件中广告以及与DataGrid控件结合使用显示图片(示例代码下载)
- 使用Python进行AES加密和解密的示例代码
- 安卓Studio上使用Git进行代码控制二在原有项目基础增加
- html5的自定义data-*属性和jquery的data()方法的使用示例-属性-data-方法