Danmark精灵,jQuery制作录制播放器完全指南

2019-12-02 18:42 来源:未知

HTML5+CSS3+jQuery制作录像播放器完全指南

2012/05/12 · HTML5 · 2 评论 · CSS3, HTML5

德文原作:designmodo.com,编译:王然@CSDN

导读:早晚HTML5已是一定,盛名摄像网址YouTube在三年前就从头扩充HTML5播放器来代表Flash。就算本国还还没完全广泛HTML5浏览器,但在各大学本科土浏览器商家的努力下,帮衬HTML5的浏览器在神州浏览器市镇的分占的额数也在持续增高级中学。本学科将会手把手地教你构建八个基于HTML5& CSS3& JavaScript 手艺的录制播放器。

1.下载MediaElement.js

率先下载MediaElement.js本子文件,那是三个开源的HTML5音、摄像插件,解压后你会赢得3个公文—— “flashmediaelement.swf”、 “mediaelement-and-player.min.js”和 “silverlightmediaelement.xap” ,分别是运用Flash、 JavaScript和 SilverLight达成摄像播放,何况新建一个”js”文件夹并把它们放进去(当然本例中并无需“flashmediaelement.swf” 和 “silverlightmediaelement.xap” 三个文件,可以去除。)。

2.HTML标记

第意气风发要求链接(link卡塔尔国叁个jQuery库,这里运用的是谷歌托管的jQuery库。然后大家在链接”mediaelement-and-player.min.js”文件和CSS文件。

XHTML

<head> <title>Video Player</title> <script src="; <script src="js/mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="css/style.css" media="screen"> </head>

1
2
3
4
5
6
<head>
    <title>Video Player</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="js/mediaelement-and-player.min.js"></script>
    <link rel="stylesheet" href="css/style.css" media="screen">
</head>

当然大家还必要充分三个HTML5 video标志来创制贰个摄像播放器,再增加一些质量将它开端化。(注:poster是指录制的预览图)

XHTML

<video width="640" height="267" poster="media/cars.png"> <source src="media/cars.mp4" type="video/mp4"> </video>

1
2
3
<video width="640" height="267" poster="media/cars.png">
    <source src="media/cars.mp4" type="video/mp4">
</video>

接下去大家再投入上边包车型地铁代码来创制调节面板,必要加上的调整器或效果与利益有:

● alwaysShowControls – “true”则设置video调节面板恒久展现,”false”则在鼠标移走后潜伏。

● videoVolume – “horizontal”设置音量滑动调整器为水平

● 此外功效:暂停止播放放、前进播放、声音和全屏

JavaScript

<script type="text/javascript">// <![CDATA[ $(document).ready(function() { $('video').mediaelementplayer({ alwaysShowControls: true, videoVolume: 'horizontal', features: ['playpause','progress','volume','fullscreen'] }); }); // ]]></script>

1
2
3
4
5
6
7
8
9
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
    $('video').mediaelementplayer({
        alwaysShowControls: true,
        videoVolume: 'horizontal',
        features: ['playpause','progress','volume','fullscreen']
    });
});
// ]]></script>

更加的多安装请查阅MediaElement.js的装置文书档案。

3.播放器基本样式设计

先修正一下体制设置:

CSS

.mejs-inner, .mejs-inner div, .mejs-inner a, .mejs-inner span, .mejs-inner button, .mejs-inner img { margin: 0; padding: 0; border: none; outline: none; }

1
2
3
4
5
6
7
8
9
10
11
.mejs-inner,
.mejs-inner div,
.mejs-inner a,
.mejs-inner span,
.mejs-inner button,
.mejs-inner img {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

再给video container加多样式,上边包车型客车代码全是用来支配构造的,未有对播放器样式做此外纠正。

CSS

.mejs-container { position: relative; background: #000000; } .mejs-inner { position: relative; width: inherit; height: inherit; } .me-plugin { position: absolute; } .mejs-container-fullscreen .mejs-mediaelement, .mejs-container-fullscreen video, .mejs-embed, .mejs-embed body, .mejs-mediaelement { width: 100%; height: 100%; } .mejs-embed, .mejs-embed body { margin: 0; padding: 0; overflow: hidden; } .mejs-container-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; } .mejs-background, .mejs-mediaelement, .mejs-poster, .mejs-overlay { position: absolute; top: 0; left: 0; } .mejs-poster img { display: block; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.mejs-container {
    position: relative;
    background: #000000;
}
 
.mejs-inner {
    position: relative;
    width: inherit;
    height: inherit;
}
 
.me-plugin { position: absolute; }
 
.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video,
.mejs-embed,
.mejs-embed body,
.mejs-mediaelement {
    width: 100%;
    height: 100%;
}
 
.mejs-embed,
.mejs-embed body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
 
.mejs-container-fullscreen {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1000;
}
 
.mejs-background,
.mejs-mediaelement,
.mejs-poster,
.mejs-overlay {
    position: absolute;
    top: 0;
    left: 0;
}
 
.mejs-poster img { display: block; }

 

图片 1

4.控制面板样式设置

让大家先从丰裕“播放开关”初叶:

CSS

.mejs-overlay-play { cursor: pointer; } .mejs-inner .mejs-overlay-button { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; background: url(../img/play.png) no-repeat; }

1
2
3
4
5
6
7
8
9
10
11
.mejs-overlay-play { cursor: pointer; }
 
.mejs-inner .mejs-overlay-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    background: url(../img/play.png) no-repeat;
}

