HTML5 <video> - 使用 DOM 进行自定义控制示例
2013-06-07 17:38
603 查看
HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的
效果可能不一样,所以很多时候我们需要使用Dom来进行自定义的一些操作和控制。下面是一个小例子。
当然效果不是很美观,若想好看的可以自己设置css样式等。
需要注意的是在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。
在视频的元数据已加载后,其他属性才可用。
效果可能不一样,所以很多时候我们需要使用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> <br /> <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使用DOM进行自定义控制示例代码
- HTML5 视频(二) <video> 使用 DOM 进行控制
- HTML5 <video> - 使用 DOM 进行控制
- HTML5 - 使用<video>播放视频
- html5开发<video>视频标签的使用--…
- HTML5新特性(1)<video> 标签
- <Linux+qt>设置使用键盘控制事件响应
- 怎么控制媒体播放(<audio><video>)
- 如何使用<Beginning ASP.NET 3.5 in C# and VB>书中的示例代码
- <实例>C++ 将一句话里的单词进行倒置,标点符号不倒换——使用string库实现
- AdapterView<Adapter>使用示例
- Control Study->AdRotator广告控件显示自定义配置文件中广告以及与DataGrid控件结合使用显示图片(示例代码下载)
- 实战c++中的vector系列--使用sort算法对vector<unique_ptr<string>>进行排序(sort函数出错“应输入 2 个参数,却提供了 3 个)
- //2.使用宏将一个数二进制中的奇数位和偶数为进行交换。 #include<stdio.h> #include<stdlib.h> #define EXH(x) \ ((x & 0x5555555
- Control Study->AdRotator广告控件显示自定义配置文件中广告以及与DataGrid控件结合使用显示图片(示例代码下载)
- HTML5 - 使用<time>标注日期和时间
- <Linux+Qt>Qt4编程控制mplayer嵌入自定义界面监控或视频显示
- <Android>在Activity被非正常杀死并重建时,使用savedInstanceState进行数据恢复的简单实例
- 使用Subversion进行版本控制 针对 Subversion 1.4(根据r2866编译)-------<转载>这是重要的知识点