Heim > Web-Frontend > H5-Tutorial > Hauptteil

Kerncode des benutzerdefinierten HTML5-Players_HTML5-Tutorialfähigkeiten

WBOY
Freigeben: 2016-05-16 15:48:31
Original
1611 Leute haben es durchsucht

网页html

复制代码
代码如下:








css样式

复制代码
代码如下:

body{
text-align:center;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
#skin{
width:700px;
Rand: 10 Pixel automatisch;
padding:5px;
Hintergrund:rot;
Rahmen:4px einfarbig schwarz;
Grenzradius:20px;
}
nav{
margin:5px 0px;
}
#buttons{
float:left;
Breite:70px;
Höhe:22px;
}
#defaultBar{
position:relative;
float:left;
Breite:600px;
Höhe:14px;
padding:4px;
Rahmen:1px einfarbig schwarz;
Hintergrund:gelb;
}
/*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, Registrieren Sie den Ereignishandler für die 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; //neue Startzeit
myMovie.currentTime=newtime;
progressBar.style.width=mouseX 'px';
window.clearInterval(updatedBar);
}
}
window.addEventListener('load',doFisrt,false);

好东西啊,摘了代码部分
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!