Comments: HTML5 provides a new video tag. You can play video directly without programming. You only need to write a few lines of simple code to customize the html of the player webpage.
The Code is as follows:
<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 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;/* the same height as defaultBar */
Background: blue;
}
Javascript code
The Code is as follows:
Function doFisrt ()
{
BarSize = 600; // do not use the px Unit or var. It is a global variable.
MyMovie = document. getElementById ('mymovi ');
PlayButton = document. getElementById ('playclick ');
Bar = document. getElementById ('defaultbar ');
ProgressBar = document. getElementById ('ssssbar ');
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. innerHTML = 'play ';
Window. clearInterval (updatedBar );
} Else {
MyMovie. play ();
PlayButton. innerHTML = 'pause ';
UpdatedBar = setInterval (update, 500 );
}
}
// Control 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. innerHTML = 'play ';
Window. clearInterval (updatedBar );
}
}
// How to control the progress bar by clicking the mouse
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 );
Good stuff. I picked up the code.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
