├── README.md ├── dev ├── css │ └── style-index.css ├── html │ ├── index.html │ └── list.html ├── img │ ├── bg.jpg │ ├── c.gif │ ├── controls-bg.png │ ├── cover │ │ ├── 1987.jpg │ │ ├── fk.jpg │ │ ├── ku.jpg │ │ ├── lost.jpg │ │ ├── nzfnsm.jpg │ │ ├── qwdfj.jpg │ │ ├── sky.jpg │ │ ├── sxdsx.jpg │ │ ├── up.jpg │ │ ├── whxn.jpg │ │ ├── yc.jpg │ │ └── young.jpg │ ├── dancer.png │ ├── darkcurtain.jpg │ ├── frontcurtain.jpg │ ├── full.png │ ├── handle.png │ ├── loop.png │ ├── play.png │ ├── play_hover.png │ ├── rope.png │ ├── slider-arrows.png │ ├── start.png │ ├── video_next.png │ ├── video_prev.png │ └── volume.png ├── js │ ├── jquery-1.8.1.js │ ├── template.js │ ├── video-play.js │ └── video-ui.js └── media │ ├── 1987.jpg │ ├── fk.jpg │ ├── ku.jpg │ ├── lost.jpg │ ├── nzfnsm.jpg │ ├── qwdfj.jpg │ ├── sky.jpg │ ├── sxdsx.jpg │ ├── up.jpg │ ├── whxn.jpg │ ├── xfed.jpg │ ├── yc.jpg │ └── young.jpg ├── index.php └── src ├── css ├── common.less ├── list.less ├── mod-animated.less ├── mod-layout.less └── style-index.less ├── html ├── index.html └── list.html ├── img ├── bg.jpg ├── c.gif ├── controls-bg.png ├── cover │ ├── 1987.jpg │ ├── fk.jpg │ ├── ku.jpg │ ├── lost.jpg │ ├── nzfnsm.jpg │ ├── qwdfj.jpg │ ├── sky.jpg │ ├── sxdsx.jpg │ ├── up.jpg │ ├── whxn.jpg │ ├── yc.jpg │ └── young.jpg ├── dancer.png ├── darkcurtain.jpg ├── frontcurtain.jpg ├── full.png ├── handle.png ├── loop.png ├── play.png ├── play_hover.png ├── rope.png ├── slider-arrows.png ├── start.png ├── video_next.png ├── video_prev.png └── volume.png ├── js ├── jquery-1.8.1.js ├── template.js ├── video-play.js └── video-ui.js └── media ├── 1987.jpg ├── fk.jpg ├── ku.jpg ├── lost.jpg ├── nzfnsm.jpg ├── qwdfj.jpg ├── sky.jpg ├── sxdsx.jpg ├── up.jpg ├── whxn.jpg ├── xfed.jpg ├── yc.jpg └── young.jpg /README.md: -------------------------------------------------------------------------------- 1 | HTML5-MV show 2 | ========== 3 | 4 | ##demo地址：[轩枫阁-MV show](http://www.xuanfengge.com/funny/html5/video/) 5 | 6 | 7 | ------------------ 8 | ###2016.08更新 9 | 10 | - 更改写法，代码更加优雅 11 | - 播放器功能与UI交互分离 12 | - 更新视频 13 | - 构建工具基于[Weflow](https://weflow.io/) 14 | 15 | 16 | ###主要功能 17 | 18 | - 视频播放基本功能 19 | - 播放 20 | - 暂停 21 | - 调整声音 22 | - 点击进度播放 23 | - 缓冲loading提示 24 | - 预加载进度条提示 25 | - 关灯效果 26 | - 设置循环播放 27 | - 全屏播放 28 | - 播放完时可左右切换视频 29 | - 开幕/闭幕效果 30 | - 播放进度显示 31 | - 视频截图 32 | 33 | ####本地如何预览效果 34 | - 需要基于php的服务器 35 | - 视频数据部分填充在list.php中（包括视频静态截图、视频标题、视频作者等） 36 | - 将视频与视频截图已字母命名放在media（新建）文件夹里边 37 | - chrome支持mp4格式的 38 | 39 | 40 | ####制作过程 41 | - 基于HTML5的video API 42 | - 基于CSS3的全新的UI制作 43 | - 自行设计的动态视频列表 44 | - 利用canvas进行视频截图 45 | - 竖状音量控制条 46 | -------------------------------------------------------------------------------- /dev/css/style-index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | img { 7 | border: none; 8 | } 9 | 10 | .ui-d-n { 11 | display: none; 12 | } 13 | 14 | .ui-po-r { 15 | position: relative; 16 | } 17 | 18 | .ui-po-a { 19 | position: absolute; 20 | } 21 | 22 | .flex-center { 23 | -webkit-box-pack: center; 24 | -ms-flex-pack: center; 25 | -webkit-justify-content: center; 26 | justify-content: center; 27 | -webkit-box-align: center; 28 | -ms-flex-align: center; 29 | -webkit-align-items: center; 30 | align-items: center; 31 | } 32 | 33 | .transfrom-center { 34 | position: absolute; 35 | top: 50%; 36 | left: 50%; 37 | -webkit-transform: translate(-50%, -50%); 38 | transform: translate(-50%, -50%); 39 | } 40 | 41 | /*video container*/ 42 | 43 | .videoContainer { 44 | width: 960px; 45 | height: 540px; 46 | margin: 0px auto; 47 | position: relative; 48 | background: #000; 49 | color: #ccc; 50 | z-index: 12000; 51 | } 52 | 53 | .videoContainer:hover .control { 54 | bottom: 0px; 55 | } 56 | 57 | .videoContainer:hover .caption { 58 | top: 0; 59 | } 60 | 61 | .mod-play .start { 62 | display: none!important; 63 | } 64 | 65 | .mod-play .video_nav { 66 | display: none!important; 67 | } 68 | 69 | .mod-play .caption { 70 | top: -45px; 71 | } 72 | 73 | .mod-play .control div.btnPlay { 74 | background-position: 20px -40px; 75 | } 76 | 77 | .mod-pause .start { 78 | display: block; 79 | } 80 | 81 | .mod-pause .video_nav { 82 | display: block; 83 | } 84 | 85 | .mod-pause .caption { 86 | top: 0; 87 | } 88 | 89 | /*video caption css*/ 90 | 91 | .caption { 92 | position: absolute; 93 | top: -45px; 94 | left: 0; 95 | width: 100%; 96 | padding: 10px 0; 97 | color: #ccc; 98 | font-size: 20px; 99 | font-family: 'Microsoft Yahei', monospace; 100 | text-align: center; 101 | background-color: rgba(255, 255, 255, 0.08); 102 | -webkit-transition: all 0.2s ease; 103 | -moz-transition: all 0.2s ease; 104 | -o-transition: all 0.2s ease; 105 | transition: all 0.2s ease; 106 | } 107 | 108 | /*VIDEO CONTROLS CSS*/ 109 | 110 | /*control holder*/ 111 | 112 | .control { 113 | background: rgba(0, 0, 0, 0.4); 114 | color: #ccc; 115 | position: absolute; 116 | bottom: -44px; 117 | left: 0; 118 | width: 100%; 119 | z-index: 5; 120 | -webkit-transition: all 0.3s ease; 121 | -moz-transition: all 0.3s ease; 122 | -o-transition: all 0.3s ease; 123 | transition: all 0.3s ease; 124 | } 125 | 126 | /*control top part*/ 127 | 128 | .topControl { 129 | height: 11px; 130 | border-bottom: 1px solid #404040; 131 | } 132 | 133 | /*control bottom part*/ 134 | 135 | .btmControl { 136 | clear: both; 137 | height: 42px; 138 | } 139 | 140 | .control div.btn { 141 | float: left; 142 | width: 60px; 143 | height: 40px; 144 | border-right: solid 1px #161615; 145 | border-left: solid 1px #2a2b2a; 146 | cursor: pointer; 147 | } 148 | 149 | .control div.btnPlay { 150 | width: 40px; 151 | padding: 0 20px; 152 | background-image: url(../img/start.png); 153 | background-repeat: no-repeat; 154 | background-position: top center; 155 | } 156 | 157 | .control div.btnStop { 158 | background: url(../img/control.png) no-repeat 0 -60px; 159 | } 160 | 161 | .btnSound { 162 | position: relative; 163 | cursor: pointer; 164 | width: 60px; 165 | height: 40px; 166 | float: left; 167 | margin: 0px; 168 | } 169 | 170 | .btnSound:hover .volume { 171 | display: block; 172 | } 173 | 174 | .control div.sound { 175 | background: url(../img/volume.png) no-repeat 0px -120px; 176 | border-left: solid 1px #686262; 177 | float: right; 178 | } 179 | 180 | .control div.sound1 { 181 | background: url(../img/volume.png) no-repeat 0px -80px !important; 182 | } 183 | 184 | .control div.sound2 { 185 | background: url(../img/volume.png) no-repeat 0px -40px !important; 186 | } 187 | 188 | .control div.sound3 { 189 | background: url(../img/volume.png) no-repeat 0px 0px !important; 190 | } 191 | 192 | .control div.muted { 193 | background: url(../img/volume.png) no-repeat 0px -120px !important; 194 | } 195 | 196 | .control div.btnFS { 197 | background: url(../img/full.png) no-repeat center center; 198 | float: right; 199 | } 200 | 201 | .control div.btnLight { 202 | float: right; 203 | position: relative; 204 | width: 40px; 205 | height: 20px; 206 | margin: 10px 9px; 207 | background: gray; 208 | border-radius: 4px; 209 | border: solid 1px #FFF; 210 | -webkit-transition: all 1s; 211 | transition: all 1s; 212 | } 213 | 214 | .light_btn { 215 | width: 20px; 216 | height: 18px; 217 | background: #FFF; 218 | border-radius: 4px; 219 | position: absolute; 220 | top: 1px; 221 | left: 1px; 222 | -webkit-transition: all 0.3s ease; 223 | transition: all 0.3s ease; 224 | } 225 | 226 | .control div.lighton { 227 | background: #3FB7FC; 228 | } 229 | 230 | .control div.lighton .light_btn { 231 | top: 1px; 232 | left: 19px; 233 | } 234 | 235 | .control div.btnLoop { 236 | float: right; 237 | width: 40px; 238 | background: url(../img/loop.png) 0 0; 239 | } 240 | 241 | .control div.btnLoop:hover { 242 | background: url(../img/loop.png) 0 -40px; 243 | } 244 | 245 | .control div.loopon { 246 | background: url(../img/loop.png) 0 -40px; 247 | } 248 | 249 | /*PROGESS BAR CSS*/ 250 | 251 | /*Progess bar*/ 252 | 253 | .progress { 254 | width: 100%; 255 | height: 10px; 256 | position: relative; 257 | float: left; 258 | cursor: pointer; 259 | background: rgba(255, 255, 255, 0.3); 260 | } 261 | 262 | .progress:hover .timeTip { 263 | display: block; 264 | } 265 | 266 | .progress span { 267 | height: 100%; 268 | position: absolute; 269 | top: 0; 270 | left: 0; 271 | display: block; 272 | } 273 | 274 | .timeBar { 275 | z-index: 10; 276 | width: 0; 277 | background: #82d344; 278 | background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%); 279 | background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%); 280 | background: -o-linear-gradient(top, #82d344 0%, #51af34 100%); 281 | background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%); 282 | background: linear-gradient(top, #82d344 0%, #51af34 100%); 283 | } 284 | 285 | .progress .timeHandle { 286 | position: absolute; 287 | cursor: pointer; 288 | width: 12px; 289 | height: 14px; 290 | top: -1px; 291 | z-index: 99; 292 | background: url(../img/handle.png); 293 | background-size: contain; 294 | } 295 | 296 | .progress .timeTip { 297 | display: none; 298 | position: absolute; 299 | top: -30px; 300 | left: 0; 301 | width: 40px; 302 | height: 18px; 303 | line-height: 18px; 304 | background: #FFF; 305 | font-family: Helvetica, Arial, sans-serif; 306 | font-size: 10px; 307 | font-weight: bold; 308 | color: #666; 309 | text-align: center; 310 | } 311 | 312 | .progress .timeTip:after { 313 | content: ""; 314 | width: 0px; 315 | height: 0px; 316 | margin: 10px auto; 317 | position: absolute; 318 | top: 8px; 319 | left: 12px; 320 | border-color: #FFF transparent transparent transparent; 321 | border-style: solid; 322 | border-width: 6px; 323 | } 324 | 325 | .bufferBar { 326 | z-index: 5; 327 | width: 0; 328 | background: rgba(36, 36, 44, 0.5); 329 | } 330 | 331 | /*time and duration*/ 332 | 333 | .time { 334 | float: left; 335 | width: 100px; 336 | font-family: "microsoft yahei"; 337 | text-align: center; 338 | font-size: 14px; 339 | line-height: 40px; 340 | border-left: solid 1px #686262; 341 | } 342 | 343 | /*VOLUME BAR CSS*/ 344 | 345 | /*volume bar*/ 346 | 347 | .volume { 348 | display: none; 349 | position: absolute; 350 | cursor: pointer; 351 | width: 20px; 352 | height: 100px; 353 | float: right; 354 | bottom: 50px; 355 | left: 15px; 356 | z-index: 21121000; 357 | background: rgba(39, 34, 34, 0.6); 358 | padding: 4px 0; 359 | } 360 | 361 | .volume:after { 362 | content: ""; 363 | width: 0; 364 | height: 0; 365 | border-color: rgba(39, 34, 34, 0.6) transparent transparent transparent; 366 | border-style: solid; 367 | border-width: 10px; 368 | position: absolute; 369 | top: 108px; 370 | left: 0px; 371 | } 372 | 373 | .volume_wrap { 374 | float: left; 375 | position: relative; 376 | height: 90%; 377 | width: 12px; 378 | margin: 4px; 379 | border-radius: 4px; 380 | background: rgba(0, 0, 0, 0.6); 381 | overflow: hidden; 382 | } 383 | 384 | .volume:hover { 385 | cursor: pointer; 386 | } 387 | 388 | .volumeBar { 389 | display: block; 390 | width: 12px; 391 | position: absolute; 392 | bottom: 0; 393 | left: 0; 394 | background: #3FB7FC; 395 | border-radius: 4px; 396 | z-index: 21121; 397 | cursor: pointer; 398 | } 399 | 400 | /*OTHER CSS*/ 401 | 402 | /*video screen cover*/ 403 | 404 | .start { 405 | position: absolute; 406 | width: 120px; 407 | height: 120px; 408 | border-radius: 50%; 409 | top: 50%; 410 | left: 50%; 411 | margin-left: -60px; 412 | margin-top: -100px; 413 | z-index: 10001; 414 | -webkit-transition: all 0.6s ease; 415 | -moz-transition: all 0.6s ease; 416 | -o-transition: all 0.6s ease; 417 | transition: all 0.6s ease; 418 | } 419 | 420 | /*.start:hover{ 421 | background-color: rgba(0,0,0,0.6); 422 | }*/ 423 | 424 | .init_start { 425 | position: relative; 426 | width: 100px; 427 | height: 100px; 428 | margin: 10px; 429 | background: url(../img/play.png) no-repeat; 430 | cursor: pointer; 431 | } 432 | 433 | .init_start:hover { 434 | background: url(../img/play_hover.png) no-repeat; 435 | } 436 | 437 | .loading { 438 | position: absolute; 439 | width: 70px; 440 | height: 70px; 441 | top: 50%; 442 | left: 50%; 443 | margin-left: -50px; 444 | margin-top: -90px; 445 | padding: 15px; 446 | background: rgba(0, 0, 0, 0.4); 447 | border-radius: 50%; 448 | z-index: 2; 449 | } 450 | 451 | .loading .dot { 452 | position: absolute; 453 | opacity: 0; 454 | width: 64px; 455 | height: 64px; 456 | margin: 3px; 457 | -webkit-transform: rotate(225deg); 458 | -moz-transform: rotate(225deg); 459 | -o-transform: rotate(225deg); 460 | -ms-transform: rotate(225deg); 461 | transform: rotate(225deg); 462 | -webkit-animation-name: loading; 463 | -moz-animation-name: loading; 464 | -ms-animation-name: loading; 465 | -o-animation-name: loading; 466 | animation-name: loading; 467 | -webkit-animation-iteration-count: infinite; 468 | -moz-animation-iteration-count: infinite; 469 | -ms-animation-iteration-count: infinite; 470 | -o-animation-iteration-count: infinite; 471 | animation-iteration-count: infinite; 472 | -o-animation-duration: 5.28s; 473 | -moz-animation-duration: 5.28s; 474 | -webkit-animation-duration: 5.28s; 475 | animation-duration: 5.28s; 476 | } 477 | 478 | .loading .dot:after { 479 | content: ""; 480 | position: absolute; 481 | width: 6px; 482 | height: 6px; 483 | border-radius: 50%; 484 | background: #FFF; 485 | } 486 | 487 | .loading .dot:nth-child(2) { 488 | -webkit-animation-delay: .23s; 489 | -moz-animation-delay: .23s; 490 | -ms-animation-delay: .23s; 491 | -o-animation-delay: .23s; 492 | animation-delay: .23s; 493 | } 494 | 495 | .loading .dot:nth-child(3) { 496 | -webkit-animation-delay: .46s; 497 | -moz-animation-delay: .46s; 498 | -ms-animation-delay: .46s; 499 | -o-animation-delay: .46s; 500 | animation-delay: .46s; 501 | } 502 | 503 | .loading .dot:nth-child(4) { 504 | -webkit-animation-delay: .69s; 505 | -moz-animation-delay: .69s; 506 | -ms-animation-delay: .69s; 507 | -o-animation-delay: .69s; 508 | animation-delay: .69s; 509 | } 510 | 511 | .loading .dot:nth-child(5) { 512 | -webkit-animation-delay: .92s; 513 | -moz-animation-delay: .92s; 514 | -ms-animation-delay: .92s; 515 | -o-animation-delay: .92s; 516 | animation-delay: .92s; 517 | } 518 | 519 | @-webkit-keyframes loading { 520 | 0% { 521 | -webkit-transform: rotate(225deg); 522 | opacity: 1; 523 | -webkit-animation-timing-function: ease-out; 524 | } 525 | 526 | 8% { 527 | -webkit-transform: rotate(345deg); 528 | -webkit-animation-timing-function: linear; 529 | } 530 | 531 | 30% { 532 | -webkit-transform: rotate(455deg); 533 | -webkit-animation-timing-function: ease-in-out; 534 | } 535 | 536 | 40% { 537 | -webkit-transform: rotate(690deg); 538 | -webkit-animation-timing-function: linear; 539 | } 540 | 541 | 60% { 542 | -webkit-transform: rotate(815deg); 543 | opacity: 1; 544 | -webkit-animation-timing-function: ease-out; 545 | } 546 | 547 | 75% { 548 | -webkit-transform: rotate(965deg); 549 | -webkit-animation-timing-function: ease-out; 550 | } 551 | 552 | 76% { 553 | opacity: 0; 554 | } 555 | 556 | 100% { 557 | opacity: 0; 558 | } 559 | } 560 | 561 | @-moz-keyframes loading { 562 | 0% { 563 | -moz-transform: rotate(225deg); 564 | opacity: 1; 565 | -moz-animation-timing-function: ease-out; 566 | } 567 | 568 | 8% { 569 | -moz-transform: rotate(345deg); 570 | -moz-animation-timing-function: linear; 571 | } 572 | 573 | 30% { 574 | -moz-transform: rotate(455deg); 575 | -moz-animation-timing-function: ease-in-out; 576 | } 577 | 578 | 40% { 579 | -moz-transform: rotate(690deg); 580 | -moz-animation-timing-function: linear; 581 | } 582 | 583 | 60% { 584 | -moz-transform: rotate(815deg); 585 | opacity: 1; 586 | -moz-animation-timing-function: ease-out; 587 | } 588 | 589 | 75% { 590 | -moz-transform: rotate(965deg); 591 | -moz-animation-timing-function: ease-out; 592 | } 593 | 594 | 76% { 595 | opacity: 0; 596 | } 597 | 598 | 100% { 599 | opacity: 0; 600 | } 601 | } 602 | 603 | @keyframes loading { 604 | 0% { 605 | transform: rotate(225deg); 606 | opacity: 1; 607 | animation-timing-function: ease-out; 608 | } 609 | 610 | 8% { 611 | transform: rotate(345deg); 612 | animation-timing-function: linear; 613 | } 614 | 615 | 30% { 616 | transform: rotate(455deg); 617 | animation-timing-function: ease-in-out; 618 | } 619 | 620 | 40% { 621 | transform: rotate(690deg); 622 | animation-timing-function: linear; 623 | } 624 | 625 | 60% { 626 | transform: rotate(815deg); 627 | opacity: 1; 628 | animation-timing-function: ease-out; 629 | } 630 | 631 | 75% { 632 | transform: rotate(965deg); 633 | animation-timing-function: ease-out; 634 | } 635 | 636 | 76% { 637 | opacity: 0; 638 | } 639 | 640 | 100% { 641 | opacity: 0; 642 | } 643 | } 644 | 645 | /*prev_next*/ 646 | 647 | .video_nav { 648 | position: absolute; 649 | top: 160px; 650 | width: 30px; 651 | height: 51px; 652 | margin: 50px 0; 653 | cursor: pointer; 654 | -webkit-transition: all 0.2s ease; 655 | -moz-transition: all 0.2s ease; 656 | -o-transition: all 0.2s ease; 657 | transition: all 0.2s ease; 658 | } 659 | 660 | .video_nav::after { 661 | content: ""; 662 | display: block; 663 | width: 2px; 664 | height: 2px; 665 | position: absolute; 666 | border-radius: 2px; 667 | top: 50%; 668 | left: 50%; 669 | margin: -1px 0 0 -1px; 670 | z-index: 2; 671 | background: #ffffff; 672 | box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5), 0 0 20px 10px rgba(255, 255, 255, 0.5), 0 0 30px 15px rgba(255, 255, 255, 0.4), 0 0 40px 20px rgba(255, 255, 255, 0.3), 0 0 50px 25px rgba(255, 255, 255, 0.3), 0 0 60px 30px rgba(255, 255, 255, 0.3), 0 0 70px 35px rgba(255, 255, 255, 0.3); 673 | } 674 | 675 | .video_nav:hover::after { 676 | opacity: 0; 677 | } 678 | 679 | .video_prev { 680 | left: 100px; 681 | background: url(../img/video_prev.png) no-repeat 0 0; 682 | } 683 | 684 | .video_next { 685 | right: 100px; 686 | background: url(../img/video_next.png) no-repeat 0 0; 687 | } 688 | 689 | .overlay { 690 | position: fixed; 691 | width: 100%; 692 | height: 100%; 693 | background: rgba(0, 0, 0, 0.8); 694 | top: 0; 695 | left: 0; 696 | z-index: 11119; 697 | display: none; 698 | } 699 | 700 | .mod-overlay .overlay { 701 | display: block; 702 | } 703 | 704 | .animated { 705 | -webkit-animation-duration: 1s; 706 | animation-duration: 1s; 707 | -webkit-animation-fill-mode: both; 708 | animation-fill-mode: both; 709 | } 710 | 711 | .animated.infinite { 712 | -webkit-animation-iteration-count: infinite; 713 | animation-iteration-count: infinite; 714 | } 715 | 716 | .short { 717 | -webkit-animation-duration: 0.6s; 718 | animation-duration: 0.6s; 719 | } 720 | 721 | .animated.hinge { 722 | -webkit-animation-duration: 2s; 723 | animation-duration: 2s; 724 | } 725 | 726 | @-webkit-keyframes fadeIn { 727 | from { 728 | opacity: 0; 729 | } 730 | 731 | to { 732 | opacity: 1; 733 | } 734 | } 735 | 736 | @keyframes fadeIn { 737 | from { 738 | opacity: 0; 739 | } 740 | 741 | to { 742 | opacity: 1; 743 | } 744 | } 745 | 746 | .fadeIn { 747 | -webkit-animation-name: fadeIn; 748 | animation-name: fadeIn; 749 | } 750 | 751 | @-webkit-keyframes fadeInDown { 752 | from { 753 | opacity: 0; 754 | -webkit-transform: translate3d(0, -100%, 0); 755 | transform: translate3d(0, -100%, 0); 756 | } 757 | 758 | to { 759 | opacity: 1; 760 | -webkit-transform: none; 761 | transform: none; 762 | } 763 | } 764 | 765 | @keyframes fadeInDown { 766 | from { 767 | opacity: 0; 768 | -webkit-transform: translate3d(0, -100%, 0); 769 | transform: translate3d(0, -100%, 0); 770 | } 771 | 772 | to { 773 | opacity: 1; 774 | -webkit-transform: none; 775 | transform: none; 776 | } 777 | } 778 | 779 | .fadeInDown { 780 | -webkit-animation-name: fadeInDown; 781 | animation-name: fadeInDown; 782 | } 783 | 784 | @-webkit-keyframes fadeInUp { 785 | from { 786 | opacity: 0; 787 | -webkit-transform: translate3d(0, 100%, 0); 788 | transform: translate3d(0, 100%, 0); 789 | } 790 | 791 | to { 792 | opacity: 1; 793 | -webkit-transform: none; 794 | transform: none; 795 | } 796 | } 797 | 798 | @keyframes fadeInUp { 799 | from { 800 | opacity: 0; 801 | -webkit-transform: translate3d(0, 100%, 0); 802 | transform: translate3d(0, 100%, 0); 803 | } 804 | 805 | to { 806 | opacity: 1; 807 | -webkit-transform: none; 808 | transform: none; 809 | } 810 | } 811 | 812 | .fadeInUp { 813 | -webkit-animation-name: fadeInUp; 814 | animation-name: fadeInUp; 815 | } 816 | 817 | @-webkit-keyframes fadeOut { 818 | from { 819 | opacity: 1; 820 | } 821 | 822 | to { 823 | opacity: 0; 824 | } 825 | } 826 | 827 | @keyframes fadeOut { 828 | from { 829 | opacity: 1; 830 | } 831 | 832 | to { 833 | opacity: 0; 834 | } 835 | } 836 | 837 | .fadeOut { 838 | -webkit-animation-name: fadeOut; 839 | animation-name: fadeOut; 840 | } 841 | 842 | @-webkit-keyframes fadeOutDown { 843 | from { 844 | opacity: 1; 845 | } 846 | 847 | to { 848 | opacity: 0; 849 | -webkit-transform: translate3d(0, 100%, 0); 850 | transform: translate3d(0, 100%, 0); 851 | } 852 | } 853 | 854 | @keyframes fadeOutDown { 855 | from { 856 | opacity: 1; 857 | } 858 | 859 | to { 860 | opacity: 0; 861 | -webkit-transform: translate3d(0, 100%, 0); 862 | transform: translate3d(0, 100%, 0); 863 | } 864 | } 865 | 866 | .fadeOutDown { 867 | -webkit-animation-name: fadeOutDown; 868 | animation-name: fadeOutDown; 869 | } 870 | 871 | @-webkit-keyframes fadeOutUp { 872 | from { 873 | opacity: 1; 874 | } 875 | 876 | to { 877 | opacity: 0; 878 | -webkit-transform: translate3d(0, -100%, 0); 879 | transform: translate3d(0, -100%, 0); 880 | } 881 | } 882 | 883 | @keyframes fadeOutUp { 884 | from { 885 | opacity: 1; 886 | } 887 | 888 | to { 889 | opacity: 0; 890 | -webkit-transform: translate3d(0, -100%, 0); 891 | transform: translate3d(0, -100%, 0); 892 | } 893 | } 894 | 895 | .fadeOutUp { 896 | -webkit-animation-name: fadeOutUp; 897 | animation-name: fadeOutUp; 898 | } 899 | 900 | @-webkit-keyframes zoomIn { 901 | from { 902 | opacity: 0; 903 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 904 | transform: scale3d(0.3, 0.3, 0.3); 905 | } 906 | 907 | 50% { 908 | opacity: 1; 909 | } 910 | } 911 | 912 | @keyframes zoomIn { 913 | from { 914 | opacity: 0; 915 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 916 | transform: scale3d(0.3, 0.3, 0.3); 917 | } 918 | 919 | 50% { 920 | opacity: 1; 921 | } 922 | } 923 | 924 | .zoomIn { 925 | -webkit-animation-name: zoomIn; 926 | animation-name: zoomIn; 927 | } 928 | 929 | @keyframes zoomOut { 930 | from { 931 | opacity: 1; 932 | } 933 | 934 | 50% { 935 | opacity: 0; 936 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 937 | transform: scale3d(0.3, 0.3, 0.3); 938 | } 939 | 940 | to { 941 | opacity: 0; 942 | } 943 | } 944 | 945 | .zoomOut { 946 | -webkit-animation-name: zoomOut; 947 | animation-name: zoomOut; 948 | } 949 | 950 | @-webkit-keyframes fadeInUpBig { 951 | from { 952 | opacity: 0; 953 | -webkit-transform: translate3d(0, 2000px, 0); 954 | transform: translate3d(0, 2000px, 0); 955 | } 956 | 957 | to { 958 | opacity: 1; 959 | -webkit-transform: none; 960 | transform: none; 961 | } 962 | } 963 | 964 | @keyframes fadeInUpBig { 965 | from { 966 | opacity: 0; 967 | -webkit-transform: translate3d(0, 2000px, 0); 968 | transform: translate3d(0, 2000px, 0); 969 | } 970 | 971 | to { 972 | opacity: 1; 973 | -webkit-transform: none; 974 | transform: none; 975 | } 976 | } 977 | 978 | .fadeInUpBig { 979 | -webkit-animation-name: fadeInUpBig; 980 | animation-name: fadeInUpBig; 981 | } 982 | 983 | body { 984 | background: #4f3722 url('../img/darkcurtain.jpg') repeat-x; 985 | overflow-x: hidden; 986 | } 987 | 988 | .header { 989 | position: relative; 990 | width: 400px; 991 | color: #FFF; 992 | margin: 320px auto 0; 993 | text-align: center; 994 | z-index: 11112; 995 | font-family: "微软雅黑", Arial, Helvetica; 996 | } 997 | 998 | .header span { 999 | font-size: 24px; 1000 | margin-bottom: 10px; 1001 | } 1002 | 1003 | .header img { 1004 | display: block; 1005 | width: 80px; 1006 | height: 150px; 1007 | margin: 55px auto auto auto; 1008 | } 1009 | 1010 | .footer { 1011 | display: none; 1012 | width: 100%; 1013 | margin: 40px auto; 1014 | clear: both; 1015 | font-size: 14px; 1016 | color: #979797; 1017 | text-align: center; 1018 | font-family: "微软雅黑"; 1019 | } 1020 | 1021 | .footer a { 1022 | color: #979797; 1023 | text-decoration: none; 1024 | } 1025 | 1026 | .curtain { 1027 | width: 50%; 1028 | height: 560px; 1029 | top: 0px; 1030 | position: absolute; 1031 | z-index: 11111; 1032 | -webkit-transition: all 2s ease; 1033 | -moz-transition: all 2s ease; 1034 | -o-transition: all 2s ease; 1035 | transition: all 2s ease; 1036 | } 1037 | 1038 | .curtain img { 1039 | width: 100%; 1040 | height: 100%; 1041 | } 1042 | 1043 | .leftcurtain { 1044 | left: 0px; 1045 | } 1046 | 1047 | .rightcurtain { 1048 | width: 51%; 1049 | right: 0px; 1050 | } 1051 | 1052 | .rope { 1053 | width: 118px; 1054 | height: 320px; 1055 | position: absolute; 1056 | top: -40px; 1057 | right: 200px; 1058 | z-index: 11111; 1059 | -webkit-transition: all 1s ease; 1060 | -moz-transition: all 1s ease; 1061 | -o-transition: all 1s ease; 1062 | transition: all 1s ease; 1063 | } 1064 | 1065 | .content { 1066 | display: none; 1067 | width: 100%; 1068 | height: auto; 1069 | margin: 0 auto; 1070 | } 1071 | 1072 | .mod-open .curtain { 1073 | width: 60px; 1074 | } 1075 | 1076 | .mod-open .rope { 1077 | right: 10px; 1078 | top: 0; 1079 | } 1080 | 1081 | .mod-open .header { 1082 | display: none; 1083 | } 1084 | 1085 | .mod-open .footer { 1086 | display: block; 1087 | } 1088 | 1089 | .mod-open .content { 1090 | display: block; 1091 | } 1092 | 1093 | .video_content { 1094 | width: 1000px; 1095 | height: 540px; 1096 | margin: 0 auto; 1097 | overflow: hidden; 1098 | } 1099 | 1100 | .video_list { 1101 | width: 100%; 1102 | height: 355px; 1103 | margin-top: 40px; 1104 | overflow: hidden; 1105 | } 1106 | 1107 | /*----------------scroll----------------------------*/ 1108 | 1109 | ::-webkit-scrollbar { 1110 | width: 10px; 1111 | height: 10px; 1112 | } 1113 | 1114 | ::-webkit-scrollbar-button:start:decrement, 1115 | ::-webkit-scrollbar-button:end:increment { 1116 | display: block; 1117 | } 1118 | 1119 | ::-webkit-scrollbar-button:vertical:start:increment, 1120 | ::-webkit-scrollbar-button:vertical:end:decrement { 1121 | display: none; 1122 | } 1123 | 1124 | ::-webkit-scrollbar-button:end:increment { 1125 | background-color: #F1F1EF; 1126 | } 1127 | 1128 | ::-webkit-scrollbar-button:start:decrement { 1129 | background-color: #F1F1EF; 1130 | } 1131 | 1132 | ::-webkit-scrollbar-track-piece:vertical:start { 1133 | background-color: #F1F1EF; 1134 | } 1135 | 1136 | ::-webkit-scrollbar-track-piece:vertical:end { 1137 | background-color: #F1F1EF; 1138 | } 1139 | 1140 | ::-webkit-scrollbar-thumb:vertical { 1141 | width: 6px; 1142 | margin: 0 auto; 1143 | border-radius: 4px; 1144 | background: rgba(0, 0, 0, 0.6); 1145 | border-width: 8 0 8 0; 1146 | } 1147 | 1148 | /*Webkit,Opera9.5+,Ie9+*/ 1149 | 1150 | ::selection { 1151 | background: #99CC00; 1152 | color: #FFF; 1153 | } 1154 | 1155 | /*Mozilla Firefox*/ 1156 | 1157 | ::-moz-selection { 1158 | background: #99CC00; 1159 | color: #FFF; 1160 | } 1161 | 1162 | .artist_l { 1163 | margin: 0 auto; 1164 | width: 960px; 1165 | position: relative; 1166 | height: 354px; 1167 | list-style: none; 1168 | } 1169 | 1170 | .artist_l li { 1171 | -webkit-box-pack: center; 1172 | -ms-flex-pack: center; 1173 | -webkit-justify-content: center; 1174 | justify-content: center; 1175 | -webkit-box-align: center; 1176 | -ms-flex-align: center; 1177 | -webkit-align-items: center; 1178 | align-items: center; 1179 | } 1180 | 1181 | .artist_l img { 1182 | width: 100%; 1183 | } 1184 | 1185 | .artist_l .a1 { 1186 | left: 0px; 1187 | position: absolute; 1188 | top: 0px; 1189 | width: 230px; 1190 | } 1191 | 1192 | .artist_l .a2 { 1193 | left: 240px; 1194 | overflow: hidden; 1195 | width: 110px; 1196 | position: absolute; 1197 | top: 0px; 1198 | height: 110px; 1199 | } 1200 | 1201 | .artist_l .a3 { 1202 | left: 240px; 1203 | overflow: hidden; 1204 | width: 110px; 1205 | position: absolute; 1206 | top: 0px; 1207 | height: 110px; 1208 | } 1209 | 1210 | .artist_l .a4 { 1211 | left: 240px; 1212 | overflow: hidden; 1213 | width: 110px; 1214 | position: absolute; 1215 | top: 0px; 1216 | height: 110px; 1217 | } 1218 | 1219 | .artist_l .a5 { 1220 | left: 240px; 1221 | overflow: hidden; 1222 | width: 110px; 1223 | position: absolute; 1224 | top: 0px; 1225 | height: 110px; 1226 | } 1227 | 1228 | .artist_l .a6 { 1229 | left: 240px; 1230 | overflow: hidden; 1231 | width: 110px; 1232 | position: absolute; 1233 | top: 0px; 1234 | height: 110px; 1235 | } 1236 | 1237 | .artist_l .a7 { 1238 | left: 240px; 1239 | overflow: hidden; 1240 | width: 110px; 1241 | position: absolute; 1242 | top: 0px; 1243 | height: 110px; 1244 | } 1245 | 1246 | .artist_l .a8 { 1247 | left: 240px; 1248 | overflow: hidden; 1249 | width: 110px; 1250 | position: absolute; 1251 | top: 0px; 1252 | height: 110px; 1253 | } 1254 | 1255 | .artist_l .a9 { 1256 | left: 240px; 1257 | overflow: hidden; 1258 | width: 110px; 1259 | position: absolute; 1260 | top: 0px; 1261 | height: 110px; 1262 | } 1263 | 1264 | .artist_l .a10 { 1265 | left: 240px; 1266 | overflow: hidden; 1267 | width: 110px; 1268 | position: absolute; 1269 | top: 0px; 1270 | height: 110px; 1271 | } 1272 | 1273 | .artist_l .a11 { 1274 | left: 240px; 1275 | overflow: hidden; 1276 | width: 110px; 1277 | position: absolute; 1278 | top: 0px; 1279 | height: 110px; 1280 | } 1281 | 1282 | .artist_l .a12 { 1283 | left: 240px; 1284 | overflow: hidden; 1285 | width: 110px; 1286 | position: absolute; 1287 | top: 0px; 1288 | height: 110px; 1289 | } 1290 | 1291 | .artist_l .a3 a { 1292 | padding-right: 10px; 1293 | padding-left: 10px; 1294 | font-size: 12px; 1295 | padding-bottom: 10px; 1296 | overflow: hidden; 1297 | width: 90px; 1298 | padding-top: 10px; 1299 | height: 90px; 1300 | } 1301 | 1302 | .artist_l .a4 a { 1303 | padding-right: 10px; 1304 | padding-left: 10px; 1305 | font-size: 12px; 1306 | padding-bottom: 10px; 1307 | overflow: hidden; 1308 | width: 90px; 1309 | padding-top: 10px; 1310 | height: 90px; 1311 | } 1312 | 1313 | .artist_l .a5 a { 1314 | padding: 10px; 1315 | font-size: 12px; 1316 | overflow: hidden; 1317 | width: 90px; 1318 | height: 90px; 1319 | } 1320 | 1321 | .artist_l .a6 a { 1322 | padding: 10px; 1323 | font-size: 12px; 1324 | overflow: hidden; 1325 | width: 90px; 1326 | height: 90px; 1327 | } 1328 | 1329 | .artist_l .a8 a { 1330 | padding: 10px; 1331 | font-size: 12px; 1332 | overflow: hidden; 1333 | width: 90px; 1334 | height: 90px; 1335 | } 1336 | 1337 | .artist_l .a7 a { 1338 | padding-right: 10px; 1339 | padding-left: 10px; 1340 | font-size: 12px; 1341 | padding-bottom: 10px; 1342 | overflow: hidden; 1343 | width: 90px; 1344 | padding-top: 10px; 1345 | height: 90px; 1346 | } 1347 | 1348 | .artist_l .a10 a { 1349 | padding-right: 10px; 1350 | padding-left: 10px; 1351 | font-size: 12px; 1352 | padding-bottom: 10px; 1353 | overflow: hidden; 1354 | width: 90px; 1355 | padding-top: 10px; 1356 | height: 90px; 1357 | } 1358 | 1359 | .artist_l .a11 a { 1360 | padding-right: 10px; 1361 | padding-left: 10px; 1362 | font-size: 12px; 1363 | padding-bottom: 10px; 1364 | overflow: hidden; 1365 | width: 90px; 1366 | padding-top: 10px; 1367 | height: 90px; 1368 | } 1369 | 1370 | .artist_l .a1 a { 1371 | top: -357px; 1372 | } 1373 | 1374 | .artist_l .a2 a { 1375 | font-size: 18px; 1376 | overflow: hidden; 1377 | top: -232px; 1378 | } 1379 | 1380 | .artist_l .a12 a { 1381 | font-size: 18px; 1382 | overflow: hidden; 1383 | top: -232px; 1384 | } 1385 | 1386 | .artist_l .a9 a { 1387 | font-size: 14px; 1388 | overflow: hidden; 1389 | } 1390 | 1391 | .artist_l .a2 { 1392 | width: 232px; 1393 | height: 232px; 1394 | } 1395 | 1396 | .artist_l .a3 { 1397 | left: 240px; 1398 | top: 244px; 1399 | } 1400 | 1401 | .artist_l .a4 { 1402 | left: 362px; 1403 | top: 244px; 1404 | } 1405 | 1406 | .artist_l .a5 { 1407 | left: 482px; 1408 | top: 0px; 1409 | } 1410 | 1411 | .artist_l .a6 { 1412 | left: 604px; 1413 | top: 0px; 1414 | } 1415 | 1416 | .artist_l .a7 { 1417 | left: 482px; 1418 | top: 120px; 1419 | } 1420 | 1421 | .artist_l .a8 { 1422 | left: 604px; 1423 | top: 120px; 1424 | } 1425 | 1426 | .artist_l .a9 { 1427 | left: 482px; 1428 | width: 232px; 1429 | top: 244px; 1430 | } 1431 | 1432 | .artist_l .a10 { 1433 | left: 726px; 1434 | top: 0px; 1435 | } 1436 | 1437 | .artist_l .a11 { 1438 | left: 848px; 1439 | top: 0px; 1440 | } 1441 | 1442 | .artist_l .a12 { 1443 | left: 726px; 1444 | width: 232px; 1445 | top: 120px; 1446 | height: 232px; 1447 | } 1448 | 1449 | .artist_l a { 1450 | position: absolute; 1451 | top: -110px; 1452 | left: 0px; 1453 | width: 100%; 1454 | height: 100%; 1455 | opacity: 0.9; 1456 | background: #99CC00; 1457 | color: #fff; 1458 | font-family: 'Microsoft YaHei'; 1459 | text-decoration: none; 1460 | -webkit-transition: all 0.25s linear; 1461 | -moz-transition: all 0.25s linear; 1462 | -o-transition: all 0.25s linear; 1463 | transition: all 0.25s linear; 1464 | } 1465 | 1466 | .artist_l a div { 1467 | width: 80%; 1468 | position: absolute; 1469 | top: 50%; 1470 | left: 50%; 1471 | -webkit-transform: translate(-50%, -50%); 1472 | transform: translate(-50%, -50%); 1473 | } 1474 | 1475 | .artist_l li:hover a { 1476 | top: 0; 1477 | } 1478 | 1479 | .artist_l a:hover { 1480 | color: #fff; 1481 | } 1482 | 1483 | .artist_l a strong { 1484 | line-height: 2em; 1485 | color: whitesmoke; 1486 | } 1487 | 1488 | /*截图部分*/ 1489 | 1490 | .img_select { 1491 | width: 1218px; 1492 | height: 480px; 1493 | position: absolute; 1494 | top: 0; 1495 | left: 0; 1496 | background: #000; 1497 | z-index: 10002; 1498 | display: none; 1499 | } 1500 | 1501 | .img_select .img_output { 1502 | width: 1218px; 1503 | height: 480px; 1504 | display: table-cell; 1505 | /*图片容器以表格的单元格形式显示*/ 1506 | text-align: center; 1507 | /* 实现水平居中 */ 1508 | vertical-align: middle; 1509 | /*实现垂直居中*/ 1510 | } 1511 | 1512 | .img_select .img_output img { 1513 | box-shadow: 0 0 10px #FFF; 1514 | } 1515 | 1516 | .img_save { 1517 | position: absolute; 1518 | right: 40px; 1519 | bottom: 100px; 1520 | } 1521 | 1522 | .img_cancel { 1523 | position: absolute; 1524 | right: 40px; 1525 | bottom: 50px; 1526 | } 1527 | 1528 | .img_cancel a, 1529 | .img_save a { 1530 | color: #FFF; 1531 | font-family: "微软雅黑"; 1532 | font-size: 14px; 1533 | line-height: 25px; 1534 | text-indent: 10px; 1535 | text-decoration: none; 1536 | } 1537 | 1538 | .img_save i { 1539 | float: left; 1540 | width: 25px; 1541 | height: 25px; 1542 | background: url(../img/save.png) 0 0px; 1543 | } 1544 | 1545 | .img_cancel i { 1546 | float: left; 1547 | width: 25px; 1548 | height: 25px; 1549 | background: url(../img/save.png) 0 -25px; 1550 | } -------------------------------------------------------------------------------- /dev/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Video Play - 轩枫阁 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | MV Show 17 | 18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 |
26 |
27 | 28 | 29 | 30 |
31 |
32 |
保存
33 |
返回
34 |
35 | 36 |
Taylor Swift: 《Love Story》
37 | 38 |
39 |
40 |
41 | 42 | 43 | 44 | 45 |
46 |
47 | 48 |
49 |
50 |
51 |
52 |
53 | 54 |
55 |
56 |
57 | / 58 | 59 |
60 | 61 |
62 |
63 |
64 | 65 |
66 | 67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | 76 | 77 |
78 |
79 | 80 | 81 |
82 |
83 |
84 | 85 |
86 |
87 |
88 | 89 | 90 | 91 |
92 | 93 |
94 | 95 | 96 | 97 |
Copyright © 2016 轩枫阁
98 | 99 | 109 | 110 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /dev/html/list.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dev/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/bg.jpg -------------------------------------------------------------------------------- /dev/img/c.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/c.gif -------------------------------------------------------------------------------- /dev/img/controls-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/controls-bg.png -------------------------------------------------------------------------------- /dev/img/cover/1987.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/cover/1987.jpg -------------------------------------------------------------------------------- /dev/img/cover/fk.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/cover/fk.jpg -------------------------------------------------------------------------------- /dev/img/cover/ku.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/cover/ku.jpg -------------------------------------------------------------------------------- /dev/img/cover/lost.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/cover/lost.jpg -------------------------------------------------------------------------------- /dev/img/cover/nzfnsm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/cover/nzfnsm.jpg -------------------------------------------------------------------------------- /dev/img/cover/qwdfj.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/cover/qwdfj.jpg -------------------------------------------------------------------------------- /dev/img/cover/sky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/cover/sky.jpg -------------------------------------------------------------------------------- /dev/img/cover/sxdsx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/cover/sxdsx.jpg -------------------------------------------------------------------------------- /dev/img/cover/up.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/cover/up.jpg -------------------------------------------------------------------------------- /dev/img/cover/whxn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/cover/whxn.jpg -------------------------------------------------------------------------------- /dev/img/cover/yc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/cover/yc.jpg -------------------------------------------------------------------------------- /dev/img/cover/young.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/cover/young.jpg -------------------------------------------------------------------------------- /dev/img/dancer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/dancer.png -------------------------------------------------------------------------------- /dev/img/darkcurtain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/darkcurtain.jpg -------------------------------------------------------------------------------- /dev/img/frontcurtain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/frontcurtain.jpg -------------------------------------------------------------------------------- /dev/img/full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/full.png -------------------------------------------------------------------------------- /dev/img/handle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/handle.png -------------------------------------------------------------------------------- /dev/img/loop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/loop.png -------------------------------------------------------------------------------- /dev/img/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/play.png -------------------------------------------------------------------------------- /dev/img/play_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/play_hover.png -------------------------------------------------------------------------------- /dev/img/rope.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/rope.png -------------------------------------------------------------------------------- /dev/img/slider-arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/slider-arrows.png -------------------------------------------------------------------------------- /dev/img/start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/start.png -------------------------------------------------------------------------------- /dev/img/video_next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/video_next.png -------------------------------------------------------------------------------- /dev/img/video_prev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/video_prev.png -------------------------------------------------------------------------------- /dev/img/volume.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/img/volume.png -------------------------------------------------------------------------------- /dev/js/template.js: -------------------------------------------------------------------------------- 1 | /*!art-template - Template Engine | http://aui.github.com/artTemplate/*/ 2 | !function(){function a(a){return a.replace(t,"").replace(u,",").replace(v,"").replace(w,"").replace(x,"").split(y)}function b(a){return"'"+a.replace(/('|\\)/g,"\\$1").replace(/\r/g,"\\r").replace(/\n/g,"\\n")+"'"}function c(c,d){function e(a){return m+=a.split(/\n/).length-1,k&&(a=a.replace(/\s+/g," ").replace(//g,"")),a&&(a=s[1]+b(a)+s[2]+"\n"),a}function f(b){var c=m;if(j?b=j(b,d):g&&(b=b.replace(/\n/g,function(){return m++,"$line="+m+";"})),0===b.indexOf("=")){var e=l&&!/^=[=#]/.test(b);if(b=b.replace(/^=[=#]?|[\s;]*$/g,""),e){var f=b.replace(/\s*\([^\)]+\)/,"");n[f]||/^(include|print)$/.test(f)||(b="$escape("+b+")")}else b="$string("+b+")";b=s[1]+b+s[2]}return g&&(b="$line="+c+";"+b),r(a(b),function(a){if(a&&!p[a]){var b;b="print"===a?u:"include"===a?v:n[a]?"$utils."+a:o[a]?"$helpers."+a:"$data."+a,w+=a+"="+b+",",p[a]=!0}}),b+"\n"}var g=d.debug,h=d.openTag,i=d.closeTag,j=d.parser,k=d.compress,l=d.escape,m=1,p={$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1},q="".trim,s=q?["$out='';","$out+=",";","$out"]:["$out=[];","$out.push(",");","$out.join('')"],t=q?"$out+=text;return $out;":"$out.push(text);",u="function(){var text=''.concat.apply('',arguments);"+t+"}",v="function(filename,data){data=data||$data;var text=$utils.$include(filename,data,$filename);"+t+"}",w="'use strict';var $utils=this,$helpers=$utils.$helpers,"+(g?"$line=0,":""),x=s[0],y="return new String("+s[3]+");";r(c.split(h),function(a){a=a.split(i);var b=a[0],c=a[1];1===a.length?x+=e(b):(x+=f(b),c&&(x+=e(c)))});var z=w+x+y;g&&(z="try{"+z+"}catch(e){throw {filename:$filename,name:'Render Error',message:e.message,line:$line,source:"+b(c)+".split(/\\n/)[$line-1].replace(/^\\s+/,'')};}");try{var A=new Function("$data","$filename",z);return A.prototype=n,A}catch(B){throw B.temp="function anonymous($data,$filename) {"+z+"}",B}}var d=function(a,b){return"string"==typeof b?q(b,{filename:a}):g(a,b)};d.version="3.0.0",d.config=function(a,b){e[a]=b};var e=d.defaults={openTag:"<%",closeTag:"%>",escape:!0,cache:!0,compress:!1,parser:null},f=d.cache={};d.render=function(a,b){return q(a,b)};var g=d.renderFile=function(a,b){var c=d.get(a)||p({filename:a,name:"Render Error",message:"Template not found"});return b?c(b):c};d.get=function(a){var b;if(f[a])b=f[a];else if("object"==typeof document){var c=document.getElementById(a);if(c){var d=(c.value||c.innerHTML).replace(/^\s*|\s*$/g,"");b=q(d,{filename:a})}}return b};var h=function(a,b){return"string"!=typeof a&&(b=typeof a,"number"===b?a+="":a="function"===b?h(a.call(a)):""),a},i={"<":"<",">":">",'"':""","'":"'","&":"&"},j=function(a){return i[a]},k=function(a){return h(a).replace(/&(?![\w#]+;)|[<>"']/g,j)},l=Array.isArray||function(a){return"[object Array]"==={}.toString.call(a)},m=function(a,b){var c,d;if(l(a))for(c=0,d=a.length;d>c;c++)b.call(a,a[c],c,a);else for(c in a)b.call(a,a[c],c)},n=d.utils={$helpers:{},$include:g,$string:h,$escape:k,$each:m};d.helper=function(a,b){o[a]=b};var o=d.helpers=n.$helpers;d.onerror=function(a){var b="Template Error\n\n";for(var c in a)b+="<"+c+">\n"+a[c]+"\n\n";"object"==typeof console&&console.error(b)};var p=function(a){return d.onerror(a),function(){return"{Template Error}"}},q=d.compile=function(a,b){function d(c){try{return new i(c,h)+""}catch(d){return b.debug?p(d)():(b.debug=!0,q(a,b)(c))}}b=b||{};for(var g in e)void 0===b[g]&&(b[g]=e[g]);var h=b.filename;try{var i=c(a,b)}catch(j){return j.filename=h||"anonymous",j.name="Syntax Error",p(j)}return d.prototype=i.prototype,d.toString=function(){return i.toString()},h&&b.cache&&(f[h]=d),d},r=n.$each,s="break,case,catch,continue,debugger,default,delete,do,else,false,finally,for,function,if,in,instanceof,new,null,return,switch,this,throw,true,try,typeof,var,void,while,with,abstract,boolean,byte,char,class,const,double,enum,export,extends,final,float,goto,implements,import,int,interface,long,native,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile,arguments,let,yield,undefined",t=/\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|\s*\.\s*[$\w\.]+/g,u=/[^\w$]+/g,v=new RegExp(["\\b"+s.replace(/,/g,"\\b|\\b")+"\\b"].join("|"),"g"),w=/^\d[^,]*|,\d[^,]*/g,x=/^,+|,+$/g,y=/^$|,+/;e.openTag="{{",e.closeTag="}}";var z=function(a,b){var c=b.split(":"),d=c.shift(),e=c.join(":")||"";return e&&(e=", "+e),"$helpers."+d+"("+a+e+")"};e.parser=function(a){a=a.replace(/^\s/,"");var b=a.split(" "),c=b.shift(),e=b.join(" ");switch(c){case"if":a="if("+e+"){";break;case"else":b="if"===b.shift()?" if("+b.join(" ")+")":"",a="}else"+b+"{";break;case"/if":a="}";break;case"each":var f=b[0]||"$data",g=b[1]||"as",h=b[2]||"$value",i=b[3]||"$index",j=h+","+i;"as"!==g&&(f="[]"),a="$each("+f+",function("+j+"){";break;case"/each":a="});";break;case"echo":a="print("+e+");";break;case"print":case"include":a=c+"("+b.join(",")+");";break;default:if(/^\s*\|\s*[\w\$]/.test(e)){var k=!0;0===a.indexOf("#")&&(a=a.substr(1),k=!1);for(var l=0,m=a.split("|"),n=m.length,o=m[l++];n>l;l++)o=z(o,m[l]);a=(k?"=":"=#")+o}else a=d.helpers[c]?"=#"+c+"("+b.join(",")+");":"="+a}return a},"function"==typeof define?define(function(){return d}):"undefined"!=typeof exports?module.exports=d:this.template=d}(); -------------------------------------------------------------------------------- /dev/js/video-play.js: -------------------------------------------------------------------------------- 1 | ;(function(root, factory) { 2 | if (typeof module !== 'undefined' && module.exports) { 3 | module.exports = factory(); 4 | } else if (typeof define === 'function' && define.amd) { 5 | define(factory); 6 | } else { 7 | root.Video = factory.call(root); 8 | } 9 | }(this, function() { 10 | 'use strict'; 11 | 12 | // 视频播放控制 13 | function Video(options){ 14 | this.options = $.extend({ 15 | video: $('#video'), 16 | loadedmetadata: $.noop, 17 | canplay: $.noop, 18 | canplaythrough: $.noop, 19 | seeking: $.noop, 20 | ended: $.noop, 21 | seeked: $.noop, 22 | waiting: $.noop, 23 | }, options); 24 | 25 | } 26 | 27 | Video.prototype = { 28 | init: function(options){ 29 | this.video = this.options.video[0]; 30 | this.completeloaded = false; 31 | 32 | options.src && $(this.video).attr('src', options.src); 33 | options.poster && $(this.video).attr('poster', options.poster); 34 | this.listenEvents(); 35 | }, 36 | 37 | listenEvents: function(){ 38 | var self = this; 39 | 40 | // 视频加载，可播放前的设置 41 | $(this.video).on('loadedmetadata', this.options.loadedmetadata); 42 | 43 | // 视频能播放 44 | $(this.video).on('canplay', this.options.canplay); 45 | 46 | // 解决chrome缓存流 47 | $(this.video).on('canplaythrough', function(){ 48 | self.completeloaded = true; 49 | self.options.canplaythrough(); 50 | }); 51 | 52 | // 视频缓冲加载 53 | $(this.video).on('seeking', function(){ 54 | if(self.completeloaded){ 55 | self.options.seeking(); 56 | } 57 | }); 58 | 59 | // 更新视频播放时间 60 | $(this.video).on('timeupdate', function(){ 61 | self.options.timeupdate(self.video.currentTime, self.video.duration); 62 | }); 63 | 64 | // 视频播放完毕 65 | $(this.video).on('ended', this.options.ended); 66 | 67 | // 视频加载完成 68 | $(this.video).on('seeked', this.options.seeked); 69 | 70 | // 视频加载等待 71 | $(this.video).on('waiting', this.options.seeked); 72 | }, 73 | 74 | play: function(){ 75 | this.video.play(); 76 | }, 77 | 78 | pause: function(){ 79 | this.video.pause(); 80 | }, 81 | 82 | setCurrentTime: function(time){ 83 | this.video.currentTime = time; 84 | }, 85 | 86 | // 调节音量 87 | updateVolume: function(volume){ 88 | this.video.volume = volume; 89 | }, 90 | 91 | // 全屏 92 | fullScreen: function(){ 93 | if($.isFunction(this.video.webkitEnterFullscreen)){ 94 | this.video.webkitEnterFullScreen(); 95 | }else if($.isFunction(this.video.mozRequestFullScreen)){ 96 | this.video.mozRequestFullScreen(); 97 | }else{ 98 | alert("浏览器不支持全屏"); 99 | } 100 | }, 101 | 102 | // 静音 103 | switchMuted: function(options){ 104 | this.video.muted = options.muted || !this.video.muted; 105 | if(this.video.muted){ 106 | options.off && options.off(this.video.volume); 107 | }else{ 108 | options.on && options.on(this.video.volume); 109 | } 110 | }, 111 | 112 | // 获取视频总播放时间 113 | getDuration: function(){ 114 | return this.video.duration || 0; 115 | }, 116 | 117 | // 获取缓冲进度 118 | getBuffered: function(){ 119 | return this.video.buffered.end(0); 120 | }, 121 | 122 | // 是否正在播放 123 | isPlaying: function(){ 124 | return !this.video.paused && !this.video.ended; 125 | }, 126 | 127 | getvideo: function(){ 128 | return this.video; 129 | } 130 | 131 | } 132 | 133 | return Video; 134 | })); 135 | -------------------------------------------------------------------------------- /dev/js/video-ui.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | 3 | var $body = $('body'), 4 | $win = $(window), 5 | $doc = $(document); 6 | 7 | // 视频列表 8 | var artlist = [ 9 | { 10 | id: 'fk', 11 | name: '再不疯狂我们就老了', 12 | artist: '李宇春' 13 | }, { 14 | id: 'yc', 15 | name: '洋葱', 16 | artist: 'TFBOYS' 17 | }, { 18 | id: 'sxdsx', 19 | name: '剩下的盛夏', 20 | artist: 'TFBOYS' 21 | }, { 22 | id: 'ku', 23 | name: '李宇春', 24 | artist: '酷' 25 | }, { 26 | id: 'whxn', 27 | name: '我好想你', 28 | artist: '苏打绿' 29 | }, { 30 | id: 'young', 31 | name: '样（Young）', 32 | artist: 'TFBOYS' 33 | }, { 34 | id: 'sky', 35 | name: 'A Sky Full Of Stars', 36 | artist: 'Coldplay' 37 | }, { 38 | id: '1987', 39 | name: '1987我不知会遇见你', 40 | artist: 'Chris Lee' 41 | }, { 42 | id: 'qwdfj', 43 | name: '墙外的风景', 44 | artist: '苏打绿', 45 | }, { 46 | id: 'lost', 47 | name: 'Lost Stars', 48 | artist: 'Maroon5' 49 | }, { 50 | id: 'nzfnsm', 51 | name: '你在烦恼什么', 52 | artist: '苏打绿' 53 | }, { 54 | id: 'up', 55 | name: 'Up & Up', 56 | artist: 'Coldplay' 57 | } 58 | ]; 59 | 60 | var $loading = $('.loading'); 61 | var videoPlayer = new Video({ 62 | loadedmetadata: function(){ 63 | // 设置视频的时间属性 64 | $(".current_time").text(timeFormat(0)); 65 | $(".duration_time").text(timeFormat(videoPlayer.getDuration())); 66 | updateVolume(0, 0.7); 67 | 68 | // 设置缓冲条 69 | updateBuffer(); 70 | }, 71 | 72 | canplay: function(){ 73 | $loading.hide(); 74 | }, 75 | 76 | seeking: function(){ 77 | $loading.show(); 78 | }, 79 | 80 | waiting: function(){ 81 | $loading.show(); 82 | }, 83 | 84 | timeupdate: function(currentTime, duration){ 85 | var percentage = 100 * currentTime / duration; 86 | $('.timeBar').css('width', percentage + '%'); 87 | $(".timeHandle").css('left', currentTime / duration * $progress.width() - 8); 88 | $('.current_time').text(timeFormat(currentTime)); 89 | }, 90 | 91 | ended: function(){ 92 | video.pause(); 93 | $body.removeClass('mod-play').addClass('mod-pause'); 94 | }, 95 | }); 96 | initVideo('fk'); 97 | 98 | // 初始化某视频 99 | function initVideo(id){ 100 | var art = {}, 101 | vindex = 0; 102 | for(var index in artlist){ 103 | if(artlist[index].id == id){ 104 | art = artlist[index]; 105 | vindex = index; 106 | break; 107 | } 108 | } 109 | 110 | videoPlayer.init({ 111 | src: 'http://ob8l4jfs8.bkt.clouddn.com/video/media/' + id + '.mp4', 112 | poster: 'http://ob8l4jfs8.bkt.clouddn.com/video/media/' + id + '.jpg', 113 | }); 114 | 115 | showVideoNav(vindex); 116 | $body.removeClass('mod-play').addClass('mod-pause'); 117 | $('.js_caption').data('index', vindex).text(art.artist + ': 《' + art.name + '》'); 118 | } 119 | 120 | // 显示视频的缓冲进度条 121 | var bufferTimer = null; 122 | function updateBuffer(){ 123 | var currentBuffer = videoPlayer.getBuffered(); 124 | var duration = videoPlayer.getDuration(); 125 | var percentage = 100 * currentBuffer / duration; 126 | $(".bufferBar").css("width", percentage + "%"); 127 | // console.log('buffer ' + percentage); 128 | if(currentBuffer < duration){ 129 | bufferTimer && clearTimeout(bufferTimer); 130 | bufferTimer = setTimeout(updateBuffer, 500); 131 | } 132 | }; 133 | 134 | // 播放/停止 135 | $('.btnPlay').on('click', function(){ 136 | if(videoPlayer.isPlaying()){ 137 | videoPlayer.pause(); 138 | $body.removeClass('mod-play').addClass('mod-pause'); 139 | }else{ 140 | videoPlayer.play(); 141 | $body.removeClass('mod-pause').addClass('mod-play'); 142 | } 143 | }); 144 | 145 | // 全屏按钮 146 | $(".btnFS").on('click',function(){ 147 | videoPlayer.fullScreen(); 148 | }); 149 | 150 | // 开关灯按钮 151 | $(".btnLight").click(function(){ 152 | $(this).toggleClass("lighton"); 153 | $body.toggleClass("mod-overlay"); 154 | }); 155 | 156 | // 声音按钮-静音 157 | $(".sound").click(function(){ 158 | $(this).toggleClass("muted"); 159 | var $volumeBar = $(".volumeBar"); 160 | videoPlayer.switchMuted({ 161 | on: function(volume){ 162 | $volumeBar.css("height", volume * 100 + "%"); 163 | }, 164 | off: function(){ 165 | $volumeBar.css("height", 0); 166 | } 167 | }); 168 | }); 169 | 170 | // 进度条 171 | var progressDrag = false; 172 | var $progress = $('.progress'); 173 | $('.progress, .timeHandle').on('mousedown', function(event){ 174 | if(event.which == 1){ 175 | progressDrag = true; 176 | updatebar(event.pageX); 177 | } 178 | return false; 179 | }); 180 | 181 | $doc.on('mousemove', function(event){ 182 | if(progressDrag){ 183 | updatebar(event.pageX); 184 | return false; 185 | } 186 | }); 187 | 188 | $doc.on('mouseup', function(event){ 189 | if(progressDrag){ 190 | progressDrag = false; 191 | updatebar(event.pageX); 192 | return false; 193 | } 194 | }); 195 | 196 | // 更新进度条 197 | function updatebar(pageX){ 198 | var duration = videoPlayer.getDuration(); 199 | var position = pageX - $progress.offset().left; 200 | var percentage = 100 * position / $progress.width(); 201 | 202 | if(percentage > 100){ 203 | percentage = 100; 204 | } 205 | if(percentage < 0){ 206 | percentage = 0; 207 | } 208 | 209 | $('.timeBar').css('width', percentage + '%'); 210 | 211 | // 更新播放进度 212 | videoPlayer.setCurrentTime(duration * percentage / 100); 213 | } 214 | 215 | // 时间信息tip 216 | $progress.on('mousemove', function(event){ 217 | updateTime(event.pageX); 218 | }); 219 | 220 | function updateTime(pageX){ 221 | var duration = videoPlayer.getDuration(); 222 | var position = pageX - $progress.offset().left; 223 | var totalTime = duration * position / $progress.width(); 224 | if(totalTime > duration){ 225 | currentTime = duration; 226 | } 227 | if(totalTime < 0 || !totalTime){ 228 | currentTime = "00:00"; 229 | } 230 | var currentTime = timeFormat(totalTime); 231 | $(".timeTip").text(currentTime).css({left: position - 16}); 232 | } 233 | 234 | 235 | // 音量 236 | var $volume = $('.volume'); 237 | var volumeDrag = false; 238 | $volume.on('mousedown', function(event){ 239 | if(event.which == 1){ 240 | volumeDrag = true; 241 | $('.sound').removeClass('muted'); 242 | updateVolume(event.pageY); 243 | videoPlayer.switchMuted({ 244 | muted: false 245 | }); 246 | return false; //防止点击时选择文本 247 | } 248 | }); 249 | 250 | $doc.on('mousemove', function(event){ 251 | if(volumeDrag){ 252 | updateVolume(event.pageY - 4); 253 | return false; 254 | } 255 | }); 256 | 257 | $doc.on('mouseup', function(event){ 258 | if(volumeDrag){ 259 | volumeDrag = false; 260 | updateVolume(event.pageY); 261 | } 262 | }); 263 | 264 | function updateVolume(pageY, volume){ 265 | var percentage; 266 | 267 | if(volume){ 268 | percentage = volume * 100; 269 | }else{ 270 | var position = pageY - $volume.offset().top; 271 | percentage = 100 - 100 * position / $volume.height(); 272 | } 273 | 274 | if(percentage > 100){ 275 | percentage = 100; 276 | } 277 | if(percentage < 0){ 278 | percentage = 0; 279 | } 280 | 281 | // 更新声音条和声音值 282 | $(".volumeBar").css("height", percentage+"%"); 283 | 284 | videoPlayer.updateVolume(percentage / 100); 285 | 286 | // 基于声音值，改变声音等级图标 287 | if(percentage == 0){ 288 | $(".sound").attr("class", "muted sound btn"); 289 | }else if(percentage > 25 && percentage < 50){ 290 | $(".sound").attr("class", "sound1 sound btn"); 291 | }else if(percentage > 50 && percentage < 75){ 292 | $(".sound").attr("class", "sound2 sound btn"); 293 | }else if(percentage > 75){ 294 | $(".sound").attr("class", "sound3 sound btn"); 295 | } 296 | } 297 | 298 | // 时间格式化 - 00:00 299 | function timeFormat(seconds){ 300 | var m = Math.floor(seconds/60)<10 ? "0" + Math.floor(seconds/60) : Math.floor(seconds/60); 301 | var s = Math.floor(seconds-(m*60))<10 ? "0" + Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60)); 302 | return m + ":" + s; 303 | } 304 | 305 | // 设置循环 306 | $(".btnLoop").on('click', function(){ 307 | $(this).toggleClass("loopon"); 308 | var $video = $('#video'); 309 | if(!$video.attr("loop")){ 310 | $video.attr("loop", "true"); 311 | }else{ 312 | $video.removeAttr("loop"); 313 | } 314 | }); 315 | 316 | 317 | // 帷幕 318 | $('.js_rope').on('click', function(){ 319 | $body.toggleClass('mod-open'); 320 | }); 321 | 322 | 323 | // 视频列表 324 | function renderList(){ 325 | var artlistTpl = template.compile($('#list_tpl').html()); 326 | $('.js_artList').html(artlistTpl({list: artlist})); 327 | } 328 | renderList(); 329 | 330 | // 选择视频 331 | $('.js_artList').on('click', 'li', function(event){ 332 | var target = $(event.currentTarget), 333 | id = target.data('id'); 334 | initVideo(id); 335 | }); 336 | 337 | // 上下篇 338 | $('.video_nav').on('click', function(event){ 339 | var type = $(this).data('type'); 340 | var index = parseInt($('.js_caption').data('index')); 341 | if(type == 'prev'){ 342 | index--; 343 | }else if(type == 'next'){ 344 | index++; 345 | } 346 | initVideo(artlist[index].id); 347 | }); 348 | 349 | function showVideoNav(index){ 350 | index = parseInt(index); 351 | if(index <= 0){ 352 | $('.video_nav[data-type=prev]').hide(); 353 | }else if(index >= artlist.length-1){ 354 | $('.video_nav[data-type=next]').hide(); 355 | }else{ 356 | $('.video_nav').show(); 357 | } 358 | } 359 | }); -------------------------------------------------------------------------------- /dev/media/1987.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/media/1987.jpg -------------------------------------------------------------------------------- /dev/media/fk.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/media/fk.jpg -------------------------------------------------------------------------------- /dev/media/ku.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/media/ku.jpg -------------------------------------------------------------------------------- /dev/media/lost.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/media/lost.jpg -------------------------------------------------------------------------------- /dev/media/nzfnsm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/media/nzfnsm.jpg -------------------------------------------------------------------------------- /dev/media/qwdfj.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/media/qwdfj.jpg -------------------------------------------------------------------------------- /dev/media/sky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/media/sky.jpg -------------------------------------------------------------------------------- /dev/media/sxdsx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/media/sxdsx.jpg -------------------------------------------------------------------------------- /dev/media/up.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/media/up.jpg -------------------------------------------------------------------------------- /dev/media/whxn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/media/whxn.jpg -------------------------------------------------------------------------------- /dev/media/xfed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/media/xfed.jpg -------------------------------------------------------------------------------- /dev/media/yc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/media/yc.jpg -------------------------------------------------------------------------------- /dev/media/young.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/dev/media/young.jpg -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/common.less: -------------------------------------------------------------------------------- 1 | @import "mod-layout"; 2 | 3 | /*video container*/ 4 | .videoContainer{ 5 | width: 960px; 6 | height: 540px; 7 | margin:0px auto; 8 | position: relative; 9 | background: #000; 10 | color: #ccc; 11 | // overflow: hidden; 12 | z-index: 12000; 13 | 14 | &:hover{ 15 | .control{ 16 | bottom: 0px; 17 | } 18 | .caption{ 19 | top: 0; 20 | } 21 | } 22 | } 23 | 24 | .mod-play{ 25 | .start{ 26 | display: none!important; 27 | } 28 | .video_nav{ 29 | display: none!important; 30 | } 31 | .caption{ 32 | top: -45px; 33 | } 34 | .control div.btnPlay{ 35 | background-position: 20px -40px; 36 | } 37 | } 38 | 39 | .mod-pause{ 40 | .start{ 41 | display: block; 42 | } 43 | .video_nav{ 44 | display: block; 45 | } 46 | .caption{ 47 | top: 0; 48 | } 49 | } 50 | 51 | /*video caption css*/ 52 | .caption{ 53 | // display: none; 54 | position: absolute; 55 | top: -45px; 56 | left: 0; 57 | width: 100%; 58 | padding: 10px 0; 59 | color: #ccc; 60 | font-size: 20px; 61 | font-family: 'Microsoft Yahei', monospace; 62 | text-align: center; 63 | background-color: rgba(255, 255, 255, 0.08); 64 | .transition(all 0.2s ease); 65 | } 66 | 67 | /*VIDEO CONTROLS CSS*/ 68 | 69 | /*control holder*/ 70 | .control{ 71 | background: rgba(0,0,0,0.4); 72 | color: #ccc; 73 | position: absolute; 74 | bottom: -44px; 75 | left: 0; 76 | width: 100%; 77 | z-index:5; 78 | .transition(all 0.3s ease); 79 | // display: none; 80 | } 81 | /*control top part*/ 82 | .topControl{ 83 | height: 11px; 84 | border-bottom: 1px solid #404040; 85 | } 86 | 87 | /*control bottom part*/ 88 | .btmControl{ 89 | clear:both; 90 | height:42px; 91 | } 92 | 93 | .control div.btn{ 94 | float: left; 95 | width: 60px; 96 | height: 40px; 97 | border-right: solid 1px #161615; 98 | border-left:solid 1px #2a2b2a; 99 | cursor: pointer; 100 | } 101 | 102 | .control div.btnPlay{ 103 | width: 40px; 104 | padding:0 20px; 105 | background-image: url(../img/start.png); 106 | background-repeat: no-repeat; 107 | background-position: top center; 108 | 109 | } 110 | // .control div.paused{ 111 | // background: url(../img/start.png) no-repeat 20px -40px; 112 | // } 113 | .control div.btnStop{ 114 | background: url(../img/control.png) no-repeat 0 -60px; 115 | } 116 | .btnSound{ 117 | position: relative; 118 | cursor: pointer; 119 | width: 60px; 120 | height: 40px; 121 | float: left; 122 | margin: 0px; 123 | 124 | &:hover{ 125 | .volume{ 126 | display: block; 127 | } 128 | } 129 | } 130 | .control div.sound{ 131 | background: url(../img/volume.png) no-repeat 0px -120px; 132 | border-left: solid 1px #686262; 133 | float: right; 134 | } 135 | .control div.sound1{ 136 | background: url(../img/volume.png) no-repeat 0px -80px !important; 137 | } 138 | .control div.sound2{ 139 | background: url(../img/volume.png) no-repeat 0px -40px !important; 140 | } 141 | .control div.sound3{ 142 | background: url(../img/volume.png) no-repeat 0px 0px !important; 143 | } 144 | .control div.muted{ 145 | background: url(../img/volume.png) no-repeat 0px -120px !important; 146 | } 147 | .control div.btnFS{ 148 | background: url(../img/full.png) no-repeat center center; 149 | float: right; 150 | } 151 | .control div.btnLight{ 152 | float: right; 153 | position: relative; 154 | width: 40px; 155 | height: 20px; 156 | margin:10px 9px; 157 | background: gray; 158 | border-radius: 4px; 159 | border:solid 1px #FFF; 160 | -webkit-transition:all 1s; 161 | transition:all 1s; 162 | } 163 | .light_btn{ 164 | width: 20px; 165 | height: 18px; 166 | background: #FFF; 167 | border-radius: 4px; 168 | position: absolute; 169 | top: 1px; 170 | left: 1px; 171 | -webkit-transition:all 0.3s ease; 172 | transition:all 0.3s ease; 173 | } 174 | .control div.lighton{ 175 | background: #3FB7FC; 176 | } 177 | .control div.lighton .light_btn{ 178 | top:1px; 179 | left:19px; 180 | } 181 | 182 | .control div.btnLoop{ 183 | float: right; 184 | width: 40px; 185 | background: url(../img/loop.png) 0 0; 186 | } 187 | .control div.btnLoop:hover{ 188 | background: url(../img/loop.png) 0 -40px; 189 | } 190 | .control div.loopon{ 191 | background: url(../img/loop.png) 0 -40px; 192 | } 193 | 194 | 195 | /*PROGESS BAR CSS*/ 196 | 197 | /*Progess bar*/ 198 | .progress{ 199 | width: 100%; 200 | height: 10px; 201 | position: relative; 202 | float: left; 203 | cursor: pointer; 204 | background: rgba(255,255,255, 0.3); 205 | 206 | &:hover{ 207 | .timeTip{ 208 | display: block; 209 | } 210 | } 211 | } 212 | .progress span { 213 | height:100%; 214 | position:absolute; 215 | top:0; 216 | left:0; 217 | display:block; 218 | } 219 | .timeBar{ 220 | z-index:10; 221 | width:0; 222 | background: #82d344; 223 | background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%); 224 | background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%); 225 | background: -o-linear-gradient(top, #82d344 0%, #51af34 100%); 226 | background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%); 227 | background: linear-gradient(top, #82d344 0%, #51af34 100%); 228 | } 229 | .progress .timeHandle { 230 | position: absolute; 231 | cursor: pointer; 232 | width: 12px; 233 | height: 14px; 234 | top: -1px; 235 | z-index: 99; 236 | background: url(../img/handle.png); 237 | background-size: contain; 238 | } 239 | .progress .timeTip{ 240 | display: none; 241 | position: absolute; 242 | top:-30px; 243 | left:0; 244 | width: 40px; 245 | height: 18px; 246 | line-height: 18px; 247 | background: #FFF; 248 | font-family: Helvetica, Arial, sans-serif; 249 | font-size: 10px; 250 | font-weight: bold; 251 | color: #666; 252 | text-align: center; 253 | } 254 | .progress .timeTip:after{ 255 | content:""; 256 | width: 0px; 257 | height: 0px; 258 | margin:10px auto; 259 | position: absolute; 260 | top:8px; 261 | left: 12px; 262 | border-color:#FFF transparent transparent transparent; 263 | border-style: solid; 264 | border-width: 6px; 265 | } 266 | .bufferBar{ 267 | z-index: 5; 268 | width: 0; 269 | background: rgba(36, 36, 44, 0.5); 270 | } 271 | 272 | /*time and duration*/ 273 | .time{ 274 | float: left; 275 | width: 100px; 276 | font-family: "microsoft yahei"; 277 | text-align: center; 278 | font-size: 14px; 279 | line-height: 40px; 280 | border-left: solid 1px #686262; 281 | } 282 | 283 | /*VOLUME BAR CSS*/ 284 | /*volume bar*/ 285 | .volume{ 286 | display: none; 287 | position: absolute; 288 | cursor: pointer; 289 | width: 20px; 290 | height: 100px; 291 | float: right; 292 | bottom: 50px; 293 | left: 15px; 294 | z-index: 21121000; 295 | background: rgba(39, 34, 34, 0.6); 296 | padding:4px 0; 297 | } 298 | .volume:after{ 299 | content: ""; 300 | width: 0; 301 | height: 0; 302 | border-color:rgba(39, 34, 34, 0.6) transparent transparent transparent; 303 | border-style:solid; 304 | border-width:10px; 305 | position: absolute; 306 | top: 108px; 307 | left: 0px; 308 | } 309 | .volume_wrap { 310 | float: left; 311 | position: relative; 312 | height: 90%; 313 | width: 12px; 314 | margin: 4px; 315 | border-radius: 4px; 316 | background: rgba(0,0,0,0.6); 317 | overflow: hidden; 318 | } 319 | .volume:hover{ 320 | cursor: pointer; 321 | } 322 | .volumeBar{ 323 | display: block; 324 | width: 12px; 325 | position: absolute; 326 | bottom:0; 327 | left: 0; 328 | background: #3FB7FC; 329 | border-radius: 4px; 330 | z-index: 21121; 331 | cursor: pointer; 332 | } 333 | 334 | /*OTHER CSS*/ 335 | 336 | /*video screen cover*/ 337 | .start{ 338 | position: absolute; 339 | width: 120px; 340 | height: 120px; 341 | border-radius: 50%; 342 | top: 50%; 343 | left: 50%; 344 | margin-left: -60px; 345 | margin-top: -100px; 346 | z-index: 10001; 347 | .transition(all 0.6s ease); 348 | } 349 | /*.start:hover{ 350 | background-color: rgba(0,0,0,0.6); 351 | }*/ 352 | .init_start{ 353 | position: relative; 354 | width: 100px; 355 | height: 100px; 356 | margin:10px; 357 | background: url(../img/play.png) no-repeat; 358 | cursor: pointer; 359 | } 360 | .init_start:hover{ 361 | background: url(../img/play_hover.png) no-repeat; 362 | } 363 | 364 | 365 | .loading{ 366 | position: absolute; 367 | width: 70px; 368 | height: 70px; 369 | top: 50%; 370 | left: 50%; 371 | margin-left: -50px; 372 | margin-top: -90px; 373 | padding: 15px; 374 | background: rgba(0,0,0,0.4); 375 | border-radius: 50%; 376 | z-index: 2; 377 | // display: none; 378 | } 379 | 380 | .loading .dot { 381 | position: absolute; 382 | opacity: 0; 383 | width: 64px; 384 | height: 64px; 385 | margin:3px; 386 | -webkit-transform: rotate(225deg); 387 | -moz-transform: rotate(225deg); 388 | -o-transform: rotate(225deg); 389 | -ms-transform: rotate(225deg); 390 | transform: rotate(225deg); 391 | -webkit-animation-name: loading; 392 | -moz-animation-name: loading; 393 | -ms-animation-name: loading; 394 | -o-animation-name: loading; 395 | animation-name: loading; 396 | -webkit-animation-iteration-count: infinite; 397 | -moz-animation-iteration-count: infinite; 398 | -ms-animation-iteration-count: infinite; 399 | -o-animation-iteration-count: infinite; 400 | animation-iteration-count: infinite; 401 | -o-animation-duration: 5.28s; 402 | -moz-animation-duration: 5.28s; 403 | -webkit-animation-duration: 5.28s; 404 | animation-duration: 5.28s; 405 | } 406 | .loading .dot:after { 407 | content: ""; 408 | position: absolute; 409 | width: 6px; 410 | height: 6px; 411 | border-radius: 50%; 412 | background: #FFF; 413 | } 414 | .loading .dot:nth-child(2) { 415 | -webkit-animation-delay: .23s; 416 | -moz-animation-delay: .23s; 417 | -ms-animation-delay: .23s; 418 | -o-animation-delay: .23s; 419 | animation-delay: .23s; 420 | } 421 | .loading .dot:nth-child(3) { 422 | -webkit-animation-delay: .46s; 423 | -moz-animation-delay: .46s; 424 | -ms-animation-delay: .46s; 425 | -o-animation-delay: .46s; 426 | animation-delay: .46s; 427 | } 428 | .loading .dot:nth-child(4) { 429 | -webkit-animation-delay: .69s; 430 | -moz-animation-delay: .69s; 431 | -ms-animation-delay: .69s; 432 | -o-animation-delay: .69s; 433 | animation-delay: .69s; 434 | } 435 | .loading .dot:nth-child(5) { 436 | -webkit-animation-delay: .92s; 437 | -moz-animation-delay: .92s; 438 | -ms-animation-delay: .92s; 439 | -o-animation-delay: .92s; 440 | animation-delay: .92s; 441 | } 442 | @-webkit-keyframes loading { 443 | 0% { 444 | -webkit-transform: rotate(225deg); 445 | opacity: 1; 446 | -webkit-animation-timing-function: ease-out; 447 | } 448 | 8% { 449 | -webkit-transform: rotate(345deg); 450 | -webkit-animation-timing-function: linear; 451 | } 452 | 30% { 453 | -webkit-transform: rotate(455deg); 454 | -webkit-animation-timing-function: ease-in-out; 455 | } 456 | 40% { 457 | -webkit-transform: rotate(690deg); 458 | -webkit-animation-timing-function: linear; 459 | } 460 | 60% { 461 | -webkit-transform: rotate(815deg); 462 | opacity: 1; 463 | -webkit-animation-timing-function: ease-out; 464 | } 465 | 75% { 466 | -webkit-transform: rotate(965deg); 467 | -webkit-animation-timing-function: ease-out; 468 | } 469 | 76% { 470 | opacity: 0; 471 | } 472 | 100% { 473 | opacity: 0; 474 | } 475 | } 476 | 477 | @-moz-keyframes loading { 478 | 0% { 479 | -moz-transform: rotate(225deg); 480 | opacity: 1; 481 | -moz-animation-timing-function: ease-out; 482 | } 483 | 8% { 484 | -moz-transform: rotate(345deg); 485 | -moz-animation-timing-function: linear; 486 | } 487 | 30% { 488 | -moz-transform: rotate(455deg); 489 | -moz-animation-timing-function: ease-in-out; 490 | } 491 | 40% { 492 | -moz-transform: rotate(690deg); 493 | -moz-animation-timing-function: linear; 494 | } 495 | 60% { 496 | -moz-transform: rotate(815deg); 497 | opacity: 1; 498 | -moz-animation-timing-function: ease-out; 499 | } 500 | 75% { 501 | -moz-transform: rotate(965deg); 502 | -moz-animation-timing-function: ease-out; 503 | } 504 | 76% { 505 | opacity: 0; 506 | } 507 | 100% { 508 | opacity: 0; 509 | } 510 | } 511 | 512 | @keyframes loading { 513 | 0% { 514 | transform: rotate(225deg); 515 | opacity: 1; 516 | animation-timing-function: ease-out; 517 | } 518 | 8% { 519 | transform: rotate(345deg); 520 | animation-timing-function: linear; 521 | } 522 | 30% { 523 | transform: rotate(455deg); 524 | animation-timing-function: ease-in-out; 525 | } 526 | 40% { 527 | transform: rotate(690deg); 528 | animation-timing-function: linear; 529 | } 530 | 60% { 531 | transform: rotate(815deg); 532 | opacity: 1; 533 | animation-timing-function: ease-out; 534 | } 535 | 75% { 536 | transform: rotate(965deg); 537 | animation-timing-function: ease-out; 538 | } 539 | 76% { 540 | opacity: 0; 541 | } 542 | 100% { 543 | opacity: 0; 544 | } 545 | } 546 | 547 | 548 | 549 | /*prev_next*/ 550 | .video_nav{ 551 | position: absolute; 552 | top:160px; 553 | width: 30px; 554 | height: 51px; 555 | margin: 50px 0; 556 | cursor: pointer; 557 | .transition(all 0.2s ease); 558 | 559 | &::after{ 560 | content: ""; 561 | display: block; 562 | width: 2px; 563 | height: 2px; 564 | position: absolute; 565 | border-radius: 2px; 566 | top: 50%; 567 | left: 50%; 568 | margin: -1px 0 0 -1px; 569 | z-index: 2; 570 | background: rgba(255,255,255,1); 571 | box-shadow: 0 0 10px 5px rgba(255,255,255,0.5), 0 0 20px 10px rgba(255,255,255,0.5), 0 0 30px 15px rgba(255,255,255,0.4), 0 0 40px 20px rgba(255,255,255,0.3), 0 0 50px 25px rgba(255,255,255,0.3), 0 0 60px 30px rgba(255,255,255,0.3), 0 0 70px 35px rgba(255,255,255,0.3); 572 | } 573 | &:hover{ 574 | &::after{ 575 | opacity: 0; 576 | } 577 | } 578 | } 579 | .video_prev{ 580 | left:100px; 581 | background: url(../img/video_prev.png) no-repeat 0 0; 582 | } 583 | .video_next{ 584 | right:100px; 585 | background: url(../img/video_next.png) no-repeat 0 0; 586 | } 587 | // .video_next:hover:after{ 588 | // opacity: 0; 589 | // } 590 | // .video_next:after { 591 | // content: ""; 592 | // display: block; 593 | // width: 2px; 594 | // height: 2px; 595 | // position: absolute; 596 | // border-radius: 2px; 597 | // top: 50%; 598 | // left: 50%; 599 | // margin: -1px 0 0 -1px; 600 | // z-index: 2; 601 | // background: rgba(255,255,255,1); 602 | // box-shadow: 0 0 10px 5px rgba(255,255,255,0.5), 0 0 20px 10px rgba(255,255,255,0.5), 0 0 30px 15px rgba(255,255,255,0.4), 0 0 40px 20px rgba(255,255,255,0.3), 0 0 50px 25px rgba(255,255,255,0.3), 0 0 60px 30px rgba(255,255,255,0.3), 0 0 70px 35px rgba(255,255,255,0.3); 603 | // } 604 | 605 | // .video_prev:hover::after{ 606 | // opacity: 0; 607 | // } 608 | // .video_prev::after { 609 | // content: ""; 610 | // display: block; 611 | // width: 2px; 612 | // height: 2px; 613 | // position: absolute; 614 | // border-radius: 2px; 615 | // top: 50%; 616 | // left: 50%; 617 | // margin: -1px 0 0 -1px; 618 | // z-index: 2; 619 | // background: rgba(255, 255, 255, 1); 620 | // box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5), 0 0 20px 10px rgba(255, 255, 255, 0.5), 0 0 30px 15px rgba(255, 255, 255, 0.4), 0 0 40px 20px rgba(255, 255, 255, 0.3), 0 0 50px 25px rgba(255, 255, 255, 0.3), 0 0 60px 30px rgba(255, 255, 255, 0.3), 0 0 70px 35px rgba(255, 255, 255, 0.3); 621 | // } 622 | 623 | .overlay{ 624 | position: fixed; 625 | width: 100%; 626 | height: 100%; 627 | background: rgba(0, 0, 0, 0.8); 628 | top: 0; 629 | left: 0; 630 | z-index: 11119; 631 | display: none; 632 | } 633 | 634 | .mod-overlay{ 635 | .overlay{ 636 | display: block; 637 | } 638 | // .curtain{ 639 | // display: none; 640 | // } 641 | // .rope{ 642 | // display: none; 643 | // } 644 | } -------------------------------------------------------------------------------- /src/css/list.less: -------------------------------------------------------------------------------- 1 | @import "mod-layout"; 2 | 3 | body { 4 | background: #4f3722 url('../img/darkcurtain.jpg') repeat-x; 5 | overflow-x: hidden; 6 | } 7 | 8 | .header{ 9 | position: relative; 10 | width: 400px; 11 | color: #FFF; 12 | margin: 320px auto 0; 13 | text-align: center; 14 | z-index: 11112; 15 | font-family:"微软雅黑",Arial, Helvetica; 16 | 17 | span{ 18 | font-size: 24px; 19 | margin-bottom:10px; 20 | } 21 | 22 | img{ 23 | display: block; 24 | width: 80px; 25 | height: 150px; 26 | margin: 55px auto auto auto; 27 | } 28 | 29 | } 30 | .footer{ 31 | display: none; 32 | width: 100%; 33 | margin: 40px auto; 34 | clear: both; 35 | font-size: 14px; 36 | color: #979797; 37 | text-align: center; 38 | font-family: "微软雅黑"; 39 | a{ 40 | color: #979797; 41 | text-decoration: none; 42 | } 43 | } 44 | 45 | .curtain{ 46 | width: 50%; 47 | height: 560px; 48 | top: 0px; 49 | position: absolute; 50 | z-index: 11111; 51 | .transition(all 2s ease); 52 | 53 | img{ 54 | width: 100%; 55 | height: 100%; 56 | } 57 | } 58 | .leftcurtain{ 59 | left: 0px; 60 | } 61 | .rightcurtain{ 62 | width: 51%; 63 | right: 0px; 64 | } 65 | .rope{ 66 | width: 118px; 67 | height: 320px; 68 | position: absolute; 69 | top: -40px; 70 | right: 200px; 71 | z-index: 11111; 72 | .transition(all 1s ease); 73 | } 74 | 75 | .content{ 76 | display: none; 77 | width: 100%; 78 | height: auto; 79 | margin:0 auto; 80 | } 81 | 82 | .mod-open{ 83 | .curtain{ 84 | width: 60px; 85 | } 86 | .rope{ 87 | right: 10px; 88 | top: 0; 89 | } 90 | .header{ 91 | display: none; 92 | } 93 | .footer{ 94 | display: block; 95 | } 96 | .content{ 97 | display: block; 98 | } 99 | } 100 | 101 | 102 | .video_content { 103 | width: 1000px; 104 | height: 540px; 105 | margin: 0 auto; 106 | overflow: hidden; 107 | } 108 | 109 | .video_list{ 110 | width: 100%; 111 | height: 355px; 112 | margin-top: 40px; 113 | overflow: hidden; 114 | } 115 | 116 | 117 | 118 | /*----------------scroll----------------------------*/ 119 | ::-webkit-scrollbar { 120 | width: 10px; 121 | height: 10px; 122 | } 123 | ::-webkit-scrollbar-button:start:decrement, 124 | ::-webkit-scrollbar-button:end:increment { 125 | display: block; 126 | } 127 | ::-webkit-scrollbar-button:vertical:start:increment, 128 | ::-webkit-scrollbar-button:vertical:end:decrement { 129 | display: none; 130 | } 131 | ::-webkit-scrollbar-button:end:increment { 132 | background-color: #F1F1EF; 133 | } 134 | ::-webkit-scrollbar-button:start:decrement { 135 | background-color: #F1F1EF; 136 | } 137 | ::-webkit-scrollbar-track-piece:vertical:start { 138 | background-color: #F1F1EF; 139 | } 140 | ::-webkit-scrollbar-track-piece:vertical:end { 141 | background-color: #F1F1EF; 142 | } 143 | ::-webkit-scrollbar-thumb:vertical { 144 | width: 6px; 145 | margin: 0 auto; 146 | border-radius: 4px; 147 | background: rgba(0, 0, 0, 0.6); 148 | border-width: 8 0 8 0; 149 | } 150 | 151 | /*Webkit,Opera9.5+,Ie9+*/ 152 | ::selection { 153 | background: #99CC00; 154 | color:#FFF; 155 | } 156 | /*Mozilla Firefox*/ 157 | ::-moz-selection { 158 | background: #99CC00; 159 | color: #FFF; 160 | } 161 | 162 | 163 | 164 | .artist_l { 165 | margin: 0 auto; 166 | width: 960px; 167 | position: relative; 168 | height: 354px; 169 | list-style:none; 170 | 171 | li{ 172 | .flex-center(); 173 | } 174 | img{ 175 | width: 100%; 176 | } 177 | } 178 | .artist_l .a1 { 179 | left: 0px; 180 | position: absolute; 181 | top: 0px; 182 | width: 230px; 183 | } 184 | .artist_l .a2 { 185 | left: 240px; 186 | overflow: hidden; 187 | width: 110px; 188 | position: absolute; 189 | top: 0px; 190 | height: 110px; 191 | } 192 | .artist_l .a3 { 193 | left: 240px; 194 | overflow: hidden; 195 | width: 110px; 196 | position: absolute; 197 | top: 0px; 198 | height: 110px; 199 | } 200 | .artist_l .a4 { 201 | left: 240px; 202 | overflow: hidden; 203 | width: 110px; 204 | position: absolute; 205 | top: 0px; 206 | height: 110px; 207 | } 208 | .artist_l .a5 { 209 | left: 240px; 210 | overflow: hidden; 211 | width: 110px; 212 | position: absolute; 213 | top: 0px; 214 | height: 110px; 215 | } 216 | .artist_l .a6 { 217 | left: 240px; 218 | overflow: hidden; 219 | width: 110px; 220 | position: absolute; 221 | top: 0px; 222 | height: 110px; 223 | } 224 | .artist_l .a7 { 225 | left: 240px; 226 | overflow: hidden; 227 | width: 110px; 228 | position: absolute; 229 | top: 0px; 230 | height: 110px; 231 | } 232 | .artist_l .a8 { 233 | left: 240px; 234 | overflow: hidden; 235 | width: 110px; 236 | position: absolute; 237 | top: 0px; 238 | height: 110px; 239 | } 240 | .artist_l .a9 { 241 | left: 240px; 242 | overflow: hidden; 243 | width: 110px; 244 | position: absolute; 245 | top: 0px; 246 | height: 110px; 247 | } 248 | .artist_l .a10 { 249 | left: 240px; 250 | overflow: hidden; 251 | width: 110px; 252 | position: absolute; 253 | top: 0px; 254 | height: 110px; 255 | } 256 | .artist_l .a11 { 257 | left: 240px; 258 | overflow: hidden; 259 | width: 110px; 260 | position: absolute; 261 | top: 0px; 262 | height: 110px; 263 | } 264 | .artist_l .a12 { 265 | left: 240px; 266 | overflow: hidden; 267 | width: 110px; 268 | position: absolute; 269 | top: 0px; 270 | height: 110px; 271 | } 272 | .artist_l .a3 a { 273 | padding-right: 10px; 274 | padding-left: 10px; 275 | font-size: 12px; 276 | padding-bottom: 10px; 277 | overflow: hidden; 278 | width: 90px; 279 | padding-top: 10px; 280 | height: 90px; 281 | } 282 | .artist_l .a4 a { 283 | padding-right: 10px; 284 | padding-left: 10px; 285 | font-size: 12px; 286 | padding-bottom: 10px; 287 | overflow: hidden; 288 | width: 90px; 289 | padding-top: 10px; 290 | height: 90px; 291 | } 292 | .artist_l .a5 a { 293 | padding: 10px; 294 | font-size: 12px; 295 | overflow: hidden; 296 | width: 90px; 297 | height: 90px; 298 | } 299 | .artist_l .a6 a { 300 | padding: 10px; 301 | font-size: 12px; 302 | overflow: hidden; 303 | width: 90px; 304 | height: 90px; 305 | } 306 | .artist_l .a8 a { 307 | padding: 10px; 308 | font-size: 12px; 309 | overflow: hidden; 310 | width: 90px; 311 | height: 90px; 312 | } 313 | .artist_l .a7 a { 314 | padding-right: 10px; 315 | padding-left: 10px; 316 | font-size: 12px; 317 | padding-bottom: 10px; 318 | overflow: hidden; 319 | width: 90px; 320 | padding-top: 10px; 321 | height: 90px; 322 | } 323 | .artist_l .a10 a { 324 | padding-right: 10px; 325 | padding-left: 10px; 326 | font-size: 12px; 327 | padding-bottom: 10px; 328 | overflow: hidden; 329 | width: 90px; 330 | padding-top: 10px; 331 | height: 90px; 332 | } 333 | .artist_l .a11 a { 334 | padding-right: 10px; 335 | padding-left: 10px; 336 | 337 | font-size: 12px; 338 | padding-bottom: 10px; 339 | overflow: hidden; 340 | width: 90px; 341 | padding-top: 10px; 342 | height: 90px; 343 | } 344 | .artist_l .a1 a { 345 | top: -357px; 346 | } 347 | .artist_l .a2 a { 348 | font-size: 18px; 349 | overflow: hidden; 350 | top: -232px; 351 | } 352 | .artist_l .a12 a { 353 | font-size: 18px; 354 | overflow: hidden; 355 | top: -232px; 356 | } 357 | .artist_l .a9 a { 358 | font-size: 14px; 359 | overflow: hidden; 360 | } 361 | .artist_l .a2 { 362 | width: 232px; 363 | height: 232px; 364 | } 365 | .artist_l .a3 { 366 | left: 240px; 367 | top: 244px; 368 | } 369 | .artist_l .a4 { 370 | left: 362px; 371 | top: 244px; 372 | } 373 | .artist_l .a5 { 374 | left: 482px; 375 | top: 0px; 376 | } 377 | .artist_l .a6 { 378 | left: 604px; 379 | top: 0px; 380 | } 381 | .artist_l .a7 { 382 | left: 482px; 383 | top: 120px; 384 | } 385 | .artist_l .a8 { 386 | left: 604px; 387 | top: 120px; 388 | } 389 | .artist_l .a9 { 390 | left: 482px; 391 | width: 232px; 392 | top: 244px; 393 | } 394 | .artist_l .a10 { 395 | left: 726px; 396 | top: 0px; 397 | } 398 | .artist_l .a11 { 399 | left: 848px; 400 | top: 0px; 401 | } 402 | .artist_l .a12 { 403 | left: 726px; 404 | width: 232px; 405 | top: 120px; 406 | height: 232px; 407 | } 408 | .artist_l a { 409 | position: absolute; 410 | top: -110px; 411 | left: 0px; 412 | width: 100%; 413 | height: 100%; 414 | opacity: 0.9; 415 | background: #99CC00; 416 | color: #fff; 417 | font-family: 'Microsoft YaHei'; 418 | text-decoration: none; 419 | .transition(all 0.25s linear); 420 | 421 | div{ 422 | width: 80%; 423 | .transfrom-center(); 424 | } 425 | } 426 | .artist_l li:hover{ 427 | a{ 428 | top: 0; 429 | } 430 | } 431 | .artist_l a:hover { 432 | color: #fff; 433 | } 434 | .artist_l a strong { 435 | line-height: 2em; 436 | color:whitesmoke; 437 | } 438 | 439 | 440 | 441 | 442 | 443 | 444 | /*截图部分*/ 445 | .img_select{ 446 | width: 1218px; 447 | height: 480px; 448 | position: absolute; 449 | top:0; 450 | left: 0; 451 | background: #000; 452 | z-index: 10002; 453 | display: none; 454 | } 455 | .img_select .img_output{ 456 | width: 1218px; 457 | height: 480px; 458 | display: table-cell;/*图片容器以表格的单元格形式显示*/ 459 | text-align: center; /* 实现水平居中 */ 460 | vertical-align: middle; /*实现垂直居中*/ 461 | } 462 | .img_select .img_output img{ 463 | box-shadow:0 0 10px #FFF; 464 | } 465 | .img_save{ 466 | position: absolute; 467 | right:40px; 468 | bottom:100px; 469 | } 470 | .img_cancel{ 471 | position: absolute; 472 | right:40px; 473 | bottom:50px; 474 | } 475 | .img_cancel a,.img_save a{ 476 | color:#FFF; 477 | font-family: "微软雅黑"; 478 | font-size: 14px; 479 | line-height: 25px; 480 | text-indent: 10px; 481 | text-decoration: none; 482 | } 483 | .img_save i{ 484 | float: left; 485 | width: 25px; 486 | height: 25px; 487 | background: url(../img/save.png) 0 0px; 488 | } 489 | .img_cancel i{ 490 | float: left; 491 | width: 25px; 492 | height: 25px; 493 | background: url(../img/save.png) 0 -25px; 494 | } -------------------------------------------------------------------------------- /src/css/mod-animated.less: -------------------------------------------------------------------------------- 1 | .animated { 2 | -webkit-animation-duration: 1s; 3 | animation-duration: 1s; 4 | -webkit-animation-fill-mode: both; 5 | animation-fill-mode: both; 6 | } 7 | 8 | .animated.infinite { 9 | -webkit-animation-iteration-count: infinite; 10 | animation-iteration-count: infinite; 11 | } 12 | 13 | .short { 14 | -webkit-animation-duration: 0.6s; 15 | animation-duration: 0.6s; 16 | } 17 | .animated.hinge { 18 | -webkit-animation-duration: 2s; 19 | animation-duration: 2s; 20 | } 21 | 22 | @-webkit-keyframes fadeIn { 23 | from { 24 | opacity: 0; 25 | } 26 | 27 | to { 28 | opacity: 1; 29 | } 30 | } 31 | 32 | @keyframes fadeIn { 33 | from { 34 | opacity: 0; 35 | } 36 | 37 | to { 38 | opacity: 1; 39 | } 40 | } 41 | 42 | .fadeIn { 43 | -webkit-animation-name: fadeIn; 44 | animation-name: fadeIn; 45 | } 46 | 47 | @-webkit-keyframes fadeInDown { 48 | from { 49 | opacity: 0; 50 | -webkit-transform: translate3d(0, -100%, 0); 51 | transform: translate3d(0, -100%, 0); 52 | } 53 | 54 | to { 55 | opacity: 1; 56 | -webkit-transform: none; 57 | transform: none; 58 | } 59 | } 60 | 61 | @keyframes fadeInDown { 62 | from { 63 | opacity: 0; 64 | -webkit-transform: translate3d(0, -100%, 0); 65 | transform: translate3d(0, -100%, 0); 66 | } 67 | 68 | to { 69 | opacity: 1; 70 | -webkit-transform: none; 71 | transform: none; 72 | } 73 | } 74 | 75 | .fadeInDown { 76 | -webkit-animation-name: fadeInDown; 77 | animation-name: fadeInDown; 78 | } 79 | 80 | @-webkit-keyframes fadeInUp { 81 | from { 82 | opacity: 0; 83 | -webkit-transform: translate3d(0, 100%, 0); 84 | transform: translate3d(0, 100%, 0); 85 | } 86 | 87 | to { 88 | opacity: 1; 89 | -webkit-transform: none; 90 | transform: none; 91 | } 92 | } 93 | 94 | @keyframes fadeInUp { 95 | from { 96 | opacity: 0; 97 | -webkit-transform: translate3d(0, 100%, 0); 98 | transform: translate3d(0, 100%, 0); 99 | } 100 | 101 | to { 102 | opacity: 1; 103 | -webkit-transform: none; 104 | transform: none; 105 | } 106 | } 107 | 108 | .fadeInUp { 109 | -webkit-animation-name: fadeInUp; 110 | animation-name: fadeInUp; 111 | } 112 | 113 | @-webkit-keyframes fadeOut { 114 | from { 115 | opacity: 1; 116 | } 117 | 118 | to { 119 | opacity: 0; 120 | } 121 | } 122 | 123 | @keyframes fadeOut { 124 | from { 125 | opacity: 1; 126 | } 127 | 128 | to { 129 | opacity: 0; 130 | } 131 | } 132 | 133 | .fadeOut { 134 | -webkit-animation-name: fadeOut; 135 | animation-name: fadeOut; 136 | } 137 | 138 | @-webkit-keyframes fadeOutDown { 139 | from { 140 | opacity: 1; 141 | } 142 | 143 | to { 144 | opacity: 0; 145 | -webkit-transform: translate3d(0, 100%, 0); 146 | transform: translate3d(0, 100%, 0); 147 | } 148 | } 149 | 150 | @keyframes fadeOutDown { 151 | from { 152 | opacity: 1; 153 | } 154 | 155 | to { 156 | opacity: 0; 157 | -webkit-transform: translate3d(0, 100%, 0); 158 | transform: translate3d(0, 100%, 0); 159 | } 160 | } 161 | 162 | .fadeOutDown { 163 | -webkit-animation-name: fadeOutDown; 164 | animation-name: fadeOutDown; 165 | } 166 | 167 | @-webkit-keyframes fadeOutUp { 168 | from { 169 | opacity: 1; 170 | } 171 | 172 | to { 173 | opacity: 0; 174 | -webkit-transform: translate3d(0, -100%, 0); 175 | transform: translate3d(0, -100%, 0); 176 | } 177 | } 178 | 179 | @keyframes fadeOutUp { 180 | from { 181 | opacity: 1; 182 | } 183 | 184 | to { 185 | opacity: 0; 186 | -webkit-transform: translate3d(0, -100%, 0); 187 | transform: translate3d(0, -100%, 0); 188 | } 189 | } 190 | 191 | .fadeOutUp { 192 | -webkit-animation-name: fadeOutUp; 193 | animation-name: fadeOutUp; 194 | } 195 | 196 | @-webkit-keyframes zoomIn { 197 | from { 198 | opacity: 0; 199 | -webkit-transform: scale3d(.3, .3, .3); 200 | transform: scale3d(.3, .3, .3); 201 | } 202 | 203 | 50% { 204 | opacity: 1; 205 | } 206 | } 207 | 208 | @keyframes zoomIn { 209 | from { 210 | opacity: 0; 211 | -webkit-transform: scale3d(.3, .3, .3); 212 | transform: scale3d(.3, .3, .3); 213 | } 214 | 215 | 50% { 216 | opacity: 1; 217 | } 218 | } 219 | 220 | .zoomIn { 221 | -webkit-animation-name: zoomIn; 222 | animation-name: zoomIn; 223 | } 224 | 225 | @keyframes zoomOut { 226 | from { 227 | opacity: 1; 228 | } 229 | 230 | 50% { 231 | opacity: 0; 232 | -webkit-transform: scale3d(.3, .3, .3); 233 | transform: scale3d(.3, .3, .3); 234 | } 235 | 236 | to { 237 | opacity: 0; 238 | } 239 | } 240 | 241 | .zoomOut { 242 | -webkit-animation-name: zoomOut; 243 | animation-name: zoomOut; 244 | } 245 | 246 | @-webkit-keyframes fadeInUpBig { 247 | from { 248 | opacity: 0; 249 | -webkit-transform: translate3d(0, 2000px, 0); 250 | transform: translate3d(0, 2000px, 0); 251 | } 252 | 253 | to { 254 | opacity: 1; 255 | -webkit-transform: none; 256 | transform: none; 257 | } 258 | } 259 | 260 | @keyframes fadeInUpBig { 261 | from { 262 | opacity: 0; 263 | -webkit-transform: translate3d(0, 2000px, 0); 264 | transform: translate3d(0, 2000px, 0); 265 | } 266 | 267 | to { 268 | opacity: 1; 269 | -webkit-transform: none; 270 | transform: none; 271 | } 272 | } 273 | 274 | .fadeInUpBig { 275 | -webkit-animation-name: fadeInUpBig; 276 | animation-name: fadeInUpBig; 277 | } -------------------------------------------------------------------------------- /src/css/mod-layout.less: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | img{ 6 | border: none; 7 | } 8 | 9 | .ui-d-n{ 10 | display: none; 11 | } 12 | .ui-po-r{ 13 | position: relative; 14 | } 15 | .ui-po-a{ 16 | position: absolute; 17 | } 18 | 19 | .transition(@transition) { 20 | -webkit-transition:@transition; 21 | -moz-transition:@transition; 22 | -o-transition:@transition; 23 | transition:@transition; 24 | } 25 | 26 | .flex-center { 27 | -webkit-box-pack: center; 28 | -ms-flex-pack: center; 29 | -webkit-justify-content: center; 30 | justify-content: center; 31 | -webkit-box-align: center; 32 | -ms-flex-align: center; 33 | -webkit-align-items: center; 34 | align-items: center; 35 | } 36 | .transfrom-center{ 37 | position: absolute; 38 | top: 50%; 39 | left: 50%; 40 | -webkit-transform: translate(-50%, -50%); 41 | transform: translate(-50%, -50%); 42 | } -------------------------------------------------------------------------------- /src/css/style-index.less: -------------------------------------------------------------------------------- 1 | @import "common"; 2 | @import "mod-animated"; 3 | @import "list"; -------------------------------------------------------------------------------- /src/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Video Play - 轩枫阁 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | MV Show 17 | 18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 |
26 |
27 | 28 | 29 | 30 |
31 |
32 |
保存
33 |
返回
34 |
35 | 36 |
Taylor Swift: 《Love Story》
37 | 38 |
39 |
40 |
41 | 42 | 43 | 44 | 45 |
46 |
47 | 48 |
49 |
50 |
51 |
52 |
53 | 54 |
55 |
56 |
57 | / 58 | 59 |
60 | 61 |
62 |
63 |
64 | 65 |
66 | 67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | 76 | 77 |
78 |
79 | 80 | 81 |
82 |
83 |
84 | 85 |
86 |
87 |
88 | 89 | 90 | 91 |
92 | 93 |
94 | 95 | 96 | 97 |
Copyright © 2016 轩枫阁
98 | 99 | 109 | 110 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /src/html/list.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/bg.jpg -------------------------------------------------------------------------------- /src/img/c.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/c.gif -------------------------------------------------------------------------------- /src/img/controls-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/controls-bg.png -------------------------------------------------------------------------------- /src/img/cover/1987.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/cover/1987.jpg -------------------------------------------------------------------------------- /src/img/cover/fk.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/cover/fk.jpg -------------------------------------------------------------------------------- /src/img/cover/ku.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/cover/ku.jpg -------------------------------------------------------------------------------- /src/img/cover/lost.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/cover/lost.jpg -------------------------------------------------------------------------------- /src/img/cover/nzfnsm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/cover/nzfnsm.jpg -------------------------------------------------------------------------------- /src/img/cover/qwdfj.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/cover/qwdfj.jpg -------------------------------------------------------------------------------- /src/img/cover/sky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/cover/sky.jpg -------------------------------------------------------------------------------- /src/img/cover/sxdsx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/cover/sxdsx.jpg -------------------------------------------------------------------------------- /src/img/cover/up.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/cover/up.jpg -------------------------------------------------------------------------------- /src/img/cover/whxn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/cover/whxn.jpg -------------------------------------------------------------------------------- /src/img/cover/yc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/cover/yc.jpg -------------------------------------------------------------------------------- /src/img/cover/young.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/cover/young.jpg -------------------------------------------------------------------------------- /src/img/dancer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/dancer.png -------------------------------------------------------------------------------- /src/img/darkcurtain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/darkcurtain.jpg -------------------------------------------------------------------------------- /src/img/frontcurtain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/frontcurtain.jpg -------------------------------------------------------------------------------- /src/img/full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/full.png -------------------------------------------------------------------------------- /src/img/handle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/handle.png -------------------------------------------------------------------------------- /src/img/loop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/loop.png -------------------------------------------------------------------------------- /src/img/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/play.png -------------------------------------------------------------------------------- /src/img/play_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/play_hover.png -------------------------------------------------------------------------------- /src/img/rope.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/rope.png -------------------------------------------------------------------------------- /src/img/slider-arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/slider-arrows.png -------------------------------------------------------------------------------- /src/img/start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/start.png -------------------------------------------------------------------------------- /src/img/video_next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/video_next.png -------------------------------------------------------------------------------- /src/img/video_prev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/video_prev.png -------------------------------------------------------------------------------- /src/img/volume.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/img/volume.png -------------------------------------------------------------------------------- /src/js/template.js: -------------------------------------------------------------------------------- 1 | /*!art-template - Template Engine | http://aui.github.com/artTemplate/*/ 2 | !function(){function a(a){return a.replace(t,"").replace(u,",").replace(v,"").replace(w,"").replace(x,"").split(y)}function b(a){return"'"+a.replace(/('|\\)/g,"\\$1").replace(/\r/g,"\\r").replace(/\n/g,"\\n")+"'"}function c(c,d){function e(a){return m+=a.split(/\n/).length-1,k&&(a=a.replace(/\s+/g," ").replace(//g,"")),a&&(a=s[1]+b(a)+s[2]+"\n"),a}function f(b){var c=m;if(j?b=j(b,d):g&&(b=b.replace(/\n/g,function(){return m++,"$line="+m+";"})),0===b.indexOf("=")){var e=l&&!/^=[=#]/.test(b);if(b=b.replace(/^=[=#]?|[\s;]*$/g,""),e){var f=b.replace(/\s*\([^\)]+\)/,"");n[f]||/^(include|print)$/.test(f)||(b="$escape("+b+")")}else b="$string("+b+")";b=s[1]+b+s[2]}return g&&(b="$line="+c+";"+b),r(a(b),function(a){if(a&&!p[a]){var b;b="print"===a?u:"include"===a?v:n[a]?"$utils."+a:o[a]?"$helpers."+a:"$data."+a,w+=a+"="+b+",",p[a]=!0}}),b+"\n"}var g=d.debug,h=d.openTag,i=d.closeTag,j=d.parser,k=d.compress,l=d.escape,m=1,p={$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1},q="".trim,s=q?["$out='';","$out+=",";","$out"]:["$out=[];","$out.push(",");","$out.join('')"],t=q?"$out+=text;return $out;":"$out.push(text);",u="function(){var text=''.concat.apply('',arguments);"+t+"}",v="function(filename,data){data=data||$data;var text=$utils.$include(filename,data,$filename);"+t+"}",w="'use strict';var $utils=this,$helpers=$utils.$helpers,"+(g?"$line=0,":""),x=s[0],y="return new String("+s[3]+");";r(c.split(h),function(a){a=a.split(i);var b=a[0],c=a[1];1===a.length?x+=e(b):(x+=f(b),c&&(x+=e(c)))});var z=w+x+y;g&&(z="try{"+z+"}catch(e){throw {filename:$filename,name:'Render Error',message:e.message,line:$line,source:"+b(c)+".split(/\\n/)[$line-1].replace(/^\\s+/,'')};}");try{var A=new Function("$data","$filename",z);return A.prototype=n,A}catch(B){throw B.temp="function anonymous($data,$filename) {"+z+"}",B}}var d=function(a,b){return"string"==typeof b?q(b,{filename:a}):g(a,b)};d.version="3.0.0",d.config=function(a,b){e[a]=b};var e=d.defaults={openTag:"<%",closeTag:"%>",escape:!0,cache:!0,compress:!1,parser:null},f=d.cache={};d.render=function(a,b){return q(a,b)};var g=d.renderFile=function(a,b){var c=d.get(a)||p({filename:a,name:"Render Error",message:"Template not found"});return b?c(b):c};d.get=function(a){var b;if(f[a])b=f[a];else if("object"==typeof document){var c=document.getElementById(a);if(c){var d=(c.value||c.innerHTML).replace(/^\s*|\s*$/g,"");b=q(d,{filename:a})}}return b};var h=function(a,b){return"string"!=typeof a&&(b=typeof a,"number"===b?a+="":a="function"===b?h(a.call(a)):""),a},i={"<":"<",">":">",'"':""","'":"'","&":"&"},j=function(a){return i[a]},k=function(a){return h(a).replace(/&(?![\w#]+;)|[<>"']/g,j)},l=Array.isArray||function(a){return"[object Array]"==={}.toString.call(a)},m=function(a,b){var c,d;if(l(a))for(c=0,d=a.length;d>c;c++)b.call(a,a[c],c,a);else for(c in a)b.call(a,a[c],c)},n=d.utils={$helpers:{},$include:g,$string:h,$escape:k,$each:m};d.helper=function(a,b){o[a]=b};var o=d.helpers=n.$helpers;d.onerror=function(a){var b="Template Error\n\n";for(var c in a)b+="<"+c+">\n"+a[c]+"\n\n";"object"==typeof console&&console.error(b)};var p=function(a){return d.onerror(a),function(){return"{Template Error}"}},q=d.compile=function(a,b){function d(c){try{return new i(c,h)+""}catch(d){return b.debug?p(d)():(b.debug=!0,q(a,b)(c))}}b=b||{};for(var g in e)void 0===b[g]&&(b[g]=e[g]);var h=b.filename;try{var i=c(a,b)}catch(j){return j.filename=h||"anonymous",j.name="Syntax Error",p(j)}return d.prototype=i.prototype,d.toString=function(){return i.toString()},h&&b.cache&&(f[h]=d),d},r=n.$each,s="break,case,catch,continue,debugger,default,delete,do,else,false,finally,for,function,if,in,instanceof,new,null,return,switch,this,throw,true,try,typeof,var,void,while,with,abstract,boolean,byte,char,class,const,double,enum,export,extends,final,float,goto,implements,import,int,interface,long,native,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile,arguments,let,yield,undefined",t=/\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|\s*\.\s*[$\w\.]+/g,u=/[^\w$]+/g,v=new RegExp(["\\b"+s.replace(/,/g,"\\b|\\b")+"\\b"].join("|"),"g"),w=/^\d[^,]*|,\d[^,]*/g,x=/^,+|,+$/g,y=/^$|,+/;e.openTag="{{",e.closeTag="}}";var z=function(a,b){var c=b.split(":"),d=c.shift(),e=c.join(":")||"";return e&&(e=", "+e),"$helpers."+d+"("+a+e+")"};e.parser=function(a){a=a.replace(/^\s/,"");var b=a.split(" "),c=b.shift(),e=b.join(" ");switch(c){case"if":a="if("+e+"){";break;case"else":b="if"===b.shift()?" if("+b.join(" ")+")":"",a="}else"+b+"{";break;case"/if":a="}";break;case"each":var f=b[0]||"$data",g=b[1]||"as",h=b[2]||"$value",i=b[3]||"$index",j=h+","+i;"as"!==g&&(f="[]"),a="$each("+f+",function("+j+"){";break;case"/each":a="});";break;case"echo":a="print("+e+");";break;case"print":case"include":a=c+"("+b.join(",")+");";break;default:if(/^\s*\|\s*[\w\$]/.test(e)){var k=!0;0===a.indexOf("#")&&(a=a.substr(1),k=!1);for(var l=0,m=a.split("|"),n=m.length,o=m[l++];n>l;l++)o=z(o,m[l]);a=(k?"=":"=#")+o}else a=d.helpers[c]?"=#"+c+"("+b.join(",")+");":"="+a}return a},"function"==typeof define?define(function(){return d}):"undefined"!=typeof exports?module.exports=d:this.template=d}(); -------------------------------------------------------------------------------- /src/js/video-play.js: -------------------------------------------------------------------------------- 1 | ;(function(root, factory) { 2 | if (typeof module !== 'undefined' && module.exports) { 3 | module.exports = factory(); 4 | } else if (typeof define === 'function' && define.amd) { 5 | define(factory); 6 | } else { 7 | root.Video = factory.call(root); 8 | } 9 | }(this, function() { 10 | 'use strict'; 11 | 12 | // 视频播放控制 13 | function Video(options){ 14 | this.options = $.extend({ 15 | video: $('#video'), 16 | loadedmetadata: $.noop, 17 | canplay: $.noop, 18 | canplaythrough: $.noop, 19 | seeking: $.noop, 20 | ended: $.noop, 21 | seeked: $.noop, 22 | waiting: $.noop, 23 | }, options); 24 | 25 | } 26 | 27 | Video.prototype = { 28 | init: function(options){ 29 | this.video = this.options.video[0]; 30 | this.completeloaded = false; 31 | 32 | options.src && $(this.video).attr('src', options.src); 33 | options.poster && $(this.video).attr('poster', options.poster); 34 | this.listenEvents(); 35 | }, 36 | 37 | listenEvents: function(){ 38 | var self = this; 39 | 40 | // 视频加载，可播放前的设置 41 | $(this.video).on('loadedmetadata', this.options.loadedmetadata); 42 | 43 | // 视频能播放 44 | $(this.video).on('canplay', this.options.canplay); 45 | 46 | // 解决chrome缓存流 47 | $(this.video).on('canplaythrough', function(){ 48 | self.completeloaded = true; 49 | self.options.canplaythrough(); 50 | }); 51 | 52 | // 视频缓冲加载 53 | $(this.video).on('seeking', function(){ 54 | if(self.completeloaded){ 55 | self.options.seeking(); 56 | } 57 | }); 58 | 59 | // 更新视频播放时间 60 | $(this.video).on('timeupdate', function(){ 61 | self.options.timeupdate(self.video.currentTime, self.video.duration); 62 | }); 63 | 64 | // 视频播放完毕 65 | $(this.video).on('ended', this.options.ended); 66 | 67 | // 视频加载完成 68 | $(this.video).on('seeked', this.options.seeked); 69 | 70 | // 视频加载等待 71 | $(this.video).on('waiting', this.options.seeked); 72 | }, 73 | 74 | play: function(){ 75 | this.video.play(); 76 | }, 77 | 78 | pause: function(){ 79 | this.video.pause(); 80 | }, 81 | 82 | setCurrentTime: function(time){ 83 | this.video.currentTime = time; 84 | }, 85 | 86 | // 调节音量 87 | updateVolume: function(volume){ 88 | this.video.volume = volume; 89 | }, 90 | 91 | // 全屏 92 | fullScreen: function(){ 93 | if($.isFunction(this.video.webkitEnterFullscreen)){ 94 | this.video.webkitEnterFullScreen(); 95 | }else if($.isFunction(this.video.mozRequestFullScreen)){ 96 | this.video.mozRequestFullScreen(); 97 | }else{ 98 | alert("浏览器不支持全屏"); 99 | } 100 | }, 101 | 102 | // 静音 103 | switchMuted: function(options){ 104 | this.video.muted = options.muted || !this.video.muted; 105 | if(this.video.muted){ 106 | options.off && options.off(this.video.volume); 107 | }else{ 108 | options.on && options.on(this.video.volume); 109 | } 110 | }, 111 | 112 | // 获取视频总播放时间 113 | getDuration: function(){ 114 | return this.video.duration || 0; 115 | }, 116 | 117 | // 获取缓冲进度 118 | getBuffered: function(){ 119 | return this.video.buffered.end(0); 120 | }, 121 | 122 | // 是否正在播放 123 | isPlaying: function(){ 124 | return !this.video.paused && !this.video.ended; 125 | }, 126 | 127 | getvideo: function(){ 128 | return this.video; 129 | } 130 | 131 | } 132 | 133 | return Video; 134 | })); 135 | -------------------------------------------------------------------------------- /src/js/video-ui.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | 3 | var $body = $('body'), 4 | $win = $(window), 5 | $doc = $(document); 6 | 7 | // 视频列表 8 | var artlist = [ 9 | { 10 | id: 'fk', 11 | name: '再不疯狂我们就老了', 12 | artist: '李宇春' 13 | }, { 14 | id: 'yc', 15 | name: '洋葱', 16 | artist: 'TFBOYS' 17 | }, { 18 | id: 'sxdsx', 19 | name: '剩下的盛夏', 20 | artist: 'TFBOYS' 21 | }, { 22 | id: 'ku', 23 | name: '李宇春', 24 | artist: '酷' 25 | }, { 26 | id: 'whxn', 27 | name: '我好想你', 28 | artist: '苏打绿' 29 | }, { 30 | id: 'young', 31 | name: '样（Young）', 32 | artist: 'TFBOYS' 33 | }, { 34 | id: 'sky', 35 | name: 'A Sky Full Of Stars', 36 | artist: 'Coldplay' 37 | }, { 38 | id: '1987', 39 | name: '1987我不知会遇见你', 40 | artist: 'Chris Lee' 41 | }, { 42 | id: 'qwdfj', 43 | name: '墙外的风景', 44 | artist: '苏打绿', 45 | }, { 46 | id: 'lost', 47 | name: 'Lost Stars', 48 | artist: 'Maroon5' 49 | }, { 50 | id: 'nzfnsm', 51 | name: '你在烦恼什么', 52 | artist: '苏打绿' 53 | }, { 54 | id: 'up', 55 | name: 'Up & Up', 56 | artist: 'Coldplay' 57 | } 58 | ]; 59 | 60 | var $loading = $('.loading'); 61 | var videoPlayer = new Video({ 62 | loadedmetadata: function(){ 63 | // 设置视频的时间属性 64 | $(".current_time").text(timeFormat(0)); 65 | $(".duration_time").text(timeFormat(videoPlayer.getDuration())); 66 | updateVolume(0, 0.7); 67 | 68 | // 设置缓冲条 69 | updateBuffer(); 70 | }, 71 | 72 | canplay: function(){ 73 | $loading.hide(); 74 | }, 75 | 76 | seeking: function(){ 77 | $loading.show(); 78 | }, 79 | 80 | waiting: function(){ 81 | $loading.show(); 82 | }, 83 | 84 | timeupdate: function(currentTime, duration){ 85 | var percentage = 100 * currentTime / duration; 86 | $('.timeBar').css('width', percentage + '%'); 87 | $(".timeHandle").css('left', currentTime / duration * $progress.width() - 8); 88 | $('.current_time').text(timeFormat(currentTime)); 89 | }, 90 | 91 | ended: function(){ 92 | video.pause(); 93 | $body.removeClass('mod-play').addClass('mod-pause'); 94 | }, 95 | }); 96 | initVideo('fk'); 97 | 98 | // 初始化某视频 99 | function initVideo(id){ 100 | var art = {}, 101 | vindex = 0; 102 | for(var index in artlist){ 103 | if(artlist[index].id == id){ 104 | art = artlist[index]; 105 | vindex = index; 106 | break; 107 | } 108 | } 109 | 110 | videoPlayer.init({ 111 | src: 'http://ob8l4jfs8.bkt.clouddn.com/video/media/' + id + '.mp4', 112 | poster: 'http://ob8l4jfs8.bkt.clouddn.com/video/media/' + id + '.jpg', 113 | }); 114 | 115 | showVideoNav(vindex); 116 | $body.removeClass('mod-play').addClass('mod-pause'); 117 | $('.js_caption').data('index', vindex).text(art.artist + ': 《' + art.name + '》'); 118 | } 119 | 120 | // 显示视频的缓冲进度条 121 | var bufferTimer = null; 122 | function updateBuffer(){ 123 | var currentBuffer = videoPlayer.getBuffered(); 124 | var duration = videoPlayer.getDuration(); 125 | var percentage = 100 * currentBuffer / duration; 126 | $(".bufferBar").css("width", percentage + "%"); 127 | // console.log('buffer ' + percentage); 128 | if(currentBuffer < duration){ 129 | bufferTimer && clearTimeout(bufferTimer); 130 | bufferTimer = setTimeout(updateBuffer, 500); 131 | } 132 | }; 133 | 134 | // 播放/停止 135 | $('.btnPlay').on('click', function(){ 136 | if(videoPlayer.isPlaying()){ 137 | videoPlayer.pause(); 138 | $body.removeClass('mod-play').addClass('mod-pause'); 139 | }else{ 140 | videoPlayer.play(); 141 | $body.removeClass('mod-pause').addClass('mod-play'); 142 | } 143 | }); 144 | 145 | // 全屏按钮 146 | $(".btnFS").on('click',function(){ 147 | videoPlayer.fullScreen(); 148 | }); 149 | 150 | // 开关灯按钮 151 | $(".btnLight").click(function(){ 152 | $(this).toggleClass("lighton"); 153 | $body.toggleClass("mod-overlay"); 154 | }); 155 | 156 | // 声音按钮-静音 157 | $(".sound").click(function(){ 158 | $(this).toggleClass("muted"); 159 | var $volumeBar = $(".volumeBar"); 160 | videoPlayer.switchMuted({ 161 | on: function(volume){ 162 | $volumeBar.css("height", volume * 100 + "%"); 163 | }, 164 | off: function(){ 165 | $volumeBar.css("height", 0); 166 | } 167 | }); 168 | }); 169 | 170 | // 进度条 171 | var progressDrag = false; 172 | var $progress = $('.progress'); 173 | $('.progress, .timeHandle').on('mousedown', function(event){ 174 | if(event.which == 1){ 175 | progressDrag = true; 176 | updatebar(event.pageX); 177 | } 178 | return false; 179 | }); 180 | 181 | $doc.on('mousemove', function(event){ 182 | if(progressDrag){ 183 | updatebar(event.pageX); 184 | return false; 185 | } 186 | }); 187 | 188 | $doc.on('mouseup', function(event){ 189 | if(progressDrag){ 190 | progressDrag = false; 191 | updatebar(event.pageX); 192 | return false; 193 | } 194 | }); 195 | 196 | // 更新进度条 197 | function updatebar(pageX){ 198 | var duration = videoPlayer.getDuration(); 199 | var position = pageX - $progress.offset().left; 200 | var percentage = 100 * position / $progress.width(); 201 | 202 | if(percentage > 100){ 203 | percentage = 100; 204 | } 205 | if(percentage < 0){ 206 | percentage = 0; 207 | } 208 | 209 | $('.timeBar').css('width', percentage + '%'); 210 | 211 | // 更新播放进度 212 | videoPlayer.setCurrentTime(duration * percentage / 100); 213 | } 214 | 215 | // 时间信息tip 216 | $progress.on('mousemove', function(event){ 217 | updateTime(event.pageX); 218 | }); 219 | 220 | function updateTime(pageX){ 221 | var duration = videoPlayer.getDuration(); 222 | var position = pageX - $progress.offset().left; 223 | var totalTime = duration * position / $progress.width(); 224 | if(totalTime > duration){ 225 | currentTime = duration; 226 | } 227 | if(totalTime < 0 || !totalTime){ 228 | currentTime = "00:00"; 229 | } 230 | var currentTime = timeFormat(totalTime); 231 | $(".timeTip").text(currentTime).css({left: position - 16}); 232 | } 233 | 234 | 235 | // 音量 236 | var $volume = $('.volume'); 237 | var volumeDrag = false; 238 | $volume.on('mousedown', function(event){ 239 | if(event.which == 1){ 240 | volumeDrag = true; 241 | $('.sound').removeClass('muted'); 242 | updateVolume(event.pageY); 243 | videoPlayer.switchMuted({ 244 | muted: false 245 | }); 246 | return false; //防止点击时选择文本 247 | } 248 | }); 249 | 250 | $doc.on('mousemove', function(event){ 251 | if(volumeDrag){ 252 | updateVolume(event.pageY - 4); 253 | return false; 254 | } 255 | }); 256 | 257 | $doc.on('mouseup', function(event){ 258 | if(volumeDrag){ 259 | volumeDrag = false; 260 | updateVolume(event.pageY); 261 | } 262 | }); 263 | 264 | function updateVolume(pageY, volume){ 265 | var percentage; 266 | 267 | if(volume){ 268 | percentage = volume * 100; 269 | }else{ 270 | var position = pageY - $volume.offset().top; 271 | percentage = 100 - 100 * position / $volume.height(); 272 | } 273 | 274 | if(percentage > 100){ 275 | percentage = 100; 276 | } 277 | if(percentage < 0){ 278 | percentage = 0; 279 | } 280 | 281 | // 更新声音条和声音值 282 | $(".volumeBar").css("height", percentage+"%"); 283 | 284 | videoPlayer.updateVolume(percentage / 100); 285 | 286 | // 基于声音值，改变声音等级图标 287 | if(percentage == 0){ 288 | $(".sound").attr("class", "muted sound btn"); 289 | }else if(percentage > 25 && percentage < 50){ 290 | $(".sound").attr("class", "sound1 sound btn"); 291 | }else if(percentage > 50 && percentage < 75){ 292 | $(".sound").attr("class", "sound2 sound btn"); 293 | }else if(percentage > 75){ 294 | $(".sound").attr("class", "sound3 sound btn"); 295 | } 296 | } 297 | 298 | // 时间格式化 - 00:00 299 | function timeFormat(seconds){ 300 | var m = Math.floor(seconds/60)<10 ? "0" + Math.floor(seconds/60) : Math.floor(seconds/60); 301 | var s = Math.floor(seconds-(m*60))<10 ? "0" + Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60)); 302 | return m + ":" + s; 303 | } 304 | 305 | // 设置循环 306 | $(".btnLoop").on('click', function(){ 307 | $(this).toggleClass("loopon"); 308 | var $video = $('#video'); 309 | if(!$video.attr("loop")){ 310 | $video.attr("loop", "true"); 311 | }else{ 312 | $video.removeAttr("loop"); 313 | } 314 | }); 315 | 316 | 317 | // 帷幕 318 | $('.js_rope').on('click', function(){ 319 | $body.toggleClass('mod-open'); 320 | }); 321 | 322 | 323 | // 视频列表 324 | function renderList(){ 325 | var artlistTpl = template.compile($('#list_tpl').html()); 326 | $('.js_artList').html(artlistTpl({list: artlist})); 327 | } 328 | renderList(); 329 | 330 | // 选择视频 331 | $('.js_artList').on('click', 'li', function(event){ 332 | var target = $(event.currentTarget), 333 | id = target.data('id'); 334 | initVideo(id); 335 | }); 336 | 337 | // 上下篇 338 | $('.video_nav').on('click', function(event){ 339 | var type = $(this).data('type'); 340 | var index = parseInt($('.js_caption').data('index')); 341 | if(type == 'prev'){ 342 | index--; 343 | }else if(type == 'next'){ 344 | index++; 345 | } 346 | initVideo(artlist[index].id); 347 | }); 348 | 349 | function showVideoNav(index){ 350 | index = parseInt(index); 351 | if(index <= 0){ 352 | $('.video_nav[data-type=prev]').hide(); 353 | }else if(index >= artlist.length-1){ 354 | $('.video_nav[data-type=next]').hide(); 355 | }else{ 356 | $('.video_nav').show(); 357 | } 358 | } 359 | }); -------------------------------------------------------------------------------- /src/media/1987.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/media/1987.jpg -------------------------------------------------------------------------------- /src/media/fk.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/media/fk.jpg -------------------------------------------------------------------------------- /src/media/ku.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/media/ku.jpg -------------------------------------------------------------------------------- /src/media/lost.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/media/lost.jpg -------------------------------------------------------------------------------- /src/media/nzfnsm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/media/nzfnsm.jpg -------------------------------------------------------------------------------- /src/media/qwdfj.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/media/qwdfj.jpg -------------------------------------------------------------------------------- /src/media/sky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/media/sky.jpg -------------------------------------------------------------------------------- /src/media/sxdsx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/media/sxdsx.jpg -------------------------------------------------------------------------------- /src/media/up.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/media/up.jpg -------------------------------------------------------------------------------- /src/media/whxn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/media/whxn.jpg -------------------------------------------------------------------------------- /src/media/xfed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/media/xfed.jpg -------------------------------------------------------------------------------- /src/media/yc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/media/yc.jpg -------------------------------------------------------------------------------- /src/media/young.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuanfeng/html5-video-player/05b4fe95d471412d84ca099512eef495fed842fa/src/media/young.jpg --------------------------------------------------------------------------------