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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 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 更新数据库中断的解决方法
2009/06/05 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
jquery 学习之二 属性(类)
2010/11/25 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
js实现简单扫雷
2020/11/27 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
pandas表连接 索引上的合并方法
2018/06/08 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
Python如何实现定时器功能
2020/05/28 Python
Python-split()函数实例用法讲解
2020/12/18 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
酒店经理职责
2014/01/30 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
财务务虚会发言材料
2014/10/20 职场文书
先进工作者事迹材料
2014/12/23 职场文书
质量保证书怎么写
2015/02/27 职场文书
中小学生安全教育观后感
2015/06/17 职场文书