接下去再增加录制调控器结构:将它坐落摄像尾巴部分,中度为34px,再增加二个背景颜色,合营KoleosGBA来设置折射率。最终给按键加多基本样式和图元。

CSS

.mejs-container .mejs-controls { position: absolute; width: 100%; height: 34px; left: 0; bottom: 0; background: rgb(0,0,0); background: rgba(0,0,0, .7); } .mejs-controls .mejs-button button { display: block; cursor: pointer; width: 16px; height: 16px; background: transparent url(../img/controls.png); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.mejs-container .mejs-controls {
    position: absolute;
    width: 100%;
    height: 34px;
    left: 0;
    bottom: 0;
    background: rgb(0,0,0);
    background: rgba(0,0,0, .7);
}
 
.mejs-controls .mejs-button button {
    display: block;
    cursor: pointer;
    width: 16px;
    height: 16px;
    background: transparent url(../img/controls.png);
}

 

图片 2

5.摄像调整器

这一步大家要做的只是将调整器居右放置。所以率先大家将享有的按键放到调控面板上,之后再对它们的宽度、地方和背景图片做详细的调度。

CSS

.mejs-controls div.mejs-playpause-button { position: absolute; top: 12px; left: 15px; } .mejs-controls .mejs-play button, .mejs-controls .mejs-pause button { width: 12px; height: 12px; background-position: 0 0; } .mejs-controls .mejs-pause button { background-position: 0 -12px; } .mejs-controls div.mejs-volume-button { position: absolute; top: 12px; left: 45px; } .mejs-controls .mejs-mute button, .mejs-controls .mejs-unmute button { width: 14px; height: 12px; background-position: -12px 0; } .mejs-controls .mejs-unmute button { background-position: -12px -12px; } .mejs-controls div.mejs-fullscreen-button { position: absolute; top: 7px; right: 7px; } .mejs-controls .mejs-fullscreen-button button, .mejs-controls .mejs-unfullscreen button { width: 27px; height: 22px; background-position: -26px 0; } .mejs-controls .mejs-unfullscreen button { background-position: -26px -22px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.mejs-controls div.mejs-playpause-button {
    position: absolute;
    top: 12px;
    left: 15px;
}
 
.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
    width: 12px;
    height: 12px;
    background-position: 0 0;
}
 
.mejs-controls .mejs-pause button { background-position: 0 -12px; }
 
.mejs-controls div.mejs-volume-button {
    position: absolute;
    top: 12px;
    left: 45px;
}
 
.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
    width: 14px;
    height: 12px;
    background-position: -12px 0;
}
 
.mejs-controls .mejs-unmute button { background-position: -12px -12px; }
 
.mejs-controls div.mejs-fullscreen-button {
    position: absolute;
    top: 7px;
    right: 7px;
}
 
.mejs-controls .mejs-fullscreen-button button,
.mejs-controls .mejs-unfullscreen button {
    width: 27px;
    height: 22px;
    background-position: -26px 0;
}
 
.mejs-controls .mejs-unfullscreen button { background-position: -26px -22px; }

 

图片 3

6.音量滑动调节器

高低滑动调节器的装置也同样,设置好地点和大小,再增加叁个圆角效果就能够了。

CSS

.mejs-controls div.mejs-horizontal-volume-slider { position: absolute; cursor: pointer; top: 15px; left: 65px; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { width: 60px; background: #d6d6d6; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { position: absolute; width: 0; top: 0; left: 0; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { height: 4px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.mejs-controls div.mejs-horizontal-volume-slider {
    position: absolute;
    cursor: pointer;
    top: 15px;
    left: 65px;
}
 
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    width: 60px;
    background: #d6d6d6;
}
 
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    position: absolute;
    width: 0;
    top: 0;
    left: 0;
}
 
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    height: 4px;
 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

 

图片 4

7.进度条

