[刘阳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中比较常用视图解析器. 网 ...

随机推荐

js的节流、防抖以及使用场景
介绍首先看一个没有经过任何处理的: 1 // 模拟一个输出的函数 2 function input(value) { 3 console.log(`输入的内容${value}`) 4 } 5 con ...
CVD-ALD前驱体材料
CVD-ALD前驱体材料 ALD前驱体源瓶特点是什么 ALD前驱体源瓶(起泡器)用于固态.液态及气态超纯物料类的封装,涉及微正压.常压.中低压的危险化学品,对源瓶的安全性和洁净度提出严苛的要求. ...
MindInsight张量可视设计介绍
MindInsight张量可视设计介绍特性背景张量可视,能够帮助用户直观查看训练过程中的Tensor值,既支持以直方图的形式呈现Tensor的变化趋势,也支持查看某次step的具体Tensor值. ...
A100 Tensor核心可加速HPC
A100 Tensor核心可加速HPC HPC应用程序的性能需求正在迅速增长.众多科学研究领域的许多应用程序都依赖于双精度(FP64)计算. 为了满足HPC计算快速增长的计算需求,A100 GPU支持 ...
python_request的安装及模拟json的post请求及带参数的get请求
一.Requests模块安装安装方式一:执行 pip install -U requests 联网安装requests 安装方式二:进入https://pypi.org/project/reques ...
vscode使用版本控制git commit unstaged时提示对话框的设置
使用 vscode 版本控制提交代码时,如果有 unstaged file,会有一个弹出框: 选择 always 或者 never ,这个框下次就不再弹出了. 如果你想让他再次出现,请去setting ...
这款拓展让你的jupyter lab更高效
有一段时间没有分享过有关jupyter lab的内容了,今天给大家介绍一款实用的jupyter lab插件,可以帮助我们打造更灵活易用的jupyter lab. 图1 这款拓展的名称叫做jlab-en ...
工作流中容器化的依赖注入！Activiti集成CDI实现工作流的可配置型和可扩展型
Activiti工作流集成CDI简介 activiti-cdi模块提供activiti的可配置型和cdi扩展 activiti-cdi的特性: 支持 @BusinessProcessScoped be ...
即时性能分析工具 Pyroscope
当网站上线后,流量增加或短暂功能故障,都会造成使用者体验相当不好,而这时该怎么快速找到性能的瓶颈呢?通常 CPU 达到 100% 时,有时候也很难复制及找出关键问题点. 本篇文章,我们会介绍一套工具叫 ...
Room-数据持久化存储(入门)
@ 目录一.简单使用 1.Entity 2.Dao 3.DataBase 4.使用二.参数解析 1.Entity 2.Dao 3.查询方式总结 # 前言官方简介: Room 持久性库在 SQL ...

[刘阳Java]_酷炫视频播放器制作_界面篇

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

随机推荐

热门专题