html5 自定义播放器核心代码

前端技术 2023/09/02 HTML
网页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);


好东西啊，摘了代码部分

本文地址：https://www.stayed.cn/item/3637

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案