HTML简单视频播放器,超简单的html5视频播放器

1 @CHARSET "UTF-8";2

3 #wrap_html5_video{

4 padding:10px;

5 width:360px;

6 }

7

8 #vol_bar,#video_bar,#vol_value{

9 height:9px;

10 background-color:#999999;

11 }

12

13 #vol_bar{

14 width:100px;

15 cursor:pointer;

16 }

17

18 #vol_value{

19 background-color:#179df7;

20 width:50%;

21 }

22

23 #html5_video{

24 display:block;

25 border:1px solid #c0deed;

26 }

27

28 #video_buffer_bar{

29 background-color:#179DF7;

30 width:0;

31 }

32

33 #video_progress_bar,#video_buffer_bar{

34 position:absolute;

35 height:100%;

36 }

37

38 #video_progress_bar{

39 background-color:#0066FF;

40 width:2px;

41 left:0;

42 }

43

44 .html5_video_pause_btn,.html5_video_play_btn{

45 width:40px;

46 height:40px;

47 cursor:pointer;

48 }

49

50 .html5_video_play_btn{

51 background:url("http://localhost/twitter/images/html5_video.jpg") 0 052 no-repeat;

53 }

54

55 .html5_video_play_btn:hover{

56 background:url("http://localhost/twitter/images/html5_video.jpg") -41px57 0 no-repeat;

58 }

59

60 .html5_video_pause_btn{

61 background:url("http://localhost/twitter/images/html5_video.jpg") 062 -42px no-repeat;

63 }

64

65 .html5_video_pause_btn:hover{

66 background:url("http://localhost/twitter/images/html5_video.jpg") -41px67 -42px no-repeat;

68 }

69

70 #play_control a,#vol_bar{

71 vertical-align:middle;

72 }

73

74 #html5_video_fullscreen{

75 width:25px;

76 background:url("http://localhost/twitter/images/html5_video.jpg") 077 -310px no-repeat;

78 height:18px;

79 }

80

81 #play_control #html5_video_time{

82 font-size:14px;

83 }

84

85 #play_control li,#play_control ul{

86 font-size:0;

87 }

88

89 #play_control li:last-child{

90 position:absolute;

91 right:0;

92 }

93

94 .html5_video_mute1{

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

97 }

98

99 .html5_video_mute{

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

102 }

103

104 #mute_icon{

105 cursor:pointer;

106 display:inline-block;

107 height:15px;

108 width:18px;

109 }

110

111 .html5_video_mute:hover{

112 background:url("http://localhost/twitter/images/html5_video.jpg") -19px113 -170px no-repeat;

114 }

115

116 #play_control li{

117 height:40px;

118 vertical-align:top;

119 margin:0 5px;

120 }

121

122 #play_control li:after{

123 display:inline-block;

124 width:0;

125 height:100%;

126 vertical-align:middle;

127 content:‘‘;

128 }

129

130 #play_control,#video_bar,#vol_bar{

131 position:relative;

132 }

133

134 body .fullscreen{

135 position:fixed;

136 left:0;

137 bottom:0;

138 width:100%;

139 overflow:hidden;

140 z-index:2147483647;

141 background-color:#fff;

142 }

143

144 video::-webkit-media-controls{

145 display:none !important;

146 }