[刘阳Java]_酷炫视频播放器制作_界面篇
今天开始分享一篇酷炫播放器制作，包括界面+JS。整个案例非常类似腾讯视频，优酷视频，爱奇艺视频。我们先看一下效果图，然后这篇文章主要界面篇
是不是效果比较酷炫，那么我接着来给大家说一下这个界面设计思路
1. 植入BootStrap框架
2. 页面主体区域分为三大块：播放标题，播放内容，播放控制条
因为整个界面大家要想了解整个界面+样式的实现，大家可以将下面的代码拷贝出来运行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/willesplay01.css"/>
<script type="text/javascript" src="js/jquery-1.11.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/willesPlay01.js" charset="UTF-8"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<!--
作者：caleb_520@163.com
时间：2018-04-04
描述：播放器区域
定位：position:relative
-->
<div id="willesPlay">
<!--
作者：caleb_520@163.com
时间：2018-04-04
描述：播放器头部信息
-->
<div class="playHeader">
<div class="videoName">Tara - 懂的那份感觉</div>
</div> <!--
作者：caleb_520@163.com
时间：2018-04-04
描述：播放主体区域
定位：position:relative
-->
<div class="playContent">
<video width="100%" height="100%" id="playVideo">
<source src="video/video" type="video/mp4"></source>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="#">下载视频</a>
</video>
</div> <!--
作者：caleb_520@163.com
时间：2018-04-04
描述：播放器控制条
-->
<div class="playControll">
<div class="playPause playIcon"></div>
<!--
作者：caleb_520@163.com
时间：2018-04-04
描述：播放器时间轴
-->
<div class="timebar">
<span class="currentTime">0:00:00</span>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%"></div>
</div>
<span class="duration">0:00:0</span>
</div> <!--
作者：caleb_520@163.com
时间：2018-04-04
描述：音量控制，全屏播放
定位：position:relative
-->
<div class="otherControl">
<span class="volume glyphicon glyphicon-volume-down"></span>
<span class="fullScreen glyphicon glyphicon-fullscreen"></span>
<div class="volumeBar">
<div class="volumewrap">
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 8px; height: 40%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <div style="text-align:center;clear:both;"></div>
</body>
</html>
@charset "utf-8";
html,body {
width: 100%;
height: 100%;
background: #EF6A6C;
} a:hover {
text-decoration: none;
} /* 播放器 */
#willesPlay {
margin: 100px auto;
box-shadow: 0px 0px 15px #333333;
position: relative;
} /* 播放器头部 */
#willesPlay .playHeader {
width: 100%;
height: 48px;
background: url(../images/playheader.jpg) repeat-x;
border-radius: 3px 3px 0px 0px;
} /* 播放器头部视频名称 */
#willesPlay .playHeader .videoName {
font-size: 16px;
width: 400px;
height: 48px;
line-height: 48px;
text-align: center;
margin: 0 auto;
color: #7A7F82;
} /* 播放器主体区 */
#willesPlay .playContent {
position: relative;
height: auto;
overflow: hidden;
background: #000;
cursor: pointer;
} /* 播放器控制条 */
#willesPlay .playControll {
position: absolute;
z-index: 2147483650;
width: 100%;
height: 48px;
bottom: -48px;
background: url(../images/playheader.jpg) repeat-x;
border-radius: 0px 0px 3px 3px;
} /* 播放器控制条 暂停 */
#willesPlay .playControll .playPause {
float: left;
width: 20px;
height: 25px;
background: url(../images/control_01.png) 0px 0px no-repeat;
margin: 11px 0px 0px 12px;
cursor: pointer;
} /* 播放器控制条 开始 */
#willesPlay .playControll .playIcon {
background-position: 0px -32px;
} /* 播放器时间轴区域 */
#willesPlay .playControll .timebar {
float: left;
width: calc(100% - 145px);
line-height: 48px;
overflow: hidden;
margin: 0 auto;
margin: 0px 0px 0px 20px;
} /* 播放器进度条 */
#willesPlay .playControll .timebar .progress {
float: left;
width: 80%;
margin: 19px 5px;
height: 10px;
cursor: pointer;
} /* 播放器控制条时间轴 span */
#willesPlay .playControll .timebar span {
float: left;
width: 8%;
text-align: center;
} /* 播放器全屏播放 */
#willesPlay .otherControl {
float: right;
position: relative;
} #willesPlay .otherControl span {
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
vertical-align: middle;
font-size: 20px;
margin: 9px 7px;
cursor: pointer;
} #willesPlay .otherControl span:nth-child(1) {
font-size: 28px;
color: #EF6A6C;
} #willesPlay .otherControl span:nth-child(2) {
color: #919597;
} /* 播放器音量 */
#willesPlay .otherControl .volumeBar {
display: none;
position: absolute;
top: -110px;
left: 4px;
width: 26px;
height: 100px;
background: #F1F2F2;
border-radius: 4px;
cursor: pointer;
} /* 播放器音量 */
#willesPlay .otherControl .volumeBar:after {
content: "";
display: block;
position: absolute;
bottom: -7px;
left: 5px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #F1F2F2;
} #willesPlay .otherControl .volumeBar .volumewrap {
background: #A2A7AA;
width: 8px;
height: 80px;
position: absolute;
bottom: 10px;
left: 9px;
border-radius: 4px;
} #willesPlay .otherControl .volumeBar .progress{
background: none;
}
#willesPlay .otherControl .volumeBar .progress-bar{
position: absolute;
bottom: 0px;
left: 0px;
border-radius: 4px;
} video::-webkit-media-controls-enclosure {
/*禁用播放器控制栏的样式*/
display: none !important;
}
:-webkit-full-screen{}
[刘阳Java]_酷炫视频播放器制作_界面篇的更多相关文章
- [刘阳Java]_酷炫视频播放器制作_JS篇
此文章是接着上次写的<酷炫视频播放器制作_界面篇>将其完善,我们主要给大家介绍一下如何利用JS脚本来控制视频的播放.为了让大家能够保持对要完成的功能有直接的了解,我们还是将效果图附到文章里 ...
- [刘阳Java]_Java程序员的成长路线_第3讲
按照Java从业人员的职位晋升来说,Java程序成长路线大致如下 Java程序员 JavaEE初级软件工程师 JavaEE中级软件工程师 JavaEE高级软件工程师 Java架构师 按照职业发展方向, ...
- [刘阳Java]_Java技术有哪些学习重点_第1讲
纵观网上有很多非常好的对Java技术的总结,这里我个人谈谈对Java技术学习有哪些重点内容[浮浅之见] Java环境搭建 Java基础语法 Java面向对象编程 Java异常 Java IO流 Jav ...
- [刘阳Java]_Spring AOP基于XML配置介绍_第9讲
基于注解配置的Spring AOP固然简单,但是这节我们会给大家介绍基于XML配置的AOP是如何应用的.为什么这么说了,因为后面我们还会介绍到Spring对Dao操作的事务管理(基于AOP的XML文件 ...
- [刘阳Java]_Spring IOC程序代码如何编写_第3讲
第2讲我们介绍了Spring IOC的基本原理,这篇文章告诉大家Spring IOC程序代码是如何编写的,从而可以更好的理解IOC和DI的概念(所有的Java类的初始化工作扔给Spring框架,一个J ...
- [刘阳Java]_纯CSS代码实现内容过滤效果
继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...
- [刘阳Java]_BeanNameViewResolver视图解析器_第8讲
BeanNameViewResolver:这个视图解析器跟XmlViewResolver有点类似,也是通过把返回的逻辑视图名称去匹配定义好的视图bean对象.它要求视图bean对象都定义在Spring ...
- [刘阳Java]_ResourceBundleViewResolver视图解析器_第7讲
ResourceBundleViewResolver是根据proterties文件来找对应的视图来解析"逻辑视图".该properties文件默认是放在classpath路径下的v ...
- [刘阳Java]_InternalResourceViewResolver视图解析器_第6讲
SpringMVC在处理器方法中通常返回的是逻辑视图,如何定位到真正的页面,就需要通过视图解析器 InternalResourceViewResolver是SpringMVC中比较常用视图解析器. 网 ...
随机推荐
- CodeGen准备存储库
CodeGen准备存储库 CodeGen几乎总是与提供用于生成源文件的元数据的存储库结构一起使用,并且许多令牌需要使用存储库结构. 基本要求是有一个结构定义,并且该结构定义包含一个或多个字段定义.有些 ...
- 『动善时』JMeter基础 — 40、JMeter中ForEach控制器详解
目录 1.什么是逻辑控制器 2.ForEach控制器介绍 3.ForEach控制器的使用 (1)测试计划内包含的元件 (2)获取学院列表请求内容 (3)JSON提取器内容 (4)ForEach控制器内 ...
- 前端 JS 之 AJAX 简介及使用
概述 AJAX 是一个缩写,它的全名是 Asynchronous JavaScript and XML,意思就是异步 JavaScript 和 XML,即用JavaScript执行异步网络请求. AJ ...
- UF_DRF 制图符号标注尺寸
Open C uc5530uc5531uc5532uc5533uc5534uc5540uc5541uc5542uc5543uc5550uc5551uc5563uc5566uf5505uf5506uf5 ...
- 【NX二次开发】UF_OBJ_ask_display_properties获取对象所在层、获取对象颜色、获取对象是否隐藏、获取对象是否高亮，获取对象线宽、字体大小
UF_OBJ_ask_display_properties 返回一个对象的显示属性(层.颜色.隐藏状态.线宽和字体). UF_OBJ_disp_props_p_t结构体: layer int 对象所在 ...
- Eclipse安装Pydev插件时所遇到的问题
安装pydev插件折腾了半天,因为总是安装不成功,不成功的表现就是:windows-preferences设置里没有pydev 由于第一次安装这个插件所以不了解安装pydev插件的版本是有要求的,根据 ...
- 01：osi七层---基于TCP协议的套接字（socket）
1 : osi 七层,tcp/ip 五层 1 cs架构和bs架构2 互联网3 osi七层 tcp/ip五层 -物理层 -网线.光纤 -数据链路层 -网卡 - ...
- Nexus 安装配置教程
目录 为什么使用 Nexus Docker 模式安装 Nexus 使用 data volume 使用本地目录 Nexus 配置 配置 Blob Stores Nexus 使用 包下载 包上传 参考 为 ...
- Centos8.3、mysql8.0主从复制实战记录
引言 最近又上线了一个项目,感觉自己这段时间收获不少就想把自己做这个项目用的技术总结梳理一下.这个项目是我自己发起,领导们不是特别重视所以得到资源有限,资源有限的情况我只能选择手动搭建数据库环境,资源 ...
- java面试技巧及层次。
不断的积累,从打算找工作之日起,就要坚持在每天闲暇之余学习其中几道题目,日积月累,等到出去面试时,一切都水到渠成,面试时就自然会游刃有余了. 答题时,先答是什么,再答有什么作用和要注意什么,这里给人的 ...