Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how to write the core code of the html5 custom player. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Web page html

The code is as follows:

Play

Css style

The code is as follows:

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 is inside defaultBar * /

# progressBar {

Position:absolute

Width:0px; / * use javascript to control changes * /

Height:14px; / * is the same height as defaultBar * /

Background:blue

}

Javascript code

The code is as follows:

Function doFisrt ()

{

BarSize=600; / / be careful not to use px units, and do not use var, which is a global variable

MyMovie=document.getElementById ('myMovie')

PlayButton=document.getElementById ('playButton')

Bar=document.getElementById ('defaultBar')

ProgressBar=document.getElementById ('progressBar')

PlayButton.addEventListener ('click',playOrPause,false); / / the third parameter is always false, Register the event handler for the bubbling phase.

Bar.addEventListener ('click',clickedBar,false)

}

/ / Control movie playback and stop

Function playOrPause () {

If (! myMovie.paused & &! myMovie.ended) {

MyMovie.pause ()

PlayButton [XSS _ clean] = 'Play'

Window.clearInterval (updatedBar)

} else {

MyMovie.play ()

PlayButton [XSS _ clean] = 'pause'

UpdatedBar=setInterval (update,500)

}

}

/ / controls the dynamic display of the progress bar

Function update () {

If (! myMovie.ended) {

Var size=parseInt (myMovie.currentTime*barSize/myMovie.duration)

ProgressBar.style.width=size+'px'

} else {

ProgressBar.style.width='0px'

PlayButton [XSS _ clean] = 'Play'

Window.clearInterval (updatedBar)

}

}

/ / Control method of mouse click progress bar

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)

After reading the above, do you have any further understanding of how to write the core code of the html5 custom player? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.