今天开始分享一篇酷炫播放器制作，包括界面+JS。整个案例非常类似腾讯视频，优酷视频，爱奇艺视频。我们先看一下效果图，然后这篇文章主要界面篇

是不是效果比较酷炫，那么我接着来给大家说一下这个界面设计思路

1. 植入BootStrap框架

2. 页面主体区域分为三大块：播放标题，播放内容，播放控制条

因为整个界面大家要想了解整个界面+样式的实现，大家可以将下面的代码拷贝出来运行

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <link rel="stylesheet" type="text/css" href="css/reset.css"/>
  7.         <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
  8.         <link rel="stylesheet" type="text/css" href="css/willesplay01.css"/>
  9.         <script type="text/javascript" src="js/jquery-1.11.3.min.js" charset="UTF-8"></script>
  10.         <script type="text/javascript" src="js/willesPlay01.js" charset="UTF-8"></script>
  11.     </head>
  12.     <body>
  13.         <div class="container">
  14.             <div class="row">
  15.                 <div class="col-md-12">
  16.                     <!--
  17.                         作者：caleb_520@163.com
  18.                         时间：2018-04-04
  19.                         描述：播放器区域
  20.                         定位：position:relative
  21.                     -->
  22.                     <div id="willesPlay">
  23.                         <!--
  24.                             作者：caleb_520@163.com
  25.                             时间：2018-04-04
  26.                             描述：播放器头部信息
  27.                         -->
  28.                         <div class="playHeader">
  29.                             <div class="videoName">Tara - 懂的那份感觉</div>
  30.                         </div>
  31.  
  32.                         <!--
  33.                             作者：caleb_520@163.com
  34.                             时间：2018-04-04
  35.                             描述：播放主体区域
  36.                             定位：position:relative
  37.                         -->
  38.                         <div class="playContent">
  39.                             <video width="100%" height="100%" id="playVideo">
  40.                                 <source src="video/video" type="video/mp4"></source>
  41.                                 当前浏览器不支持 video直接播放，点击这里下载视频： <a href="#">下载视频</a>
  42.                             </video>
  43.                         </div>
  44.  
  45.                         <!--
  46.                             作者：caleb_520@163.com
  47.                             时间：2018-04-04
  48.                             描述：播放器控制条
  49.                         -->
  50.                         <div class="playControll">
  51.                             <div class="playPause playIcon"></div>
  52.                             <!--
  53.                                 作者：caleb_520@163.com
  54.                                 时间：2018-04-04
  55.                                 描述：播放器时间轴
  56.                             -->
  57.                             <div class="timebar">
  58.                                 <span class="currentTime">0:00:00</span>
  59.                                 <div class="progress">
  60.                                     <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%"></div>
  61.                                 </div>
  62.                                 <span class="duration">0:00:0</span>
  63.                             </div>
  64.  
  65.                             <!--
  66.                                    作者：caleb_520@163.com
  67.                                    时间：2018-04-04
  68.                                    描述：音量控制，全屏播放
  69.                                    定位：position:relative
  70.                             -->
  71.                             <div class="otherControl">
  72.                                 <span class="volume glyphicon glyphicon-volume-down"></span>
  73.                                 <span class="fullScreen glyphicon glyphicon-fullscreen"></span>
  74.                                 <div class="volumeBar">
  75.                                     <div class="volumewrap">
  76.                                         <div class="progress">
  77.                                             <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 8px; height: 40%;"></div>
  78.                                         </div>
  79.                                     </div>
  80.                                 </div>
  81.                             </div>
  82.                         </div>
  83.                     </div>
  84.                 </div>
  85.             </div>
  86.         </div>
  87.  
  88.         <div style="text-align:center;clear:both;"></div>
  89.     </body>
  90. </html>
  1. @charset "utf-8";
  2. html,body {
  3.     width: 100%;
  4.     height: 100%;
  5.     background: #EF6A6C;
  6. }
  7.  
  8. a:hover {
  9.     text-decoration: none;
  10. }
  11.  
  12. /* 播放器 */
  13. #willesPlay {
  14.     margin: 100px auto;
  15.     box-shadow: 0px 0px 15px #333333;
  16.     position: relative;
  17. }
  18.  
  19. /* 播放器头部 */
  20. #willesPlay .playHeader {
  21.     width: 100%;
  22.     height: 48px;
  23.     background: url(../images/playheader.jpg) repeat-x;
  24.     border-radius: 3px 3px 0px 0px;
  25. }
  26.  
  27. /* 播放器头部视频名称 */
  28. #willesPlay .playHeader .videoName {
  29.     font-size: 16px;
  30.     width: 400px;
  31.     height: 48px;
  32.     line-height: 48px;
  33.     text-align: center;
  34.     margin: 0 auto;
  35.     color: #7A7F82;
  36. }
  37.  
  38. /* 播放器主体区 */
  39. #willesPlay .playContent {
  40.     position: relative;
  41.     height: auto;
  42.     overflow: hidden;
  43.     background: #000;
  44.     cursor: pointer;
  45. }
  46.  
  47. /* 播放器控制条 */
  48. #willesPlay .playControll {
  49.     position: absolute;
  50.     z-index: 2147483650;
  51.     width: 100%;
  52.     height: 48px;
  53.     bottom: -48px;
  54.     background: url(../images/playheader.jpg) repeat-x;
  55.     border-radius: 0px 0px 3px 3px;
  56. }
  57.  
  58. /* 播放器控制条 暂停 */
  59. #willesPlay .playControll .playPause {
  60.     float: left;
  61.     width: 20px;
  62.     height: 25px;
  63.     background: url(../images/control_01.png) 0px 0px no-repeat;
  64.     margin: 11px 0px 0px 12px;
  65.     cursor: pointer;
  66. }
  67.  
  68. /* 播放器控制条 开始 */
  69. #willesPlay .playControll .playIcon {
  70.     background-position: 0px -32px;
  71. }
  72.  
  73. /* 播放器时间轴区域 */
  74. #willesPlay .playControll .timebar {
  75.     float: left;
  76.     width: calc(100% - 145px);
  77.     line-height: 48px;
  78.     overflow: hidden;
  79.     margin: 0 auto;
  80.     margin: 0px 0px 0px 20px;
  81. }
  82.  
  83. /* 播放器进度条 */
  84. #willesPlay .playControll .timebar .progress {
  85.     float: left;
  86.     width: 80%;
  87.     margin: 19px 5px;
  88.     height: 10px;
  89.     cursor: pointer;
  90. }
  91.  
  92. /* 播放器控制条时间轴 span */
  93. #willesPlay .playControll .timebar span {
  94.     float: left;
  95.     width: 8%;
  96.     text-align: center;
  97. }
  98.  
  99. /* 播放器全屏播放 */
  100. #willesPlay .otherControl {
  101.     float: right;
  102.     position: relative;
  103. }
  104.  
  105. #willesPlay .otherControl span {
  106.     display: inline-block;
  107.     width: 30px;
  108.     height: 30px;
  109.     text-align: center;
  110.     line-height: 30px;
  111.     vertical-align: middle;
  112.     font-size: 20px;
  113.     margin: 9px 7px;
  114.     cursor: pointer;
  115. }
  116.  
  117. #willesPlay .otherControl span:nth-child(1) {
  118.     font-size: 28px;
  119.     color: #EF6A6C;
  120. }
  121.  
  122. #willesPlay .otherControl span:nth-child(2) {
  123.     color: #919597;
  124. }
  125.  
  126. /* 播放器音量 */
  127. #willesPlay .otherControl .volumeBar {
  128.     display: none;
  129.     position: absolute;
  130.     top: -110px;
  131.     left: 4px;
  132.     width: 26px;
  133.     height: 100px;
  134.     background: #F1F2F2;
  135.     border-radius: 4px;
  136.     cursor: pointer;
  137. }
  138.  
  139. /* 播放器音量 */
  140. #willesPlay .otherControl .volumeBar:after {
  141.     content: "";
  142.     display: block;
  143.     position: absolute;
  144.     bottom: -7px;
  145.     left: 5px;
  146.     width: 0;
  147.     height: 0;
  148.     border-left: 8px solid transparent;
  149.     border-right: 8px solid transparent;
  150.     border-top: 8px solid #F1F2F2;
  151. }
  152.  
  153. #willesPlay .otherControl .volumeBar .volumewrap {
  154.     background: #A2A7AA;
  155.     width: 8px;
  156.     height: 80px;
  157.     position: absolute;
  158.     bottom: 10px;
  159.     left: 9px;
  160.     border-radius: 4px;
  161. }
  162.  
  163. #willesPlay .otherControl .volumeBar .progress{
  164.     background: none;
  165. }
  166. #willesPlay .otherControl .volumeBar .progress-bar{
  167.     position: absolute;
  168.     bottom: 0px;
  169.     left: 0px;
  170.     border-radius: 4px;
  171. }
  172.  
  173. video::-webkit-media-controls-enclosure {
  174.     /*禁用播放器控制栏的样式*/
  175.     display: none !important;
  176. }
  177. :-webkit-full-screen{}

