Use the player playback button implemented by CSS3, css3player

Use the player playback button implemented by CSS3, css3player

The result is as follows:

 

View results and download

 

Step 1: first understand the principle of border:

 

 

Step 2: HTML code structure

 

Html code

1. <Section class = "playContainer">
2. <Li class = "playBtn">
3. <A href = "#" title = "start"> Start </a>
4. </Li>
5. <Li class = "pauseBtn">
6. <A href = "#" title = "pause"> Pause </a>
7. </Li>
8. <Li class = "stopBtn">
9. <A href = "#" title = "stop"> Stop </a>
10. </Li>
11. <Li class = "forwardBtn playBtn">
12. <A href = "#" title = "forward"> Forward </a>
13. <A href = "#" title = "forward"> Forward </a>
14. </Li>
15. <Li class = "rewindBtn">
16. <A href = "#" title = "rewind"> Rewind </a>
17. <A href = "#" title = "rewind"> Rewind </a>
18. </Li>
19. <Li class = "ejectBtn">
20. <A href = "#" class = "arrow"> Eject </a>
21. <A href = "#" class = "dash"> Eject </a>
22. </Li>
23. </Section>

 

 

Step 3: Draw the background circle, position: relative

 

 

Css code

1. . PlayContainer li {position: relative; float: left; border: 25px solid #404040; color: #404040; height: 0; width: 0;-webkit-border-radius: 100%; -moz-border-radius: 100%;-o-border-radius: 100%; border-radius: 100%; margin: 0 20px ;}

 

 

 

 

Step 4: Draw the stop button to center the button.

 

The button is absolutely positioned relative to the outer circle, starting from the center of the circle, so you need to adjust the top and left values.

 

The end length of the stop button is 14px. the start point must be up, shifted to the left seven pixels, and centered.

 

All CSS files are as follows:

 

 

Css code

1. . PlayContainer {position: relative; float: left; background: rgba (0, 0, 0, 0.8); padding: 20px ;}
2. . PlayContainer li {position: relative; float: left; border: 25px solid #404040; color: #404040; height: 0; width: 0;-webkit-border-radius: 100%; -moz-border-radius: 100%;-o-border-radius: 100%; border-radius: 100%; margin: 0 20px ;}
3. . PlayContainer a {border-style: solid; text-indent:-9999px; position: absolute; top:-8px; left:-3px ;}
5. . PlayBtn a {border-color: transparent # fff; border-width: 8px 0 8px 12px; width: 0; height: 0 ;}
6. . PauseBtn a {border-color: transparent white; border-width: 0 6px; height: 15px; width: 6px; left:-9px ;}
7. . StopBtn a {border: 7px solid # fff; height: 0; width: 0; left:-7px; top:-7px ;}
8. . ForwardBtn a {border-left-width: 8px; left: 1px ;}
9. . ForwardBtn a: first-child {margin-left:-7px ;}
11. . RewindBtn a {border-width: 8px 8px 8px 0; border-color: transparent # fff transparent; width: 0; height: 0 ;}
12. . RewindBtn a: first-child {margin-left:-7px ;}
14. . EjectBtn a. arrow {border-width: 0 8px 8px 8px; border-color: transparent # fff transparent; top:-26px; left:-8px ;}
15. EctBtn a. dash {border-width: 0 0 4px; border-color: transparent # fff; height: 0; width: 16px; left:-8px; top: 4px ;}

 

For example, how can I use MediaPlayer to play the next video on the android music player?

Does listview use this setOnItemClickListener to listen? OnItemClickListener () is used to obtain information.
Public void onItemClick (AdapterView <?> Arg0, View arg1, int arg2,
Long arg3) to get your position. Arg2 is the position you want.

MediaPlayer is used in android. When the music is playing now, how does one play the music from the beginning by clicking the button?

You can use the seekTo () method when playing the video,
Int position = 0;
MediaPlayer. seekTo (position );