javascript实现简单的html5视频播放器_javascript技巧

  

    
  
  

    

      

      

    
    

      

        

        

          

            

          
        
00:00/33:44
        

      
    
    

  
  

@CHARSET "UTF-8";

#wrap_html5_video {
  padding: 10px;
  width: 360px;
}

#vol_bar,#video_bar,#vol_value {
  height: 9px;
  background-color: #999999;
}

#vol_bar {
  width: 100px;
  cursor: pointer;
}

#vol_value {
  background-color: #179df7;
  width: 50%;
}

#html5_video {
  display: block;
  border: 1px solid #c0deed;
}

#video_buffer_bar {
  background-color: #179DF7;
  width: 0;
}

#video_progress_bar,#video_buffer_bar {
  position: absolute;
  height: 100%;
}

#video_progress_bar {
  background-color: #0066FF;
  width: 2px;
  left: 0;
}

.html5_video_pause_btn,.html5_video_play_btn {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.html5_video_play_btn {
  background: url("http://localhost/twitter/images/html5_video.jpg") 0 0
    no-repeat;
}

.html5_video_play_btn:hover {
  background: url("http://localhost/twitter/images/html5_video.jpg") -41px
    0 no-repeat;
}

.html5_video_pause_btn {
  background: url("http://localhost/twitter/images/html5_video.jpg") 0
    -42px no-repeat;
}

.html5_video_pause_btn:hover {
  background: url("http://localhost/twitter/images/html5_video.jpg") -41px
    -42px no-repeat;
}

#play_control a,#vol_bar {
  vertical-align: middle;
}

#html5_video_fullscreen {
  width: 25px;
  background: url("http://localhost/twitter/images/html5_video.jpg") 0
    -310px no-repeat;
  height: 18px;
}

#play_control #html5_video_time {
  font-size: 14px;
}

#play_control li,#play_control ul {
  font-size: 0;
}

#play_control li:last-child {
  position: absolute;
  right: 0;
}

.html5_video_mute1 {
  background: url("http://localhost/twitter/images/html5_video.jpg")
    no-repeat scroll -79px -170px rgba(0, 0, 0, 0);
}

.html5_video_mute {
  background: url("http://localhost/twitter/images/html5_video.jpg")
    no-repeat scroll 0 -170px rgba(0, 0, 0, 0);
}

#mute_icon {
  cursor: pointer;
  display: inline-block;
  height: 15px;
  width: 18px;
}

.html5_video_mute:hover {
  background: url("http://localhost/twitter/images/html5_video.jpg") -19px
    -170px no-repeat;
}

#play_control li {
  height: 40px;
  vertical-align: top;
  margin: 0 5px;
}

#play_control li:after {
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
  content: '';
}

#play_control,#video_bar,#vol_bar {
  position: relative;
}

body .fullscreen {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  z-index: 2147483647;
  background-color: #fff;
}

video::-webkit-media-controls {
  display: none !important;
}