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 ...
随机推荐
- com.android.build.api.transform.TransformException: java.util.zip.ZipException: duplicate entry: android/support/annotation/ColorRes.class
保存信息如上: 我在添加一个支持库的时候遇的问题,这个库com.yanzhenjie:album:1.0.5 这是由于v4包重复导致的,在网上我也找过多种解决方案 用了这种,方式 configur ...
- 安装戴尔OMSA
设置变量versionum=`cat /etc/redhat-release | awk '{print $3}' | awk -F '.' '{print $1}'`versionname=`cat ...
- 使用EventHandler传递参数
1.MouseEventHandler和EventHandler传递参数的局限性分析 开发过程中,特别是使用自定义控件时,常常需要对一个控件的click,mouseDown,mouseUp等事件的处理 ...
- J.U.C并发框架源码阅读(十七)ReentrantReadWriteLock
基于版本jdk1.7.0_80 java.util.concurrent.locks.ReentrantReadWriteLock 代码如下 /* * ORACLE PROPRIETARY/CONFI ...
- R 语言词云wordcloud
来源:http://blog.chinaunix.net/uid-25135004-id-4311592.html wordcloud函数--用于绘制词云图 用法: wordcloud(words,f ...
- servlet之request
1. request的setAttribute与getAttribute方法一般都是成对出现的,首先通过setAttribute方法设置属性与属性值,然后通过getAttribute方法根据属性获取到 ...
- Python的程序结构[2] -> 类/Class[6] -> 内建类 map
内建类map / Built-in Type map 关于内建类 map 是一个内建的类,能够返回一个 map 的 obj.map 的第一个参数为一个可执行函数,后续参数均为可迭代对象,map 会分别 ...
- SOAP、SOCKET协议
一.SOAP( SOAP:Simple Object Access Protocol) 简单对象访问协议,简单对象访问协议(SOAP)是一种轻量的.简单的.基于 XML 的协议,它被设计成在 WEB ...
- luogu P3834 【模板】可持久化线段树 1(主席树)
题解真的是越写越懒 // luogu-judger-enable-o2 #include<cstdio> #include<algorithm> using std::sort ...
- bzoj 5346: tree (其实是是某次雅礼集训的题)
用prufer序列的公式直接dp,O(n^4)的算法简简单单就写出来了23333. 按理说 O(n^4)是需要优化成O(n^3)才能过的,然鹅我也不知道我怎么过了23333 (那就懒得优化了hhhhh ...