进程条的装置也如出生机勃勃辙轻巧,将它紧贴在调控面板上方就可以了,之后正是设置差别景色(all和loaded状态)的背景颜色。以往将它初阶化为零就足以在影视播放时自动校勘了。(不过你看不出来。)

CSS

.mejs-controls div.mejs-time-rail { position: absolute; width: 100%; left: 0; top: -10px; } .mejs-controls .mejs-time-rail span { position: absolute; display: block; cursor: pointer; width: 100%; height: 10px; top: 0; left: 0; } .mejs-controls .mejs-time-rail .mejs-time-total { background: rgb(152,152,152); background: rgba(152,152,152, .5); } .mejs-controls .mejs-time-rail .mejs-time-loaded { background: rgb(0,0,0); background: rgba(0,0,0, .3); } .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.mejs-controls div.mejs-time-rail {
    position: absolute;
    width: 100%;
    left: 0;
    top: -10px;
}
 
.mejs-controls .mejs-time-rail span {
    position: absolute;
    display: block;
    cursor: pointer;
    width: 100%;
    height: 10px;
    top: 0;
    left: 0;
}
 
.mejs-controls .mejs-time-rail .mejs-time-total {
    background: rgb(152,152,152);
    background: rgba(152,152,152, .5);
}
 
.mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: rgb(0,0,0);
    background: rgba(0,0,0, .3);
}
 
.mejs-controls .mejs-time-rail .mejs-time-current { width: 0; }

 

图片 5

8.进程条调控器和岁月提醒框

这一步就该给进程条增多一个进度条调节器和八个岁月提醒框,雷同大家依旧调解任务,设置宽度、中度和背景图片,再加多一些制版样式。

CSS

.mejs-controls .mejs-time-rail .mejs-time-handle { position: absolute; cursor: pointer; width: 16px; height: 18px; top: -3px; background: url(../img/handle.png); } .mejs-controls .mejs-time-rail .mejs-time-float { position: absolute; display: none; width: 33px; height: 23px; top: -26px; margin-left: -17px; background: url(../img/tooltip.png); } .mejs-controls .mejs-time-rail .mejs-time-float-current { position: absolute; display: block; left: 0; top: 4px; font-family: Helvetica, Arial, sans-serif; font-size: 10px; font-weight: bold; color: #666666; text-align: center; } .mejs-controls .mejs-time-rail .mejs-time-float-corner { display: none; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.mejs-controls .mejs-time-rail .mejs-time-handle {
    position: absolute;
    cursor: pointer;
    width: 16px;
    height: 18px;
    top: -3px;
    background: url(../img/handle.png);
}
 
.mejs-controls .mejs-time-rail .mejs-time-float {
    position: absolute;
    display: none;
    width: 33px;
    height: 23px;
    top: -26px;
    margin-left: -17px;
    background: url(../img/tooltip.png);
}
 
.mejs-controls .mejs-time-rail .mejs-time-float-current {
    position: absolute;
    display: block;
    left: 0;
    top: 4px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #666666;
    text-align: center;
}
 
.mejs-controls .mejs-time-rail .mejs-time-float-corner { display: none; }

 

图片 6

9.红色的已播放进程条

本课程的末梢一步正是在速度条和音量滑动条上增加石青的已播放进程条和音量突显,这么些也很简单。

CSS

.mejs-controls .mejs-time-rail .mejs-time-current, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { background: #82d344; background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%); background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%); background: -o-linear-gradient(top, #82d344 0%, #51af34 100%); background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%); background: linear-gradient(top, #82d344 0%, #51af34 100%); }

1
2
3
4
5
6
7
8
9
.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background: #82d344;
    background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%);
    background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%);
    background: -o-linear-gradient(top, #82d344 0%, #51af34 100%);
    background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%);
    background: linear-gradient(top, #82d344 0%, #51af34 100%);
}

 

图片 7

总结:纵然如此十分轻松,但那实在是一个很准确的开源(CC许可证3.0)录制播放器!经过设置仍然为能够支撑各个摄像格式,所以它不但能够被用来做互联网录制播放器,假让你还愿意给它增添一些效率,以至足以把它能够做成跨平台的当地录像播放器。

德姆o下载地址:

● 当地下载

● designmodo.com

 

赞 3 收藏 2 评论

图片 8

