html5 自定义播放器核心代码


Posted in HTML / CSS onDecember 20, 2013

网页html

复制代码
代码如下:

<body style="background-color:#8EEE5EE;">
<section id="skin">
<video id="myMovie" width="640" height="360">
<source src="videos/Introduction.mp4">
</video>
<nav>
<div id="buttons">
<button type="button" id="playButton">Play</button>
</div>
<div id="defaultBar">
<div id="progressBar"></div>
</div>
<div style="clear:both"></div>
</nav>
</section>
</body>

css样式
复制代码
代码如下:

body{
text-align:center;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
#skin{
width:700px;
margin:10px auto;
padding:5px;
background:red;
border:4px solid black;
border-radius:20px;
}
nav{
margin:5px 0px;
}
#buttons{
float:left;
width:70px;
height:22px;
}
#defaultBar{
position:relative;
float:left;
width:600px;
height:14px;
padding:4px;
border:1px solid black;
background:yellow;
}
/*progressBar在defaultBar内部*/
#progressBar{
position:absolute;
width:0px; /*使用javascript控制变化*/
height:14px; /*和defaultBar高度相同*/
background:blue;
}

javascript代码
复制代码
代码如下:

function doFisrt()
{
barSize=600; //注意不要使用px单位,且不要用var,是全局变量
myMovie=document.getElementById('myMovie');
playButton=document.getElementById('playButton');
bar=document.getElementById('defaultBar');
progressBar=document.getElementById('progressBar');
playButton.addEventListener('click',playOrPause,false); //第三个参数总是false, Register the event handler for the bubbling phase.
bar.addEventListener('click',clickedBar,false);
}
//控制movie播放和停止
function playOrPause(){
if(!myMovie.paused && !myMovie.ended){
myMovie.pause();
playButton.innerHTML='Play';
window.clearInterval(updatedBar);
}else{
myMovie.play();
playButton.innerHTML='pause';
updatedBar=setInterval(update,500);
}
}
//控制进度条的动态显示
function update(){
if(!myMovie.ended){
var size=parseInt(myMovie.currentTime*barSize/myMovie.duration);
progressBar.style.width=size+'px';
}else{
progressBar.style.width='0px';
playButton.innerHTML='Play';
window.clearInterval(updatedBar);
}
}
//鼠标点击进度条控制方法
function clickedBar(e){
if(!myMovie.paused && !myMovie.ended){
var mouseX=e.pageX-bar.offsetLeft;
var newtime=mouseX*myMovie.duration/barSize; //new starting time
myMovie.currentTime=newtime;
progressBar.style.width=mouseX+'px';
window.clearInterval(updatedBar);
}
}
window.addEventListener('load',doFisrt,false);

好东西啊,摘了代码部分
HTML / CSS 相关文章推荐
css3 中实现炫酷的loading效果
Apr 26 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 #HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 #HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 #HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 #HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 #HTML / CSS
html5教程画矩形代码分享
Dec 04 #HTML / CSS
html5教程制作简单画板代码分享
Dec 04 #HTML / CSS
You might like
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
python连接MySQL数据库实例分析
2015/05/12 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
python实现学生管理系统
2018/01/11 Python
python进行TCP端口扫描的实现
2018/12/21 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
4s客服专员岗位职责
2013/12/01 职场文书
员工工作表扬信范文
2014/01/13 职场文书
打造完美自荐信
2014/01/24 职场文书
房屋产权证明书
2014/10/15 职场文书
2014年底工作总结
2014/12/15 职场文书
邀请书格式范文
2015/02/02 职场文书
本溪关门山导游词
2015/02/09 职场文书
2015年药店工作总结
2015/04/20 职场文书
机器人总动员观后感
2015/06/09 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android