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 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 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中的超全局变量
2006/10/09 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python按时间排序目录下的文件实现方法
2018/10/17 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
python实现超级玛丽游戏
2020/03/18 Python
django ORM之values和annotate使用详解
2020/05/19 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
拔河比赛口号
2014/06/10 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS