HTML5实战与剖析之媒体元素(6、视频实例)
HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比較多。由于手机端基本上废除了flash的独断。让HTML5当家做主人,所以对视频支持的比較好。
所以今天专门为大家奉上HTML5视频标签模拟视频播放器的小样例,让大家更好的理解HTML5和有效的应用在项目中。
HTML代码
<!-- src中放上本地的ogv的音频 -->
<video id="v1" src="Intermission-Walk-in.ogv"></video>
<div id="div1">
<input type="button" value="播放" />
<input type="button" value="00:00:00" />
<input type="button" value="00:00:00" />
<input type="button" value="静音" />
<input type="button" value="全屏" />
</div>
<div id="div2">
<div id="div3"></div>
</div> <div id="div4">
<div id="div5"></div>
</div>
CSS代码
#div2{ width:300px; height:30px; background:#666666; position:relative;}
#div3{ width:30px; height:30px; background:red; position:absolute; left:0; top:0;}
#div4{ width:300px; height:20px; background:#666666; position:relative; top:10px;}
#div5{ width:20px; height:20px; background:yellow; position:absolute; right:0; top:0;}
JavaScript代码
window.onload = function(){
var oV = document.getElementById('v1');
var oDiv = document.getElementById('div1');
var aInput = oDiv.getElementsByTagName('input'); var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var oDiv4 = document.getElementById('div4');
var oDiv5 = document.getElementById('div5'); var timer = null; //播放暂停
aInput[0].onclick = function(){ if(oV.paused){
this.value = '暂停';
oV.play();
toShow();
timer = setInterval(toShow,1000);
}
else{
this.value = '播放';
oV.pause();
clearInterval(timer);
} }; aInput[2].value = timeChange(oV.duration); function timeChange(iAll){ iAll = Math.floor(iAll); var hours = toZero(parseInt(iAll/3600));
var mintus = toZero(parseInt(iAll%3600/60));
var sends = toZero(parseInt(iAll%60)); return hours + ":" + mintus + ":" + sends; } function toZero(num){
if(num<10){
return '0' + num;
}
else{
return '' + num;
}
} function toShow(){
aInput[1].value = timeChange(oV.currentTime); var scale = oV.currentTime/oV.duration; oDiv3.style.left = scale * (oDiv2.offsetWidth - oDiv3.offsetWidth) + 'px'; } //静音
aInput[3].onclick = function(){
if(oV.muted){
this.value = '静音';
oV.muted = false;
oDiv5.style.left = oV.volume*(oDiv4.offsetWidth - oDiv5.offsetWidth) + 'px';
}
else{
this.value = '消除静音';
oV.muted = true;
oDiv5.style.left = 0;
}
}; var disX = 0; //进度调整
oDiv3.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX - oDiv3.offsetLeft; document.onmousemove = function(ev){
var ev = ev || window.event; var L = ev.clientX - disX; if(L<0){
L = 0;
}
else if(L>oDiv2.offsetWidth - oDiv3.offsetWidth){
L = oDiv2.offsetWidth - oDiv3.offsetWidth;
} oDiv3.style.left = L + 'px'; var scale = L/(oDiv2.offsetWidth - oDiv3.offsetWidth); oV.currentTime = scale * oV.duration; toShow(); };
document.onmouseup = function(){ aInput[0].value = '暂停';
oV.play();
toShow();
timer = setInterval(toShow,1000); document.onmousemove = null;
document.onmouseup = null;
};
return false;
}; var disX2 = 0; //声音
oDiv5.onmousedown = function(ev){
var ev = ev || window.event;
disX2 = ev.clientX - oDiv5.offsetLeft; document.onmousemove = function(ev){
var ev = ev || window.event; var L = ev.clientX - disX2; if(L<0){
L = 0;
}
else if(L>oDiv4.offsetWidth - oDiv5.offsetWidth){
L = oDiv4.offsetWidth - oDiv5.offsetWidth;
} oDiv5.style.left = L + 'px'; var scale = L/(oDiv4.offsetWidth - oDiv5.offsetWidth); oV.volume = scale; };
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
}; //全屏
aInput[4].onclick = function(){ oV.webkitRequestFullScreen(); }; };
HTML5实战与剖析之媒体元素(5、视频实例)就为大家介绍到这里,模拟视频播放器的小样例差点儿把经常使用的小功能。
这个小样例只能在支持HTML5的视频标签的浏览器中播放。很多其它有关HTML5的相关知识尽在梦龙小站的HTML5实战与剖析部分,感谢大家的支持。
HTML5实战与剖析之媒体元素(6、视频实例)的更多相关文章
- HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)
HTML5中的媒体元素除了拥有非常多的属性之外,video标签和audio标签还能够出发非常多事件和方法. 这些方法监控着不同的属性的变化,这些变化有可能是媒体播放的结果,也可能是用户操作媒体的结果. ...
- HTML5实战与剖析之媒体元素
随着HTML5的到来,flash在手机端全部不能得到支持,这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了.很恰巧的是,移动端对HTML ...
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...
- (转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- HTML5实战与剖析之原生拖拽(一拖拽历史概述)
提起拖拽,我就想起了在JavaScript培训的时候一个非常好玩的效果,那就是拖拽了.可以用鼠标任意拖拽着一个物体到任何你想去的地方. 最早拥有JavaScript拖拽功能的是IE4浏览器.当时,网页 ...
- HTML5实战与剖析之跨文档消息传递(iframe传递信息)
在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...
- HTML5实战与剖析之字符集属性(charset和defaultCharset)
HTML5对字符集属性也进行了更新,其中charset和defaultCharset属性就是HTML5中新添加的字符集属性.有关charset和defaultCharset属性的具体讲解尽在HTML5 ...
- HTML5中支持新的媒体元素有这些
HTML5对媒体的支持性很强,支持以下媒体元素: · audio 定义音频 · video 定义视频 · embed 作为外部应用的容器 · source 多种媒体源的支持 · track ...
随机推荐
- 通过OpenGL ES在iOS平台实践增强现实(一)
http://ios.9tech.cn/news/2013/1108/38495.html 1.本文采用OpenGL ES 1固定渲染管线实现,目标为在设备拍摄到的现实世界中,绘制世界坐标轴,并根据设 ...
- VS2013的Release模式 和 debug 模式
在有的情况下,我们可能不能直接利用Debug模式进行程序调试,那么如何在Release模式下进行程序调试呢? 一.将项目属性设置为Release,生成--->配置管理器: 二.按Alt+F7,弹 ...
- MFC中CTime获取日期时间的方法
MFC中CTime类的功能非常强大,可以获取年.月.日.小时.分钟.秒.星期等等,最最重要的是可根据需要去格式化.下面是具体的使用方式: ① 定义一个CTime类对象 CTime time; ② 得到 ...
- ZOJ3874 Permutation Graph(NTT&&cdq分治)
最近在看几道整体二分还有cdq分治的东西,突然间想起前几个礼拜的ZOJ题,然后看了一下代码,经过了一些深思熟虑之后,发现自己终于看懂了,下面就用别人的代码来剖析一下整个解题的思路吧,具体的内容我再看看 ...
- hdu 5067(暴力搜索)
Harry And Dig Machine Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- laravel 安装碰到的问题:全局安装 Laravel Installer,然后用下面的指令创建新项目: laravel new blog报连接超时解决方案
在执行laravel new project 的时候报错 cURL error 7: Failed to connect to cabinet.laravel.com port 80: Timed o ...
- (7)oracle数据类型
字符型 char 定长 最大2000字符 例如 char(20) 表示定长20 不够的补空格 定长查询速度快 varchar2 变长 最大4000字符 省空间 clob 字符型大对象 最大 ...
- quailty's Contest #1 道路修建 EXT(启发式合并)
题目链接 道路修建 EXT 考虑并查集的启发式合并,合并的时候小的子树的根成为大的子树的根的儿子. 可以证明这样整棵树的深度不会超过$logn$. 两个根合并的时候,产生的新的边的边权为当前的时间. ...
- Wannafly挑战赛10 D 小H的询问(线段树)
题目链接 Problem D 这个题类似 SPOJ GSS3 做过那个题之后其实就可以秒掉这题了. 考虑当前线段树维护的结点 在那道题的基础上,这个题要多维护几个东西,大概就是左端点的奇偶性,右端点 ...
- luogu P1195 口袋的天空
题目背景 小杉坐在教室里,透过口袋一样的窗户看口袋一样的天空. 有很多云飘在那里,看起来很漂亮,小杉想摘下那样美的几朵云,做成棉花糖. 题目描述 给你云朵的个数N,再给你M个关系,表示哪些云朵可以连在 ...