├── .gitattributes ├── README.md ├── css └── main.css ├── index.html ├── js └── main.js ├── test.html └── videos ├── other1.mp4 ├── other2.mp4 └── other3.mp4 /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML5-VideoPlayer 2 | HTML5视频播放器，目标是高仿网易云课堂的视频播放效果 3 | 使用说明: 4 | 1.videos文件夹下的三段视频都是一样的视频，只是名字不同罢了。因本人找不到三段内容相同的分别为超清、 5 | 高清、标清的视频，所以只能用这三个内容和分辨率完全相同的视频来模仿三种不同分辨率视频之间的切换 6 | 了。 7 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Master-Gao/HTML5-VideoPlayer/73b7a04dc795f95e7b70cf30514c05c32cbc71c3/css/main.css -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 网络教育学院 11 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | 对不起，您的浏览器不支持HTML5 22 | 25 |
26 | 27 |
28 | 29 | 32 | 33 |
34 | || 35 |
36 | 37 |
38 | 00:00 39 | / 40 | 00:00 41 |
42 | 43 |
44 | X 45 |
46 | 47 |
48 |
字幕
49 | 57 |
58 | 59 |
60 |
超清
61 | 72 |
73 | 74 |
75 |
1X
76 | 87 |
88 | 89 |
90 | 91 |
↑
92 | 93 | 98 |
99 | 100 |
101 | 102 |
103 |
104 | 105 |
106 |
107 |
108 |
109 |
110 | 355 | 356 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Master-Gao/HTML5-VideoPlayer/73b7a04dc795f95e7b70cf30514c05c32cbc71c3/js/main.js -------------------------------------------------------------------------------- /test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | HTML5 MediaElement 5 | 6 | 7 | 144 | 145 | 146 | 147 | 150 | 151 | 168 |
169 | 175 |
176 | 177 | -------------------------------------------------------------------------------- /videos/other1.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Master-Gao/HTML5-VideoPlayer/73b7a04dc795f95e7b70cf30514c05c32cbc71c3/videos/other1.mp4 -------------------------------------------------------------------------------- /videos/other2.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Master-Gao/HTML5-VideoPlayer/73b7a04dc795f95e7b70cf30514c05c32cbc71c3/videos/other2.mp4 -------------------------------------------------------------------------------- /videos/other3.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Master-Gao/HTML5-VideoPlayer/73b7a04dc795f95e7b70cf30514c05c32cbc71c3/videos/other3.mp4 --------------------------------------------------------------------------------