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

代码很简单

js

html

 
 
 
 
 
 
 
 
 
 
 

 

 
 

 
 
00:00/33:44
 

 
 
 
 
 

css

@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//images/html5_video.jpg") 0 0
 no-repeat;
}

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

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

.html5_video_pause_btn:hover {
 background: url("http://localhost//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//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//images/html5_video.jpg")
 no-repeat scroll -79px -170px rgba(0, 0, 0, 0);
}

.html5_video_mute {
 background: url("http://localhost//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//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: 21474837;
 background-color: #fff;
}

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