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

最新推荐文章于 2024-06-09 16:06:06 发布

weixin_30670965

最新推荐文章于 2024-06-09 16:06:06 发布

阅读量185

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/liuyangjava/p/8746075.html

版权

今天开始分享一篇酷炫播放器制作，包括界面+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{}

转载于:https://www.cnblogs.com/liuyangjava/p/8746075.html

weixin_30670965

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[刘阳Java]_酷炫视频播放器制作_界面篇

今天开始分享一篇酷炫播放器制作，包括界面+JS。整个案例非常类似腾讯视频，优酷视频，爱奇艺视频。我们先看一下效果图，然后这篇文章主要界面篇是不是效果比较酷炫，那么我接着来给大家说一下这个界面设计思路1. 植入BootStrap框架2. 页面主体区域分为三大块：播放标题，播放内容，播放控制条因为整个界面大家要想了解整个界面+样式的实现，大家可以将下面的代码拷贝出来运行&l...
复制链接

扫一扫