.g-btn, .galleryList-btn, .mask_btn span, .pop_iv_bg, .contextDiv span{ background:url() no-repeat 0 0; display:inline-block }.gallery { width:640px; overflow:hidden; margin:0 auto 20px; position:relative; text-align:center; font-size:14px }#galleryPicWrap { width:100%; position:relative; z-index:1; text-align:center; overflow:hidden; background:#fff url() center center no-repeat; height:395px }#galleryPic { background:#000; filter:Alpha(opacity = 0); opacity:0}.galleryInfo { position:relative; bottom:0; text-align:left; z-index:1; width:640px; visibility:hidden }#galleryTxtWrap { line-height:25px; font-size:14px; color:#fff; width:100%; text-align:left; position:absolute;bottom:0; z-index:3;background:url() repeat 0 0; _background:none; _filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0, startColorstr = '#AA000000', endColorstr = '#AA000000');}#galleryTxt{ padding:5px 40px 0 11px; font-size:14px; line-height:21px; }#galleryTxt p { padding:0; font-size:14px; height:30px; }.galleryInfo-btn { position:absolute; right:5px; bottom:0; height:25px; width:70px; line-height:25px; z-index:2 }.galleryInfo-btn div { font-size:12px; color:#999; position:absolute; right:0; cursor:pointer }.galleryInfo-btn b { position:absolute; width:0; height:0; top:9px; margin-left:3px; border-width:4px; border-style:solid; font-size:0; line-height:0; border-color:#999 transparent transparent; _width:7px; _height:4px; _border:none; _background:url() no-repeat }.gallery-btn-close { width:40px; }.gallery-btn-open { background:#3E3E3E; color:#fff; cursor:pointer; padding:0 5px; display:none }.contextDiv { cursor:pointer; width:50%;height:100%;position:absolute; top:0; z-index:2; background:url() no-repeat}.contextDiv span { width:24px; height:43px; position:absolute; top:50%; margin-top:-22px; visibility:hidden}.contextDiv:hover { zoom:1}.contextDiv:hover span { visibility:visible;}#preArrow span { background-position:0 -50px; left:16px }#nextArrow span { background-position:-30px -50px; right:16px }#preArrow { left:0 }#nextArrow { right:0 }#lastCon { position:absolute; background: #fff; height:400px; top:0; left:0; width:100%; z-index:6; display:none }.gallery-AD { margin:0 auto; width:550px; position:absolute; left:38px; _left:20px; top:0; z-index:11}.gallery-AD .l_qq_com { left:0 !important; top:0 !important}.galleryBottom { border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; position:relative; z-index:9 }.galleryList { height:68px; border-top:1px solid #fff; border-bottom:1px solid #fff; background-color:#f2f2f2; padding:5px 0 }.galleryList ul { position:absolute; left:0; top:5px }.galleryList li { width:80px; height:60px; overflow:hidden; float:left; margin:0 3px 0 1px; display:inline; text-align:center; border:3px solid #f2f2f2; padding:1px; background:#f2f2f2 }.galleryList li.hover{ border:3px solid #2d96e9; background:#fff }.galleryList li a { display:block; width:80px;height:60px; overflow:hidden }.galleryList li img { height:60px } .galleryList-btn { position:absolute; top:30px; width:22px; z-index:3; height:22px; filter:Alpha(opacity = 60); opacity:0.6; -moz-transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; transition: opacity 0.5s ease }.galleryList-btn:hover { opacity:1; filter:Alpha(opacity = 100); color:#379BE9 }.galleryList-btn-l { left:5px; background-position:0 -23px }.galleryList-btn-r { right:3px; background-position:-30px -23px }.galleryTool { position:absolute; top:10px; left:50%; z-index:2; margin-left:-84px; width:166px; height:30px; border-width:1px 0; border-color:#c5b9b6; border-style:solid; visibility:hidden }#Mask_Pic_wrap .galleryTool { visibility : visible; top:15px }.galleryTool-wrap { border-width:0 1px; border-color:#c5b9b6; border-style:solid; float:left; position:relative; margin:0 -1px; width:100%; overflow:visible;background:rgba(0, 0, 0, 0.2); height:30px; filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0, startColorstr = '#30000000', endColorstr = '#30000000') /9}.galleryTool-num { float:left; width:60px; padding:0 5px; text-align:right; color:#fff; line-height:30px }.galleryTool-num em { margin:0 2px;color:#fff}.galleryTool-btn { float:left; width:80px; padding:6px 0 0 10px }.galleryTool-btn .g-btn { margin-right:8px }.g-btn { filter:Alpha(opacity = 70); opacity:0.7 }.g-btn:hover { filter:Alpha(opacity = 100); opacity:1 }.g-btn-left { width:10px; height:20px; background-position:0 0 }.g-btn-right { width:10px; height:20px; background-position:-16px 0 }.g-btn-play { width:20px; height:20px; background:url() no-repeat; _background:url() no-repeat 0 0 }.g-btn-pause { width:20px; height:20px; background:url() no-repeat 3px 1px }/* 模拟右键 */#cmenu { border:1px solid #5EB4D8;background-color:#F6F9FD;padding:2px;}#cmenu ul,#cmenu li { list-style:none; margin:0px; padding:0px; text-align:center; font-size:12px; cursor:pointer }#cmenu .item { list-style:none; margin:0px; padding:0px; height:23px; line-height:23px; display:block; padding:0px }#cmenu .itemOver { background-color:#68B5EA; color:#fff; cursor:default }/* 末页推荐――内容 */.endMain { width:564px; margin:0 auto; text-align: left; line-height: 18px }.endMain .title { padding-bottom:8px; text-align: left; } .endMain h2 { font-size:14px; line-height:26px; color:#44a2ea; font-family: "微软雅黑", 'Microsoft YaHei', 'STHeiti' }.endMain ul { width: 600px }.endMain li { float:left; width:126px; height:126px; font-size:12px; margin-right: 15px }.endMain li img { background:url() right top no-repeat; padding-right:6px; width:120px }.endMain li a { color:#000 }.endMain li .lastImg { display:block; height:75px;width:126px; overflow:hidden; margin-bottom:5px }/* 末页推荐――开关 */.endBtn { border-top:1px dotted #dbdbdb; padding-top: 20px; text-align:center }.endBtn a { width:112px; height:34px; margin: 0 20px; font-family: "Microsoft YaHei"; line-height:34px; font-size:14px; display:inline-block; background:url() no-repeat 0 0 }.endBtn a:hover { text-decoration: none }.endBtn .btnReplay { background-position:0 -254px; padding-left:40px; width:82px; color:#575757; text-align: left;}.endBtn .btnReplay:hover { background-position:0 -295px; color:#575757 }.endBtn .btnEnter { background-position:-189px -304px; text-align:center; color:#fff }.endBtn .btnEnter:hover { background-position:-189px -345px; color:#fff }/* Floating layer */#MyMaskWrap { position: absolute; width:100%; height:100%; z-index: 1000; top: 0; left: 0; background: #000; overflow: hidden; font-size:14px }#MyMaskCon { position: absolute; width:100%; height:100%; z-index: 1001; left: 0; top: 0; overflow: hidden; font-family:"simSun" }#MyMaskCon a { outline:0 }/*.pop_iv_bg { position:absolute; right:-35px; top:0; width:32px; height:32px; overflow:hidden; cursor:pointer; background:url(); line-height:99em; z-index:9;_background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale") }.pop_iv_bg:hover { background:url(: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale")}*/.pop_iv_bg { position:absolute; right:20px; top:20px; width:54px; height:54px; overflow:hidden; cursor:pointer; background-position:0 -294px; line-height:99em; z-index:9;_background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale") }.pop_iv_bg:hover { background:url() no-repeat 0 0}#Mask_Pic_wrap { margin:0 auto; position:absolute; z-index:3; background:url() center center no-repeat }#Mask_Picture { border:9px solid #fff; overflow:hidden }#Mask_Pic_wrap a { overflow:hidden }#Mask_Pic_wrap .mask_cur{ position:absolute; width:50%; height:100%; margin-top:-39px; top:0; background:#fff; filter:Alpha(opacity = 0); opacity:0 }#Mask_Pic_wrap .mask_cur_prev { left:0; cursor: url(""), auto }#Mask_Pic_wrap .mask_cur_next { right:0; cursor: url(""), auto }#Mask_Pic_wrap .mask_zoom{ position:absolute; bottom:39px; right:8px; width:31px; height:31px; background:url(); _background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale") }#Mask_Pic_wrap .mask_zoom:hover{ background:url(: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale")}.Mask_Info { color:#fff; width: 800px;font-size:14px; position:absolute; left:50%; margin-left:-400px }.Mask_Info p { text-indent:2em; line-height:25px; font-size:14px }.txtC, .txtC p { text-align:center }.Mask_hd { height:37px; line-height:37px}.Mask_hd h3 { font-size:18px; color:#484848; float:left }.mask_btn { width:50%; height:100%; overflow:visible; position:absolute; z-index:2; outline:none }.mask_btn:hover { background:none }.mask_btn span{ height:93px; position:relative; width:47px; position:absolute; top:50%; margin:-47px 0 0 0; cursor:pointer }.mask_btn_prev { text-align:left; left:0} .mask_btn_prev span{ left:5%; background-position:0 -98px; _background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale") }.mask_btn_prev:hover span{ _background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale") }.mask_btn_next { text-align:right; right:0 }.mask_btn_next span{ right:5%; background-position:0 -196px; _background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale") }#Mask_Loading { position: absolute; z-index: 1 }.mask_btn_next:hover span{ _background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale") }#Mask_Loading { position: absolute; z-index: 1 }#Mask_Error { position: absolute; z-index: 2 }#Mask_PerHint {position: absolute; z-index: 3; width: 62px; height: 28px; text-align: center; font: bold 13px/28px Tahoma; color: #fff; background:url(); cursor: default}#Mask_Hint {position: absolute; z-index: 3; height: 25px; bottom:53px; width:100%; color: #fff; font: 12px/25px Tahoma, "simSun"; text-align: center}#Mask_Bottom {position: absolute; z-index: 4; width:100%; bottom:0; left:0; overflow:hidden; height:29px }#Mask_Count { width:100%; text-align:center; z-index:3; height:27px; border-bottom:2px solid #232323; color:#fff; font-size:12px}#Mask_Count span { display:inline-block; background:url() no-repeat; width:82px; height:29px }#Mask_Count em { margin:0 5px; font-family:Tahoma; text-shadow:1px 1px 1px #494949 }.num_Cur { font-size:18px; color:#0a96d0 }#Mask_Items { height:77px; background-color:#000; overflow:hidden; padding:11px 0 0; position:relative }#Mask_List { overflow:hidden; margin:0 auto; position:relative; height:77px }#Mask_List ul { position:absolute; top:0; left:0 }#Mask_Items li {float: left; width: 80px; height:60px; display:inline; margin:0 2px 0; cursor: pointer; border:3px solid #000; padding:1px; background:#000; opacity:0.6 }#Mask_Items li.hover { border:3px solid #0a96d0; padding:1px; background:#fff } #Mask_Items li:hover { opacity:1 }#Mask_Items li a { display:block; width: 80px; height:60px; overflow:hidden; text-align:center }#Mask_Items img { height: 60px }.Mask_Items_btn { position:absolute; top:24px; width:26px; height:41px }.Mask_Items_btnL { left:13px; background:url() no-repeat;_background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale") }.Mask_Items_btnL:hover { left:13px; background:url() no-repeat;_background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale") }.Mask_Items_btnR { right:13px; background:url() no-repeat;_background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale") }.Mask_Items_btnR:hover { right:13px; background:url() no-repeat;_background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale") }.mask-last-photo { width:530px; height:320px; background:#fff; position:absolute; left:24px; top:14px; z-index:999 }.mask-last-photo .hd { border-bottom:1px solid #e6e6e6 }.m-picList { padding-left:183px; position:relative; height:115px; text-align:center }.m-picList-pic { position:absolute; left:0; top:0 }.m-picList-pic a { width:155px; height:100px; display:block; text-align:center; overflow:hidden }.m-picList-pic a img { height:100px }.m-picList-title { font-size:14px; font-weight:bold; text-align:left }.m-picList-title a { color:#093c8b }.m-picList-btn { margin-top:24px }.m-picList-btn a { display:inline-block; line-height:28px; margin-right:6px; padding-right:20px; background:url() no-repeat right top;}.m-picList-btn a span { float:left;height:28px;padding-right:20px;background:url() no-repeat left top;}.m-picList-btn a em { float:left; height:28px;}.m-picList-btn .btn-replayPic em {width:13px;background:url() no-repeat -34px -32px;padding-right:5px;}.m-picList-btn .btn-MIcblog em {width:16px;background:url() no-repeat -211px -32px;padding-right:5px;}.mask-last-photo .bd h3 { color:#093c8b; padding:4px 0 6px }.maskComend li { float:left; width:142px; height:148px; border:1px solid #ececec; text-align:center; background:#f3f6fd; padding:8px 9px 0; margin-right:10px }.maskComend li .img { width:142px; height:92px; overflow:hidden; display:block; margin-bottom:10px }.maskComend li img { height:92px }.Mask-share-box { background:#fff; height:30px; text-align:right; padding:0 30px 0 9px; position:relative }#t_weibo { background:url(卡塔尔(英语:State of Qatar) no-repeat 0 0; width:14px; height:17px; position:absolute; right:10px; top:2px }|xGv00|67976bddc81434f421839aeb86200f50 |xGv00|60a70311526586fe908876bac0652304|xGv00|fd586c288592bf707d9eb04d9e28f2a8|xGv00|7a4fb90d20e9b7823d382aa34e55d1ba0/0遮盖查看图注 大家都在看再看二回跻身图片主旨 查看原图 |xGv00|02e3590efebf394caca0778042c15b3b|xGv00|16433e7e4c898ec36e7a7aa092cc072e|xGv00|8025d4bc02f77126ddde97eb1aca5b50#sidebar{ float: right; width:359px; position: relative; height:558px; border-left:1px solid #4b4b4b; background:#383838; }.nowPlay { color:#fff; font-size:14px; display:none; padding:9px 16px 6px; font-weight: bold; background:#2F2F2F; }#Cnt-Main-Article-QQ .nowPlay p { margin-bottom: 0; color:#fff; margin:0;padding:0;}#video_box{ float: left; width: 640px; height:518px; overflow:hidden;} .video_list{ float: right; width: 342px;position:absolute; left: 0; top: 0; }.video_list_con{ height:511px;overflow:hidden; background:#383838;}.video_list ul { background:#383838; *zoom:1; }.video_list li{ }.list_box{ padding: 10px 10px 18px 17px; height: 47px;}.list_box p{ color: #d3d3d3; font-size: 14px; margin-top: 4px;}.bt{ line-height: 24px;}.bt span{ float: left; color: #8a8a8a;}.bt em{ float: right;font-family:simsun}.live{ display: block;float: none;background: url(images/live.png) no-repeat right;padding-right: 37px;}.list_box_over{ padding: 15px 19px 15px 27px; }.v_img{ float: left; position: relative; margin-right: 10px; display: inline; }.v_img p{ position: absolute; bottom: 0px; left: 0px;background-color: rgba;width: 98px;}.v_img p span{ background: url(images/v_Icon.png) no-repeat 0px 2px; text-align: center; margin-left: 8px; padding-left: 15px; color: #cfb28c;}.v_intr span{ color:#fff; font-size:12px; }#Cnt-Main-Article-QQ { z-index:10}#Cnt-Main-Article-QQ .v_intr p{ color: #666666; margin-top: 4px; line-height: 22px; font-size:12px; margin-bottom:0;}#scr{ width: 8px; background-color:#4b4b4b; position: absolute; height: 470px; right:0;top:0; }#scr span { display:block; width:8px; height:40px; background:#818181;position: absolute; }.listvideoNLayout { height:558px; overflow-x: hidden; overflow-y: auto; scrollbar-arrow-color: #61605d; scrollbar-face-color: #818181;scrollbar-darkshadow-color: #1e1d1b;scrollbar-highlight-color: #818181;scrollbar-3dlight-color: #1e1d1b;scrollbar-shadow-color: #818181;scrollbar-track-color: #4b4b4b; }.listvideoNLayout::-webkit-scrollbar{width:8px}.listvideoNLayout::-webkit-scrollbar-button{display:none}.listvideoNLayout::-webkit-scrollbar-button:vertical:end:increment{display:block;height:8px;background-color:#383838}.listvideoNLayout::-webkit-scrollbar-track{height:200px;background-color:#383838;border-radius:3px}.listvideoNLayout::-webkit-scrollbar-track-piece:vertical:start{width:4px;background:#4B4B4B}.listvideoNLayout::-webkit-scrollbar-track-piece:vertical:end{width:4px;background:#4B4B4B}.listvideoNLayout::-webkit-scrollbar-thumb:vertical{background:#818181;cursor:pointer}#video_btn { display:none }#video_btn:hover { background-color:#fb9004; }.video_btn { position:absolute; left:641px; height:558px; width:15px; border-right:1px solid #262626; background-color:#383838; background-image: url(); background-repeat:no-repeat; background-position:center; }.nowLive { background:#1c1c1c; } .nowLive .v_intr span { color:#FF7900; font-size:12px; }.video_btn:hover { background-image: url(); background-repeat:no-repeat; }.video_btn_right { background-image:url( { background-image: url(); background-repeat:no-repeat;}.list_box_over_cur { background:#272727; }#sidebar { position:absolute; left:640px; }.relativeVideo { position:absolute; float: left; margin-bottom:35px}#ch { height:106px; }.reltit h3 { font-family:"微软雅黑"; float:left; width:auto; padding-right: 20px; }.relVideo .v_close { background:url() no-repeat 0 2px; position:absolute; right:8px; top:10px; font-size:12px; padding-left:17px; color:#fefefe; height:17px; line-height:17px; text-decoration:none }.relVideo .v_close:hover { color:#ff7603; background-position:0 -48px }#followVideo .v_close { top:45px } #icon_v_close { position:static; float:left; margin-top: 9px; *margin-top: 7px; width: 19px; } .relativeVideo, .relInfo, .relVideo { z-index: 1; }#mod_player { float:left; position:static; }.convideo { float:left; width:640px; }.tjvideo { float:left; width:630px; height:39px; border-top:1px solid #303030;font-size: 12px; padding-left:10px; }.tjvideo span { float:left; color:#FC8D00; font-weight:bold; line-height:38px; }#invideocon .tjvideo ul { float:right; width:360px; font-size:14px; line-height:38px; margin-bottom:0; } #invideocon .tjvideo ul a,#invideocon .tjvideo ul a:visited,#invideocon .tjvideo ul a:link,#invideocon .tjvideo ul a:active { color:#fff; border:none; }#invideocon .tjvideo ul a:hover { color:#FC8D00; }#showHotBox { float:left; width:439px; }.relVideo { height:588px }.relVideoF { height:627px }.relVideoF .video_btn { height:597px }.relVideoF #sidebar, .relVideoF .listvideoNLayout { height:597px }.relVideoF .listvideoNLayout { height:553px }/* 关注 */#followVideo{width:640px;height:78px; border-top:1px solid #303030; margin:1px 0 0; background:#000; position:relative;top:518px;}#followVideoCover{ width:93px;height:53px; float:left; display:inline; margin:12px 13px 0;border:0}#Cnt-Main-Article-QQ .followVideoInfo{ position:absolute; width:521px;height:53px; font:14px/27px simsun;color:#989898; top:14px; left:120px;margin:0}#Cnt-Main-Article-QQ .followVideoInfo em{display:block; color:#fff; font-weight:bold; font-size:16px; font-style:normal; width:20em; overflow:hidden}#Cnt-Main-Article-QQ .followVideoInfo em a{color:#fff;text-decoration:none}#Cnt-Main-Article-QQ .followVideoInfo em a:hover{color:#fff;text-decoration:underline}#Cnt-Main-Article-QQ .followVideoInfo span{ display:inline-block; float:left;margin:0 20px 0 0}#Cnt-Main-Article-QQ #followVideo a.followVideoBtn{ height:20px; overflow:hidden; font:14px/20px 微软雅黑; color:#ed6f00; margin:3px 0 0;cursor:pointer;display: inline-block;text-decoration:none;border:0}#Cnt-Main-Article-QQ #followVideo a.followVideoBtn:hover{color:#ff950c;text-decoration:none}#Cnt-Main-Article-QQ .followVideoInfo .followVideoBtn span{padding-left:24px;background:url() 0 -6px no-repeat; float:none}#Cnt-Main-Article-QQ .followVideoInfo .followVideoBtn:hover span{ background-position:0 -36px}#Cnt-Main-Article-QQ .followVideoInfo .followVideoBtn span.followVideoBtnEd{ background-position:0 -66px}#Cnt-Main-Article-QQ .followVideoInfo .followVideoBtn:hover span.followVideoBtnEd{ background-position:0 -96px}#Cnt-Main-Article-QQ .followVideoInfo span a{color:#ff9003;text-decoration: underline;}#Cnt-Main-Article-QQ .followVideoInfo span a:hover{color:#ff9003;text-decoration: none;}#Cnt-Main-Article-QQ .video_openNew{ position:absolute;top:10px;right:30px;color:#666;font-size:12px; width:100px; height:22px;}.video_openNew label{cursor:pointer}.video_openNew label:hover{color:#fff}.video_openNew input{float:right; position:relative;margin-top:6px;*margin-top:3px}#Cnt-Main-Article-QQ .video_openNew strong{ float:right; margin:0 0 0 2px;line-height:22px;+line-height:25px;height:22px}#Cnt-Main-Article-QQ .followWrap .followVideoInfo a { border-bottom: none }#select_video { background-image:url(); background-repeat:no-repeat; font-size:12px; padding:0 9px; color:#fff;cursor:pointer;text-decoration:none; float:left; margin-top:6px; width:78px; height:18px; line-height:18px; color:#fff; overflow:hidden; text-indent:-99em }.select_videoOn{ background-position:0 -200px }.select_videoOn:hover{background-position:0 -250px}.select_videoOff { background-position:0 -100px }.select_videoOff:hover { background-position:0 -150px }#video_list_title { font-family:"微软雅黑"; cursor:pointer; background-image:url(); background-repeat:no-repeat; font-size:14px; position:absolute; height:30px; line-height:30px; top:0; color:#526ca5; }#video_list_title:hover { color:#369be9; }.video_list_title_left { left:560px; padding-right:18px;background-position:100% -292px }.video_list_title_right { left:640px; padding-left:18px; background-position:0 -342px}/* /关注 */|xGv00|6e2da6f2ede560165438ae5b640d4393DanmarkSmart素颜照暴露满脸毛囊炎震动网络好友时间长度:1'19''播放:9来源:爱奇艺嗹(lián卡塔尔国Smart素颜照暴露满脸花柳病震撼网络朋友关闭自动播放相关专辑推荐录像:收起录像 正在播放 |xGv00|b8c11fe9f5cd5e959af0fc3dbfdb1faa

TAG标签:
版权声明:本文由金沙澳门唯一官网发布于前端开发,转载请注明出处:Danmark精灵,jQuery制作录制播放器完全指南