[刘阳Java]_酷炫视频播放器制作_界面篇的更多相关文章

  1. [刘阳Java]_酷炫视频播放器制作_JS篇

    此文章是接着上次写的<酷炫视频播放器制作_界面篇>将其完善,我们主要给大家介绍一下如何利用JS脚本来控制视频的播放.为了让大家能够保持对要完成的功能有直接的了解,我们还是将效果图附到文章里 ...

  2. [刘阳Java]_Java程序员的成长路线_第3讲

    按照Java从业人员的职位晋升来说,Java程序成长路线大致如下 Java程序员 JavaEE初级软件工程师 JavaEE中级软件工程师 JavaEE高级软件工程师 Java架构师 按照职业发展方向, ...

  3. [刘阳Java]_Java技术有哪些学习重点_第1讲

    纵观网上有很多非常好的对Java技术的总结,这里我个人谈谈对Java技术学习有哪些重点内容[浮浅之见] Java环境搭建 Java基础语法 Java面向对象编程 Java异常 Java IO流 Jav ...

  4. [刘阳Java]_Spring AOP基于XML配置介绍_第9讲

    基于注解配置的Spring AOP固然简单,但是这节我们会给大家介绍基于XML配置的AOP是如何应用的.为什么这么说了,因为后面我们还会介绍到Spring对Dao操作的事务管理(基于AOP的XML文件 ...

  5. [刘阳Java]_Spring IOC程序代码如何编写_第3讲

    第2讲我们介绍了Spring IOC的基本原理,这篇文章告诉大家Spring IOC程序代码是如何编写的,从而可以更好的理解IOC和DI的概念(所有的Java类的初始化工作扔给Spring框架,一个J ...

  6. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

  7. [刘阳Java]_BeanNameViewResolver视图解析器_第8讲

    BeanNameViewResolver:这个视图解析器跟XmlViewResolver有点类似,也是通过把返回的逻辑视图名称去匹配定义好的视图bean对象.它要求视图bean对象都定义在Spring ...

  8. [刘阳Java]_ResourceBundleViewResolver视图解析器_第7讲

    ResourceBundleViewResolver是根据proterties文件来找对应的视图来解析"逻辑视图".该properties文件默认是放在classpath路径下的v ...

  9. [刘阳Java]_InternalResourceViewResolver视图解析器_第6讲

    SpringMVC在处理器方法中通常返回的是逻辑视图,如何定位到真正的页面,就需要通过视图解析器 InternalResourceViewResolver是SpringMVC中比较常用视图解析器. 网 ...

随机推荐

  1. TVM性能评估分析（二）

    TVM性能评估分析(二) Figure 1.  A bird's eye view of the µTVM + AutoTVM infrastructure Figure 2.  A standard ...

  2. 深度人脸识别：CVPR2020论文要点

    深度人脸识别:CVPR2020论文要点 Towards Universal Representation Learning for Deep Face Recognition 论文链接:https:/ ...

  3. TensorFlow+TVM优化NMT神经机器翻译

    TensorFlow+TVM优化NMT神经机器翻译 背景 神经机器翻译(NMT)是一种自动化的端到端方法,具有克服传统基于短语的翻译系统中的弱点的潜力.本文为全球电子商务部署NMT服务. 目前,将Tr ...

  4. SOLO: 按位置分割对象

    SOLO: 按位置分割对象 SOLO: Segmenting Objectsby Locations 论文链接: https://arxiv.org/pdf/1912.04488.pdf 代码链接: ...

  5. SpringBoot系列——cache缓存

    前言 日常开发中,缓存是解决数据库压力的一种方案,通常用于频繁查询的数据,例如新闻中的热点新闻,本文记录springboot中使用cache缓存. 官方文档介绍:https://docs.spring ...

  6. EVB_Air724UG_A13开发板使用指南

      Air724 是上海合宙物联网于2020年3月下旬发布的一款基于UIS8910DM芯片组的物联网通讯模块. 模块通讯性能优越,符合Cat1通讯标准,支持最大下行速率 10Mbps 和最大上行速率5 ...

  7. Java双重循环

    在实际开发中我们常常遇到这样的问题,有A.B两个集合,这两个集合的某一个字段是相同的,要把A集合和B进行匹配,然后把A的值赋值给B例如: //上传图片 List<MultipartFile> ...

  8. tree （一本通练习||清华集训互测）

    tree 内存限制:512 MiB 时间限制:3000 ms 标准输入输出 题目类型:传统 评测方式:文本比较   题目描述 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有nee ...

  9. Netty 框架学习 —— 引导

    概述 前面我们学习了 ChannelPipeline.ChannelHandler 和 EventLoop 之后,接下来的问题是:如何将它们组织起来,成为一个可实际运行的应用程序呢?答案是使用引导(B ...

  10. Fiddler手机抓包配置指南

    前言: 对于开发.测试而言,抓包工具绝对是我们日常测试找bug的必备神器.今天主要介绍的是如何配置Fiddler抓取移动端app请求.首先Fiddler是一个http协议调试代理工具,它能够记录并检查 ...