├── demo ├── ppvod │ ├── ppvod集成p2p方法.txt │ ├── share2.js │ └── dplayer │ │ ├── DPlayer.min.css │ │ └── DPlayer.min.css.map ├── playerjs │ └── index.html ├── chplayer.html ├── artplayer.html ├── ckplayer.html ├── openplayer.html ├── fluidplayer.html ├── jwplayer.html ├── quick-start.html ├── radiant.html ├── flowplayer.html ├── chimee.html ├── mediaelement.html ├── cbplayer.html ├── xgplayer.html ├── clappr.html ├── tcplayer.html ├── videojs.html ├── plyr.html ├── dplayer.html └── standalone.html ├── package.json ├── Readme_zh.md └── README.md /demo/ppvod/ppvod集成p2p方法.txt: -------------------------------------------------------------------------------- 1 | 2 | 注：本教程适用于ppvod新版点播系统 3 | 4 | 1. 修改 /home/work/views/share.ejs， 5 | 将 6 | 改为 7 | 8 | 9 | 2. 将本文件夹中的 share2.js 放到目录 /home/work/public/js/ 10 | 11 | 3. 用本文件夹中的 dplayer文件夹 替换 /home/work/public/dplayer 12 | 13 | 4. 登录cdnbye控制台 https://www.cdnbye.com/oms/ 绑定播放域名 14 | 15 | 5. 刷新浏览器缓存 16 | -------------------------------------------------------------------------------- /demo/playerjs/index.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cdnbye", 3 | "version": "1.21.0", 4 | "description": "Let your viewers become your unlimitedly scalable CDN.", 5 | "main": "./dist/hls.min.js", 6 | "files": [ 7 | "dist" 8 | ], 9 | "scripts": { 10 | "git-push": "git add demo && git add package.json && git add README.md && git add Readme_zh.md && git commit -m 'release v1.21.0' && git push origin master", 11 | "git-pull": "git pull origin master", 12 | "publish": "npm publish", 13 | "test": "webpack --progress --env.test-bundle" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/cdnbye/hlsjs-p2p-engine.git" 18 | }, 19 | "author": "cdnbye", 20 | "license": "MIT", 21 | "keywords": [ 22 | "html5", 23 | "WebRTC", 24 | "video", 25 | "mse", 26 | "player", 27 | "p2p", 28 | "peer-to-peer", 29 | "hls", 30 | "cdnbye", 31 | "bittorrent", 32 | "webrtc data channel", 33 | "http live streaming" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /demo/chplayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /demo/artplayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ArtPlayer 5 | 6 | 7 | 8 |
9 | 10 | 11 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /demo/ckplayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |

download info:

6 |

7 | 8 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /demo/openplayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CDNBye OpenPlayer Demo 6 | 7 | 8 | 9 | 11 |

12 |

download info:

13 |

14 | 15 | 16 | 17 | 36 | 37 | -------------------------------------------------------------------------------- /demo/fluidplayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 |

7 |

download info:

8 |

9 | 35 | -------------------------------------------------------------------------------- /demo/jwplayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CDNBye JWPlayer Demo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /demo/quick-start.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 |

download info:

5 |

6 | 36 | -------------------------------------------------------------------------------- /demo/radiant.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /demo/flowplayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |

12 |

download info:

13 |

14 | 15 | 41 | -------------------------------------------------------------------------------- /demo/chimee.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CDNBye Chimee Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

download info:

16 |

17 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /demo/mediaelement.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CDNBye MediaElement Demo 6 | 7 | 8 | 9 | 10 | 11 | 16 |

17 |

download info:

18 |

19 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /demo/cbplayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | cbplayer demo 4 | 5 | 6 | 7 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /demo/xgplayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CDNBye XGPlayer Demo 8 | 13 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /demo/clappr.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CDNBye Clappr Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

download info:

17 |

18 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /demo/tcplayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CDNBye TCPlayer Demo 8 | 9 | 10 | 11 | 12 | 18 | 19 | 20 |
21 |
22 |

23 |

download info:

24 |

25 | 26 | 27 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /demo/videojs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CDNBye videojs demo 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 17 |

18 |

download info:

19 |

20 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /demo/plyr.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |
6 |

7 |

download info:

8 |

9 | 10 | 11 | 12 | 55 | -------------------------------------------------------------------------------- /demo/dplayer.html: -------------------------------------------------------------------------------- 1 | 2 | 8 |
9 |
10 | 11 | 12 | 58 | -------------------------------------------------------------------------------- /demo/standalone.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

5 |

download info:

6 |

7 | 8 | 9 |
10 | 62 | -------------------------------------------------------------------------------- /Readme_zh.md: -------------------------------------------------------------------------------- 1 | **[English](README.md) | 简体中文** 2 | 3 |

cdnbye logo

4 |

Save Your Bandwidth using WebRTC.

5 |

视频网站省流量&加速神器.

6 |

7 | npm 8 | jsdelivr 9 |

10 | 11 | P2P技术使观看相同内容的用户之间可以相互分享数据，不仅能效降低视频/直播网站的带宽成本，还可以提升用户的播放体验，降低卡顿、二次缓存的发生率。 12 | 另外，随着H5的普及，flash逐渐被淘汰已成为不可逆转的趋势。而在H5采用的视频传输格式中，hls由于兼容ios和android、可以穿过任何允许HTTP数据通过的防火墙、容易使用内容分发网络来传输媒体流和码率自适应等众多优势而在业界得到广泛使用。通过使用[hls.js](https://github.com/video-dev/hls.js)这个第三方库，几乎所有现代浏览器都可以播放hls视频。hls天生分片传输的优势，使其可以采用p2p的方式进行传输，从而减小服务器的负担。在web端，无插件化实现p2p传输能力的最好选择就是[WebRTC](https://zh.wikipedia.org/wiki/WebRTC)技术，与hls.js类似，WebRTC也支持几乎所有现代浏览器。本项目是一个hls.js的插件，通过WebRTC datachannel技术，在不影响用户体验的前提下，最大化p2p率，是面向未来的Web P2P技术。 13 | 14 | 该插件的优势如下： 15 | - 浏览器原生支持，不需要安装任何插件，采用仿BT算法，在线人数越多效果越好 16 | - 支持基于HLS流媒体协议(m3u8)的直播和点播场景 17 | - 支持加密HLS传输 18 | - 不改动hls.js源码，并且可以与其无缝衔接，几行代码集成，便于在现有项目中快速集成 19 | - 浏览器不支持WebRTC时无缝切换到HTTP下载模式 20 | - 高可配置化，用户可以根据特定的使用环境调整各个参数 21 | - 支持video.js、Clappr、Flowplayer、DPlayer等第三方播放器 22 | - 通过有效的调度策略来保证用户的播放体验以及p2p率 23 | - Tracker服务器根据访问IP的ISP、地域等进行智能调度 24 | 25 | ## 演示Demo 26 | 打开2个相同的网页：[demo](https://demo.cdnbye.com/) 27 | 28 | ## 浏览器支持情况 29 | 由于WebRTC已成为HTML5标准，目前大部分主流浏览器都已经支持。CDNBye的浏览器兼容性取决于WebRTC和hls.js。需要注意的是iOS版Safari由于不支持MediaSource API，因此也不支持hls.js(不过Safari原生支持HLS播放)。 30 | 31 | 兼容性|Chrome | Firefox | macOS Safari| 安卓微信/QQ | Opera | Edge | IE | iOS Safari | 32 | :-: | :-: | :-: | :-: | :-: | :-: | :-:| :-:| :-: 33 | WebRTC Datachannel | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ❌ | ✔ | 34 | Hls.js | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ❌ | 35 | CDNBye | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ❌ | ❌ | 36 | 37 | ## 使用方法 38 | 参考[文档](https://swarmcloud.net/cn/web-hls/usage.html) 39 | 40 | ## 播放器集成 41 | 支持几乎所有主流播放器，请点击[这里](https://swarmcloud.net/cn/web-hls/players.html) 42 | 43 | ## API文档 44 | 参见 [API.md](https://swarmcloud.net/cn/web-hls/API.html) 45 | 46 | ## 后台管理系统 47 | 在接入P2P插件后，访问[dashboard](https://dash.swarmcloud.net)，注册并绑定域名，即可查看该域名的P2P流量、在线人数、用户地理分布等信息。 48 | 49 | ## 相关项目 50 | - [hls-sw-p2p-engine](https://github.com/swarm-cloud/hls-sw-p2p-engine) - 基于ServiceWorker的P2P流媒体加速引擎，适用于所有浏览器。 51 | - [android-p2p-engine](https://gitee.com/cdnbye/android-p2p-engine) - 安卓端P2P流媒体加速引擎。 52 | - [ios-p2p-engine](https://gitee.com/cdnbye/ios-p2p-engine) - iOS端P2P流媒体加速引擎。 53 | - [flutter-p2p-engine](https://gitee.com/cdnbye/flutter-p2p-engine) - Flutter视频/直播APP省流量&加速神器, 由 [mjl0602](https://github.com/mjl0602) 贡献。 54 | - [shaka-p2p-engine](https://github.com/cdnbye/shaka-p2p-engine) - 同时支持HLS和Mpeg-Dash格式。 55 | - [dashjs-p2p-engine](https://github.com/cdnbye/dashjs-p2p-engine) - MPEG-dash协议的Web端P2P流媒体方案。 56 | - [mp4-sw-p2p-engine](https://github.com/swarm-cloud/mp4-sw-p2p-engine) - 支持MP4的Web端P2P流媒体方案。 57 | 58 | 68 | 69 | ## FAQ 70 | 我们收集了一些[常见问题](https://www.cdnbye.com/faq.html)。在报告issue之前请先查看一下。 71 | 72 | ## 联系我们 73 | 邮箱：service@cdnbye.com 74 | QQ：849433499 75 | 76 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | **English | [简体中文](Readme_zh.md)** 2 | 3 |

cdnbye logo

4 |

Let your viewers become your unlimitedly scalable CDN.

5 |

6 | npm 7 | jsdelivr 8 |

9 | 10 | CDNBye hlsjs-p2p-engine implements [WebRTC](https://en.wikipedia.org/wiki/WebRTC) datachannel to scale live/vod video streaming by peer-to-peer network using bittorrent-like protocol. The forming peer network can be layed over other CDNs or on top of the origin server. Powered by [hls.js](https://github.com/video-dev/hls.js), it can play HLS on any platform with many popular HTML5 players such as video.js, JWPlayer and Flowplayer. 11 | 12 | ## Features 13 | - WebRTC data channels for lightweight peer-to-peer communication with no plugins 14 | - Support live and VOD streams over HLS protocol(m3u8) 15 | - Support encrypted HLS stream 16 | - Very easy to integrate with an existing hls.js project 17 | - Seamlessly fallback to normal server usage if a browser doesn't support WebRTC 18 | - Compatible with all CDNs, agnostic to DRM and video codecs. No service side changes required. 19 | - Support most popular HTML5 players such as video.js、Clappr、Flowplayer 20 | - Efficient scheduling policies to enhance the performance of P2P streaming 21 | - Use IP database to group up peers by ISP and regions 22 | 23 | ## Playground 24 | [Click me!](https://demo.cdnbye.com/) 25 | 26 | ## Browser Support 27 | WebRTC has already been incorporated into the HTML5 standard and it is broadly deployed in modern browsers. The compatibility of CDNBye depends on the browser support of WebRTC and Hls.js. Please note that iOS Safari "Mobile" does not support the MediaSource API. 28 | 29 | Compatibility|Chrome | Firefox | macOS Safari| Android Wechat/QQ | Opera | Edge | IE | iOS Safari | 30 | :-: | :-: | :-: | :-: | :-: | :-: | :-:| :-:| :-: 31 | WebRTC Datachannel | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ❌ | ✔ | 32 | Hls.js | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ❌ | 33 | CDNBye | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ❌ | ❌ | 34 | 35 | ## Usage 36 | See [documentation](https://docs.swarmcloud.net/web-hls) 37 | 38 | ## Player Integration 39 | Support almost all web players, click [here](https://docs.swarmcloud.net/web-hls/players) for more information. 40 | 41 | ## API and Configuration 42 | See [API.md](https://docs.swarmcloud.net/web-hls/API) 43 | 44 | ## Console 45 | Register your domain in [dashboard](https://dash.swarmcloud.net), where you can view p2p-related information. 46 | 47 | ## Related Projects 48 | - [hls-sw-p2p-engine](https://github.com/swarm-cloud/hls-sw-p2p-engine) - Live/VOD P2P Engine for all browsers including iOS Safari, with the help of ServiceWorker. 49 | - [android-p2p-engine](https://github.com/cdnbye/android-p2p-engine) - Live/VOD P2P Engine for Android and Android TV. 50 | - [ios-p2p-engine](https://github.com/cdnbye/ios-p2p-engine) - iOS Video P2P Engine for Any Player. 51 | - [flutter-p2p-engine](https://github.com/cdnbye/flutter-p2p-engine) - Live/VOD P2P Engine for Flutter, contributed by [mjl0602](https://github.com/mjl0602). 52 | - [shaka-p2p-engine](https://github.com/cdnbye/shaka-p2p-engine) - P2P engine for Shaka Player. 53 | - [dashjs-p2p-engine](https://github.com/cdnbye/dashjs-p2p-engine) - Web Video Delivery Technology with No Plugins for MPEG-dash. 54 | - [mp4-sw-p2p-engine](https://github.com/swarm-cloud/mp4-sw-p2p-engine) - Web Video Delivery Technology for MP4. 55 | 56 | 65 | 66 | ## FAQ 67 | We have collected some [frequently asked questions](https://docs.swarmcloud.net/faq). Before reporting an issue, please search if the FAQ has the answer to your problem. 68 | 69 | ## Contact Us 70 | Email: service@cdnbye.com 71 |
72 | Skype: live:86755838 73 |
74 | Telegram: @cdnbye 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /demo/ppvod/share2.js: -------------------------------------------------------------------------------- 1 | var time = 0; 2 | var _CK_ = null; 3 | var bOpen = 0; 4 | var bObj = null; 5 | var msgcache = {} 6 | var player; 7 | function BrowserType() { 8 | var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 9 | var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器 10 | // var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器 11 | var isIE = window.ActiveXObject || "ActiveXObject" in window 12 | // var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器 13 | var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器 14 | var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器 15 | var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器 16 | var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1 && !isEdge; //判断Chrome浏览器 17 | 18 | if (isIE) { 19 | var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); 20 | reIE.test(userAgent); 21 | var fIEVersion = parseFloat(RegExp["$1"]); 22 | if (userAgent.indexOf('MSIE 6.0') != -1) { 23 | return "IE6"; 24 | } else if (fIEVersion == 7) { return "IE7"; } 25 | else if (fIEVersion == 8) { return "IE8"; } 26 | else if (fIEVersion == 9) { return "IE9"; } 27 | else if (fIEVersion == 10) { return "IE10"; } 28 | else if (userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)) { 29 | return "IE11"; 30 | } 31 | else { return "0" }//IE版本过低 32 | }//isIE end 33 | 34 | if (isFF) { return "FF"; } 35 | if (isOpera) { return "Opera"; } 36 | if (isSafari) { return "Safari"; } 37 | if (isChrome) { return "Chrome"; } 38 | if (isEdge) { return "Edge"; } 39 | }//myBrowser() end 40 | 41 | 42 | function SetCookie(name, value) { 43 | var Days = 30; 44 | var exp = new Date(); 45 | exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); 46 | document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString(); 47 | } 48 | function getCookie(name) { 49 | var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); 50 | if (arr != null) return unescape(arr[2]); return null; 51 | } 52 | window.onerror = function () { 53 | return true; 54 | } 55 | 56 | function crossdomainCheck() { 57 | if (!hosts) return; 58 | var referagent = document.referrer; 59 | if (redirecturl.indexOf("http") != 0 && redirecturl.indexOf("https") != 0 && redirecturl != "/") 60 | redirecturl = "http://" + redirecturl 61 | if (!referagent) 62 | return top.location.href = redirecturl; 63 | 64 | var hostsarr = hosts.split("|"); 65 | var refer = false; 66 | var url = referagent; 67 | var reg = /^http(s)?:\/\/(.*?)\//; 68 | for (var i = 0; i <= hostsarr.length; i++) { 69 | if(url.indexOf(hostsarr[i])>=0){ 70 | //if (reg.exec(url) && reg.exec(url)[2].indexOf(hostsarr[i]) >= 0) { 71 | refer = true; 72 | break; 73 | } 74 | }; 75 | if (refer == false) { 76 | try{ 77 | top.location.href = redirecturl; 78 | }catch(e){ 79 | location.href = "404" 80 | } 81 | }; 82 | } 83 | function orderviewinit(timeout) { 84 | var isAndroid = navigator.userAgent.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 85 | var isIOS = false; 86 | if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) 87 | isIOS = true 88 | if (isIOS || isAndroid) { 89 | $("#orderview").css("width", "280px"); 90 | $("#orderview").css("height", "320px"); 91 | $("#orderview").css("left", "280px"); 92 | /** 93 | $("#orderview").css("margin-left", "0px"); 94 | $("#orderview").css("margin-top", "0px"); 95 | $("#orderview").css("bototm", "10px"); 96 | $("#orderview").css("left", "-20px"); 97 | $("#orderview").css("display", "block"); 98 | $("#mvideo").css("height", "260px"); 99 | 100 | $(".closeview").hide() 101 | */ 102 | 103 | } 104 | $(".closeview").click(function () { 105 | $("#orderview").hide(); 106 | }); 107 | player.on('pause', function () { 108 | $("#orderview").show(); 109 | }) 110 | 111 | } 112 | 113 | 114 | function init(order) { 115 | crossdomainCheck(); 116 | 117 | var cookieTime = getCookie(videoid + "_time"); //调用已记录的time 118 | //alert("上次播放时间"+ cookieTime +""); 119 | if (!cookieTime || cookieTime == undefined) { //如果没有记录值，则设置时间0开始播放 120 | cookieTime = 0; 121 | } 122 | function cb() { 123 | if (order) 124 | orderviewinit(); 125 | } 126 | 127 | if (playertype == 'ckplayer') 128 | ckplay(main, xml, cookieTime, cb); 129 | else 130 | dplay(main, xml, cookieTime, cb); 131 | 132 | 133 | 134 | } 135 | function timeHandler(t) { 136 | if (t > -1) 137 | SetCookie(videoid + "_time", t); 138 | } 139 | function loadHandler() { 140 | player.addListener('time', timeHandler); //监听播放时间 141 | } 142 | 143 | //ckplayer 144 | function ckplay(main, xml, starttime, cb) { 145 | var hostname = window.location.hostname 146 | var port = window.location.port || '80'; 147 | var picurl = window.location.protocol + "//" + window.location.host + pic; 148 | var url = window.location.protocol + "//" + window.location.host + main 149 | if (main.indexOf("/") != 0) 150 | url = window.location.protocol + "//" + window.location.host + "/" + main 151 | xml = window.location.protocol + "//" + window.location.host + xml 152 | var isiPad = navigator.userAgent.match(/iPhone|Linux|Android|iPad|iPod|ios|iOS|Windows Phone|Phone|WebOS/i) != null; 153 | if (isiPad) { 154 | document.getElementById('mvideo').innerHTML = '' 155 | } else { 156 | var videoObject = { 157 | container: '.video', 158 | variable: 'player', 159 | loaded: 'loadHandler', 160 | autoplay: true, 161 | poster: picurl, 162 | adfront: l, //前置广告 163 | adfronttime: t, 164 | adfrontlink: r, 165 | adpause: d,//暂停广告 166 | adpausetime: t, 167 | adpauselink: u, 168 | video: url 169 | }; 170 | } 171 | 172 | if (starttime > 0) { 173 | videoObject['seek'] = starttime; 174 | } 175 | player = new ckplayer(videoObject); 176 | cb(); 177 | 178 | 179 | } 180 | var p2pdown = 0; 181 | function getPlayList(url, cb) { 182 | 183 | $.get(url, function (result) { 184 | cb(null, result); 185 | }) 186 | } 187 | 188 | 189 | 190 | function getproxyurl(torrent, url, cb) { 191 | if (torrent == "") return cb(url); 192 | MPlayer.isReady(function (err) { 193 | if (err) return cb(url) 194 | MPlayer.play(torrent, function (err, newurl) { 195 | if (newurl) return cb(newurl) 196 | return cb(url) 197 | }) 198 | }) 199 | } 200 | //dplayer 201 | function dplay(main, xml, starttime, cb) { 202 | var type = 'hls'; 203 | if(Hls.isSupported() && Hls.WEBRTC_SUPPORT) { 204 | type = 'customHls'; 205 | } 206 | var newurl = main + "?skipl=1"; 207 | if (main.indexOf("?") > 0) 208 | newurl = main + "&skipl=1" 209 | getPlayList(newurl, function (err, result) { 210 | var url = main 211 | var playcfg = { 212 | container: document.getElementById('mvideo'), 213 | screenshot: true, 214 | autoplay: true, 215 | pic: pic, 216 | video: { 217 | pic: pic, 218 | url: url, 219 | type: type, 220 | customType: { 221 | 'customHls': function (video, player) { 222 | const hls = new Hls({ 223 | debug: false, 224 | // Other hlsjsConfig options provided by hls.js 225 | p2pConfig: { 226 | live: false, 227 | showSlogan: false, 228 | channelIdPrefix: location.hostname, 229 | channelId: function (url) { 230 | return videoid 231 | }, 232 | segmentId: function (streamId, sn, url, range) { 233 | return ""+sn; 234 | }, 235 | } 236 | }); 237 | hls.loadSource(video.src); 238 | hls.attachMedia(video); 239 | } 240 | }, 241 | }, 242 | }; 243 | 244 | if (result) { 245 | var labels = ["标清", "高清", "超清", "蓝光"] 246 | var parser = new m3u8Parser.Parser(); 247 | parser.push(result); 248 | parser.end(); 249 | var qualitys = []; 250 | var playlist = parser.manifest.playlists; 251 | 252 | if (playlist && playlist.length > 1) { 253 | console.log(playlist, playlist.length) 254 | if (main.indexOf("https") < 0 && main.indexOf("http") < 0) 255 | main = window.location.protocol + "//" + window.location.host + main; 256 | // alert(main) 257 | let mainURL = new URL(main); 258 | for (var i = 0; i < playlist.length; i++) { 259 | let surl = playlist[i].uri; 260 | if (surl.indexOf("https") < 0 && surl.indexOf("http") < 0) { 261 | 262 | surl = mainURL.protocol + "//" + mainURL.host + surl 263 | } 264 | qualitys.push({ 265 | name: labels[i], 266 | url: surl, 267 | type: 'hls' 268 | }) 269 | } 270 | playcfg.video.quality = qualitys 271 | delete playcfg.video.url; 272 | playcfg.video.defaultQuality = 0; 273 | console.log(playcfg) 274 | } 275 | } 276 | 277 | var hostname = window.location.hostname 278 | var port = window.location.port || '80'; 279 | var picurl = window.location.protocol + "//" + window.location.host + pic; 280 | var url = window.location.protocol + "//" + window.location.host + main 281 | if (main.indexOf("/") != 0) 282 | url = window.location.protocol + "//" + window.location.host + "/" + main 283 | xml = window.location.protocol + "//" + window.location.host + xml 284 | 285 | if (window.location.protocol.indexOf("https") >= 0) 286 | port = window.location.port ? window.location.port : 443 287 | else 288 | port = window.location.port ? window.location.port : 80 289 | // magnet = ""; 290 | //getproxyurl(magnet, url, function (url) { 291 | //分析url 获取播放列表 292 | 293 | // var cdn = new NGCdn(cfg); 294 | 295 | var danmaku = { 296 | id: videoid, // Required, danmaku id, MUST BE UNIQUE, CAN NOT USE THESE IN YOUR NEW PLAYER: `https://dplayer.daoapp.io/list` 297 | api: '/', // Required, danmaku api 298 | token: 'tokendemo', // Optional, danmaku token for api 299 | unlimited: true, 300 | maximum: 100 301 | } 302 | 303 | if (danmuenable == 1) 304 | playcfg.danmaku = danmaku 305 | 306 | 307 | player = new DPlayer(playcfg); 308 | player.on('timeupdate', function () { 309 | 310 | var t = player.video.currentTime; 311 | if (t > 0) 312 | SetCookie(videoid + "_time", t); 313 | }) 314 | if (starttime > 0) 315 | player.seek(starttime) 316 | var adELE = $("#indexview"); 317 | player.on('pause', function () { 318 | if (d.length != 0) { 319 | adELE.html("
").show(); 320 | $('.adcontent img').load(function () { 321 | var adwidth = $('.adcontent').width(); 322 | var adheight = $('.adcontent').height(); 323 | $('.adcontent').css('marginLeft', '-' + (adwidth / 2) + 'px'); 324 | $('.adcontent').css('marginTop', '-' + (adheight / 2) + 'px'); 325 | }) 326 | 327 | } 328 | }) 329 | if (l.length != 0) { 330 | adELE.html("
").show(); 331 | $('.adcontent img').load(function () { 332 | var adwidth = $('.adcontent').width(); 333 | var adheight = $('.adcontent').height(); 334 | $('.adcontent').css('marginLeft', '-' + (adwidth / 2) + 'px'); 335 | $('.adcontent').css('marginTop', '-' + (adheight / 2) + 'px'); 336 | }) 337 | setTimeout(() => { 338 | adELE.hide(); 339 | player.play(); 340 | }, t * 1000); 341 | } else { 342 | player.play(); 343 | } 344 | 345 | player.on('play', function () { 346 | $("#orderview").hide(); 347 | $("#indexview").hide(); 348 | }); 349 | cb(); 350 | }) 351 | } 352 | -------------------------------------------------------------------------------- /demo/ppvod/dplayer/DPlayer.min.css: -------------------------------------------------------------------------------- 1 | button[data-balloon]{overflow:visible}[data-balloon]{position:relative;cursor:pointer}[data-balloon]:after{font-family:sans-serif!important;font-weight:400!important;font-style:normal!important;text-shadow:none!important;font-size:12px!important;background:hsla(0,0%,7%,.9);border-radius:4px;color:#fff;content:attr(data-balloon);padding:.5em 1em;white-space:nowrap}[data-balloon]:after,[data-balloon]:before{filter:alpha(opactiy=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0;pointer-events:none;transition:all .18s ease-out .18s;position:absolute;z-index:10}[data-balloon]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;content:""}[data-balloon]:hover:after,[data-balloon]:hover:before,[data-balloon][data-balloon-visible]:after,[data-balloon][data-balloon-visible]:before{filter:alpha(opactiy=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;pointer-events:auto}[data-balloon].font-awesome:after{font-family:FontAwesome}[data-balloon][data-balloon-break]:after{white-space:pre}[data-balloon][data-balloon-blunt]:after,[data-balloon][data-balloon-blunt]:before{transition:none}[data-balloon][data-balloon-pos=up]:after{margin-bottom:11px}[data-balloon][data-balloon-pos=up]:after,[data-balloon][data-balloon-pos=up]:before{bottom:100%;left:50%;-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up]:before{margin-bottom:5px}[data-balloon][data-balloon-pos=up]:hover:after,[data-balloon][data-balloon-pos=up]:hover:before,[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=up-left]:after{left:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-left]:after,[data-balloon][data-balloon-pos=up-left]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-left]:before{left:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-left]:hover:after,[data-balloon][data-balloon-pos=up-left]:hover:before,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=up-right]:after{right:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-right]:after,[data-balloon][data-balloon-pos=up-right]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-right]:before{right:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-right]:hover:after,[data-balloon][data-balloon-pos=up-right]:hover:before,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down]:after{margin-top:11px}[data-balloon][data-balloon-pos=down]:after,[data-balloon][data-balloon-pos=down]:before{left:50%;top:100%;-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-balloon][data-balloon-pos=down]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;margin-top:5px}[data-balloon][data-balloon-pos=down]:hover:after,[data-balloon][data-balloon-pos=down]:hover:before,[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=down-left]:after{left:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;left:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:hover:after,[data-balloon][data-balloon-pos=down-left]:hover:before,[data-balloon][data-balloon-pos=down-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down-right]:after{right:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-right]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;right:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-right]:hover:after,[data-balloon][data-balloon-pos=down-right]:hover:before,[data-balloon][data-balloon-pos=down-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=left]:after{margin-right:11px;right:100%;top:50%;-webkit-transform:translate(10px,-50%);transform:translate(10px,-50%)}[data-balloon][data-balloon-pos=left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M0 33.342V1.338c0 6 12.002 11.627 12.002 16.002C12.002 21.715 0 27.406 0 33.342z'/%3E%3C/svg%3E");background-size:100% auto;width:6px;height:18px;margin-right:5px;right:100%;top:50%;-webkit-transform:translate(10px,-50%);transform:translate(10px,-50%)}[data-balloon][data-balloon-pos=left]:hover:after,[data-balloon][data-balloon-pos=left]:hover:before,[data-balloon][data-balloon-pos=left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=left][data-balloon-visible]:before{-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-balloon][data-balloon-pos=right]:after{left:100%;margin-left:11px;top:50%;-webkit-transform:translate(-10px,-50%);transform:translate(-10px,-50%)}[data-balloon][data-balloon-pos=right]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M12 2.658v32.004c0-6-12.002-11.627-12.002-16.002C-.002 14.285 12 8.594 12 2.658z'/%3E%3C/svg%3E");background-size:100% auto;width:6px;height:18px;left:100%;margin-left:5px;top:50%;-webkit-transform:translate(-10px,-50%);transform:translate(-10px,-50%)}[data-balloon][data-balloon-pos=right]:hover:after,[data-balloon][data-balloon-pos=right]:hover:before,[data-balloon][data-balloon-pos=right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=right][data-balloon-visible]:before{-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-balloon][data-balloon-length=small]:after{white-space:normal;width:80px}[data-balloon][data-balloon-length=medium]:after{white-space:normal;width:150px}[data-balloon][data-balloon-length=large]:after{white-space:normal;width:260px}[data-balloon][data-balloon-length=xlarge]:after{white-space:normal;width:380px}@media screen and (max-width:768px){[data-balloon][data-balloon-length=xlarge]:after{white-space:normal;width:90vw}}[data-balloon][data-balloon-length=fit]:after{white-space:normal;width:100%} 2 | @-webkit-keyframes my-face{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}32%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}}@keyframes my-face{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}32%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}}.dplayer{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:1}.dplayer *{box-sizing:content-box}.dplayer svg{width:100%;height:100%}.dplayer svg circle,.dplayer svg path{fill:#fff}.dplayer:-webkit-full-screen{width:100%;height:100%;background:#000;position:fixed;z-index:100000;left:0;top:0;margin:0;padding:0;-webkit-transform:translate(0);transform:translate(0)}.dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-bottom.dplayer-danmaku-move,.dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-top.dplayer-danmaku-move{-webkit-animation:danmaku-center 6s linear;animation:danmaku-center 6s linear;-webkit-animation-play-state:inherit;animation-play-state:inherit}.dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-right.dplayer-danmaku-move{-webkit-animation:danmaku 8s linear;animation:danmaku 8s linear;-webkit-animation-play-state:inherit;animation-play-state:inherit}.dplayer.dplayer-live .dplayer-bar-wrap,.dplayer.dplayer-live.dplayer-no-danmaku .dplayer-setting,.dplayer.dplayer-live .dplayer-setting-loop,.dplayer.dplayer-live .dplayer-setting-speed,.dplayer.dplayer-live .dplayer-time,.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-comment,.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box .dplayer-setting-danmaku,.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box .dplayer-setting-danunlimit,.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box .dplayer-setting-showdan,.dplayer.dplayer-no-danmaku .dplayer-danmaku{display:none}.dplayer.dplayer-arrow .dplayer-danmaku{font-size:18px}.dplayer.dplayer-arrow .dplayer-icon{margin:0 -3px}.dplayer.dplayer-playing .dplayer-danmaku .dplayer-danmaku-move{-webkit-animation-play-state:running;animation-play-state:running}@media (min-width:900px){.dplayer.dplayer-playing .dplayer-controller,.dplayer.dplayer-playing .dplayer-controller-mask{opacity:0}.dplayer.dplayer-playing:hover .dplayer-controller,.dplayer.dplayer-playing:hover .dplayer-controller-mask{opacity:1}}.dplayer.dplayer-loading .dplayer-bezel .diplayer-loading-icon{display:block}.dplayer.dplayer-loading .dplayer-danmaku,.dplayer.dplayer-loading .dplayer-danmaku-move,.dplayer.dplayer-paused .dplayer-danmaku,.dplayer.dplayer-paused .dplayer-danmaku-move{-webkit-animation-play-state:paused;animation-play-state:paused}.dplayer.dplayer-hide-controller{cursor:none}.dplayer.dplayer-hide-controller .dplayer-controller,.dplayer.dplayer-hide-controller .dplayer-controller-mask{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}.dplayer.dplayer-show-controller .dplayer-controller,.dplayer.dplayer-show-controller .dplayer-controller-mask{opacity:1}.dplayer.dplayer-fulled{position:fixed;z-index:100000;left:0;top:0;width:100%;height:100%}.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-camera-icon,.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-volume{display:none}.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-full .dplayer-full-in-icon{position:static;display:inline-block}.dplayer.dplayer-mobile .dplayer-bar-time{display:none}.dplayer-web-fullscreen-fix{position:fixed;top:0;left:0;margin:0;padding:0}[data-balloon]:before{display:none}[data-balloon]:after{padding:.3em .7em;background:hsla(0,0%,7%,.7)}[data-balloon][data-balloon-pos=up]:after{margin-bottom:0}.dplayer-bezel{position:absolute;left:0;right:0;top:0;bottom:0;font-size:22px;color:#fff;pointer-events:none}.dplayer-bezel .dplayer-bezel-icon{position:absolute;top:50%;left:50%;margin:-26px 0 0 -26px;height:52px;width:52px;padding:12px;box-sizing:border-box;background:rgba(0,0,0,.5);border-radius:50%;opacity:0;pointer-events:none}.dplayer-bezel .dplayer-bezel-icon.dplayer-bezel-transition{-webkit-animation:bezel-hide .5s linear;animation:bezel-hide .5s linear}@-webkit-keyframes bezel-hide{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@keyframes bezel-hide{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}.dplayer-bezel .dplayer-danloading{position:absolute;top:50%;margin-top:-7px;width:100%;text-align:center;font-size:14px;line-height:14px;-webkit-animation:my-face 5s infinite ease-in-out;animation:my-face 5s infinite ease-in-out}.dplayer-bezel .diplayer-loading-icon{display:none;position:absolute;top:50%;left:50%;margin:-18px 0 0 -18px;height:36px;width:36px;pointer-events:none}.dplayer-bezel .diplayer-loading-icon .diplayer-loading-hide{display:none}.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot{-webkit-animation:diplayer-loading-dot-fade .8s ease infinite;animation:diplayer-loading-dot-fade .8s ease infinite;opacity:0;-webkit-transform-origin:4px 4px;transform-origin:4px 4px}.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-7{-webkit-animation-delay:.7s;animation-delay:.7s}.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-6{-webkit-animation-delay:.6s;animation-delay:.6s}.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-5{-webkit-animation-delay:.5s;animation-delay:.5s}.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-4{-webkit-animation-delay:.4s;animation-delay:.4s}.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-3{-webkit-animation-delay:.3s;animation-delay:.3s}.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-2{-webkit-animation-delay:.2s;animation-delay:.2s}.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-1{-webkit-animation-delay:.1s;animation-delay:.1s}@-webkit-keyframes diplayer-loading-dot-fade{0%{opacity:.7;-webkit-transform:scale(1.2);transform:scale(1.2)}50%{opacity:.25;-webkit-transform:scale(.9);transform:scale(.9)}to{opacity:.25;-webkit-transform:scale(.85);transform:scale(.85)}}@keyframes diplayer-loading-dot-fade{0%{opacity:.7;-webkit-transform:scale(1.2);transform:scale(1.2)}50%{opacity:.25;-webkit-transform:scale(.9);transform:scale(.9)}to{opacity:.25;-webkit-transform:scale(.85);transform:scale(.85)}}.dplayer-controller-mask{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;height:98px;width:100%}.dplayer-controller,.dplayer-controller-mask{position:absolute;bottom:0;transition:all .3s ease}.dplayer-controller{left:0;right:0;height:41px;padding:0 20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dplayer-controller.dplayer-controller-comment .dplayer-icons{display:none}.dplayer-controller.dplayer-controller-comment .dplayer-icons.dplayer-comment-box{display:block}.dplayer-controller .dplayer-bar-wrap{padding:5px 0;cursor:pointer;position:absolute;bottom:33px;width:calc(100% - 40px);height:3px}.dplayer-controller .dplayer-bar-wrap:hover .dplayer-bar .dplayer-played .dplayer-thumb{-webkit-transform:scale(1);transform:scale(1)}.dplayer-controller .dplayer-bar-wrap:hover .dplayer-highlight{display:block;width:8px;-webkit-transform:translateX(-4px);transform:translateX(-4px);top:4px;height:40%}.dplayer-controller .dplayer-bar-wrap .dplayer-highlight{z-index:12;position:absolute;top:5px;width:6px;height:20%;border-radius:6px;background-color:#fff;text-align:center;-webkit-transform:translateX(-3px);transform:translateX(-3px);transition:all .2s ease-in-out}.dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover .dplayer-highlight-text{display:block}.dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover~.dplayer-bar-preview,.dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover~.dplayer-bar-time{opacity:0}.dplayer-controller .dplayer-bar-wrap .dplayer-highlight .dplayer-highlight-text{display:none;position:absolute;left:50%;top:-24px;padding:5px 8px;background-color:rgba(0,0,0,.62);color:#fff;border-radius:4px;font-size:12px;white-space:nowrap;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.dplayer-controller .dplayer-bar-wrap .dplayer-bar-preview{position:absolute;background:#fff;pointer-events:none;display:none;background-size:16000px 100%}.dplayer-controller .dplayer-bar-wrap .dplayer-bar-preview-canvas{position:absolute;width:100%;height:100%;z-index:1;pointer-events:none}.dplayer-controller .dplayer-bar-wrap .dplayer-bar-time{position:absolute;left:0;top:-20px;border-radius:4px;padding:5px 7px;background-color:rgba(0,0,0,.62);color:#fff;font-size:12px;text-align:center;opacity:1;transition:opacity .1s ease-in-out;word-wrap:normal;word-break:normal;z-index:2;pointer-events:none}.dplayer-controller .dplayer-bar-wrap .dplayer-bar-time.hidden{opacity:0}.dplayer-controller .dplayer-bar-wrap .dplayer-bar{position:relative;height:3px;width:100%;background:hsla(0,0%,100%,.2);cursor:pointer}.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-loaded{background:hsla(0,0%,100%,.4);transition:all .5s ease}.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-loaded,.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played{position:absolute;left:0;top:0;bottom:0;height:3px;will-change:width}.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played .dplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:11px;width:11px;border-radius:50%;cursor:pointer;transition:all .3s ease-in-out;-webkit-transform:scale(0);transform:scale(0)}.dplayer-controller .dplayer-icons{height:38px;position:absolute;bottom:0}.dplayer-controller .dplayer-icons.dplayer-comment-box{display:none;position:absolute;transition:all .3s ease-in-out;z-index:2;height:38px;bottom:0;left:20px;right:20px;color:#fff}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-icon{padding:7px}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-icon{position:absolute;left:0;top:0}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-send-icon{position:absolute;right:0;top:0}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box{position:absolute;background:rgba(28,28,28,.9);bottom:41px;left:0;box-shadow:0 0 25px rgba(0,0,0,.3);border-radius:4px;padding:10px 10px 16px;font-size:14px;width:204px;transition:all .3s ease-in-out;-webkit-transform:scale(0);transform:scale(0)}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box.dplayer-comment-setting-open{-webkit-transform:scale(1);transform:scale(1)}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box input[type=radio]{display:none}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box label{cursor:pointer}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-title{font-size:13px;color:#fff;line-height:30px}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type{font-size:0}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type .dplayer-comment-setting-title{margin-bottom:6px}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type label:nth-child(2) span{border-radius:4px 0 0 4px}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type label:nth-child(4) span{border-radius:0 4px 4px 0}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type span{width:33%;padding:4px 6px;line-height:16px;display:inline-block;font-size:12px;color:#fff;border:1px solid #fff;margin-right:-1px;box-sizing:border-box;text-align:center;cursor:pointer}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type input:checked+span{background:#e4e4e6;color:#1c1c1c}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color{font-size:0}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color label{font-size:0;padding:6px;display:inline-block}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color span{width:22px;height:22px;display:inline-block;border-radius:50%;box-sizing:border-box;cursor:pointer}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color span:hover{-webkit-animation:my-face 5s infinite ease-in-out;animation:my-face 5s infinite ease-in-out}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input{outline:none;border:none;padding:8px 31px;font-size:14px;line-height:18px;text-align:center;border-radius:4px;background:none;margin:0;height:100%;box-sizing:border-box;width:100%;color:#fff}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input::-webkit-input-placeholder{color:#fff;opacity:.8}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input:-ms-input-placeholder,.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input::-ms-input-placeholder{color:#fff;opacity:.8}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input::placeholder{color:#fff;opacity:.8}.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input::-ms-clear{display:none}.dplayer-controller .dplayer-icons.dplayer-icons-left .dplayer-icon{padding:7px}.dplayer-controller .dplayer-icons.dplayer-icons-right{right:20px}.dplayer-controller .dplayer-icons.dplayer-icons-right .dplayer-icon{padding:8px}.dplayer-controller .dplayer-icons .dplayer-live-badge,.dplayer-controller .dplayer-icons .dplayer-time{line-height:38px;color:#eee;text-shadow:0 0 2px rgba(0,0,0,.5);vertical-align:middle;font-size:13px;cursor:default}.dplayer-controller .dplayer-icons .dplayer-live-dot{display:inline-block;width:6px;height:6px;vertical-align:4%;margin-right:5px;content:"";border-radius:6px}.dplayer-controller .dplayer-icons .dplayer-icon{width:40px;height:100%;border:none;background-color:transparent;outline:none;cursor:pointer;vertical-align:middle;box-sizing:border-box;display:inline-block}.dplayer-controller .dplayer-icons .dplayer-icon .dplayer-icon-content{transition:all .2s ease-in-out;opacity:.8}.dplayer-controller .dplayer-icons .dplayer-icon:hover .dplayer-icon-content{opacity:1}.dplayer-controller .dplayer-icons .dplayer-icon.dplayer-quality-icon{color:#fff;width:auto;line-height:22px;font-size:14px}.dplayer-controller .dplayer-icons .dplayer-icon.dplayer-comment-icon{padding:10px 9px 9px}.dplayer-controller .dplayer-icons .dplayer-icon.dplayer-setting-icon{padding-top:8.5px}.dplayer-controller .dplayer-icons .dplayer-icon.dplayer-volume-icon{width:43px}.dplayer-controller .dplayer-icons .dplayer-volume{position:relative;display:inline-block;cursor:pointer;height:100%}.dplayer-controller .dplayer-icons .dplayer-volume:hover .dplayer-volume-bar-wrap .dplayer-volume-bar{width:45px}.dplayer-controller .dplayer-icons .dplayer-volume:hover .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner .dplayer-thumb{-webkit-transform:scale(1);transform:scale(1)}.dplayer-controller .dplayer-icons .dplayer-volume.dplayer-volume-active .dplayer-volume-bar-wrap .dplayer-volume-bar{width:45px}.dplayer-controller .dplayer-icons .dplayer-volume.dplayer-volume-active .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner .dplayer-thumb{-webkit-transform:scale(1);transform:scale(1)}.dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap{display:inline-block;margin:0 10px 0 -5px;vertical-align:middle;height:100%}.dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar{position:relative;top:17px;width:0;height:3px;background:#aaa;transition:all .3s ease-in-out}.dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner{position:absolute;bottom:0;left:0;height:100%;transition:all .1s ease;will-change:width}.dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner .dplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:11px;width:11px;border-radius:50%;cursor:pointer;transition:all .3s ease-in-out;-webkit-transform:scale(0);transform:scale(0)}.dplayer-controller .dplayer-icons .dplayer-setting,.dplayer-controller .dplayer-icons .dplayer-subtitle-btn{display:inline-block;height:100%}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box{position:absolute;right:0;bottom:50px;-webkit-transform:scale(0);transform:scale(0);width:150px;border-radius:2px;background:rgba(28,28,28,.9);padding:7px 0;transition:all .3s ease-in-out;overflow:hidden;z-index:2}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box>div{display:none}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box>div.dplayer-setting-origin-panel{display:block}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-open{-webkit-transform:scale(1);transform:scale(1)}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-narrow{width:70px;height:180px;text-align:center}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-speed .dplayer-setting-origin-panel{display:none}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-speed .dplayer-setting-speed-panel{display:block}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-item,.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-speed-item{height:30px;padding:5px 10px;box-sizing:border-box;cursor:pointer;position:relative}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-item:hover,.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-speed-item:hover{background-color:hsla(0,0%,100%,.1)}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku{padding:5px 0}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-label{padding:0 10px;display:inline}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku:hover .dplayer-label{display:none}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku:hover .dplayer-danmaku-bar-wrap{display:inline-block}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku.dplayer-setting-danmaku-active .dplayer-label{display:none}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku.dplayer-setting-danmaku-active .dplayer-danmaku-bar-wrap{display:inline-block}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap{padding:0 10px;box-sizing:border-box;display:none;vertical-align:middle;height:100%;width:100%}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar{position:relative;top:8.5px;width:100%;height:3px;background:#fff;transition:all .3s ease-in-out}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar .dplayer-danmaku-bar-inner{position:absolute;bottom:0;left:0;height:100%;transition:all .1s ease;background:#aaa;will-change:width}.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar .dplayer-danmaku-bar-inner .dplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:11px;width:11px;border-radius:50%;cursor:pointer;transition:all .3s ease-in-out;background:#aaa}.dplayer-controller .dplayer-icons .dplayer-full{display:inline-block;height:100%;position:relative}.dplayer-controller .dplayer-icons .dplayer-full:hover .dplayer-full-in-icon{display:block}.dplayer-controller .dplayer-icons .dplayer-full .dplayer-full-in-icon{position:absolute;top:-30px;z-index:1;display:none}.dplayer-controller .dplayer-icons .dplayer-quality{position:relative;display:inline-block;height:100%;z-index:2}.dplayer-controller .dplayer-icons .dplayer-quality:hover .dplayer-quality-list,.dplayer-controller .dplayer-icons .dplayer-quality:hover .dplayer-quality-mask{display:block}.dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-mask{display:none;position:absolute;bottom:38px;left:-18px;width:80px;padding-bottom:12px}.dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-list{display:none;font-size:12px;width:80px;border-radius:2px;background:rgba(28,28,28,.9);padding:5px 0;transition:all .3s ease-in-out;overflow:hidden;color:#fff;text-align:center}.dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-item{height:25px;box-sizing:border-box;cursor:pointer;line-height:25px}.dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-item:hover{background-color:hsla(0,0%,100%,.1)}.dplayer-controller .dplayer-icons .dplayer-comment{display:inline-block;height:100%}.dplayer-controller .dplayer-icons .dplayer-label{color:#eee;font-size:13px;display:inline-block;vertical-align:middle;white-space:nowrap}.dplayer-controller .dplayer-icons .dplayer-toggle{width:32px;height:20px;text-align:center;font-size:0;vertical-align:middle;position:absolute;top:5px;right:10px}.dplayer-controller .dplayer-icons .dplayer-toggle input{max-height:0;max-width:0;display:none}.dplayer-controller .dplayer-icons .dplayer-toggle input+label{display:inline-block;position:relative;box-shadow:inset 0 0 0 0 #dfdfdf;border:1px solid #dfdfdf;height:20px;width:32px;border-radius:10px;box-sizing:border-box;cursor:pointer;transition:.2s ease-in-out}.dplayer-controller .dplayer-icons .dplayer-toggle input+label:after,.dplayer-controller .dplayer-icons .dplayer-toggle input+label:before{content:"";position:absolute;display:block;height:18px;width:18px;top:0;left:0;border-radius:15px;transition:.2s ease-in-out}.dplayer-controller .dplayer-icons .dplayer-toggle input+label:after{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}.dplayer-controller .dplayer-icons .dplayer-toggle input:checked+label{border-color:hsla(0,0%,100%,.5)}.dplayer-controller .dplayer-icons .dplayer-toggle input:checked+label:before{width:30px;background:hsla(0,0%,100%,.5)}.dplayer-controller .dplayer-icons .dplayer-toggle input:checked+label:after{left:12px}.dplayer-danmaku{position:absolute;left:0;right:0;top:0;bottom:0;font-size:22px;color:#fff}.dplayer-danmaku .dplayer-danmaku-item{display:inline-block;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;white-space:nowrap;text-shadow:.5px .5px .5px rgba(0,0,0,.5)}.dplayer-danmaku .dplayer-danmaku-item--demo{position:absolute;visibility:hidden}.dplayer-danmaku .dplayer-danmaku-right{position:absolute;right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.dplayer-danmaku .dplayer-danmaku-right.dplayer-danmaku-move{will-change:transform;-webkit-animation:danmaku 5s linear;animation:danmaku 5s linear;-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes danmaku{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes danmaku{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}}.dplayer-danmaku .dplayer-danmaku-bottom,.dplayer-danmaku .dplayer-danmaku-top{position:absolute;width:100%;text-align:center;visibility:hidden}.dplayer-danmaku .dplayer-danmaku-bottom.dplayer-danmaku-move,.dplayer-danmaku .dplayer-danmaku-top.dplayer-danmaku-move{will-change:visibility;-webkit-animation:danmaku-center 4s linear;animation:danmaku-center 4s linear;-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes danmaku-center{0%{visibility:visible}to{visibility:visible}}@keyframes danmaku-center{0%{visibility:visible}to{visibility:visible}}.dplayer-logo{pointer-events:none;position:absolute;left:20px;top:20px;max-width:50px;max-height:50px}.dplayer-logo img{max-width:100%;max-height:100%;background:none}.dplayer-menu{position:absolute;width:170px;border-radius:2px;background:rgba(28,28,28,.85);padding:5px 0;overflow:hidden;z-index:3;display:none}.dplayer-menu.dplayer-menu-show{display:block}.dplayer-menu .dplayer-menu-item{height:30px;box-sizing:border-box;cursor:pointer}.dplayer-menu .dplayer-menu-item:hover{background-color:hsla(0,0%,100%,.1)}.dplayer-menu .dplayer-menu-item a{padding:0 10px;line-height:30px;color:#eee;font-size:13px;display:inline-block;vertical-align:middle;width:100%;box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dplayer-menu .dplayer-menu-item a:hover{text-decoration:none}.dplayer-notice{opacity:0;position:absolute;bottom:60px;left:20px;font-size:14px;border-radius:2px;background:rgba(28,28,28,.9);padding:7px 20px;transition:all .3s ease-in-out;overflow:hidden;color:#fff;pointer-events:none}.dplayer-subtitle{position:absolute;bottom:40px;width:90%;left:5%;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px}.dplayer-subtitle.dplayer-subtitle-hide{display:none}.dplayer-mask{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;display:none}.dplayer-mask.dplayer-mask-show{display:block}.dplayer-video-wrap{position:relative;background:#000;font-size:0;width:100%;height:100%}.dplayer-video-wrap .dplayer-video{width:100%;height:100%;display:none}.dplayer-video-wrap .dplayer-video-current{display:block}.dplayer-video-wrap .dplayer-video-prepare{display:none}.dplayer-info-panel{position:absolute;top:10px;left:10px;width:400px;background:rgba(28,28,28,.8);padding:10px;color:#fff;font-size:12px;border-radius:2px}.dplayer-info-panel-hide{display:none}.dplayer-info-panel .dplayer-info-panel-close{cursor:pointer;position:absolute;right:10px;top:10px}.dplayer-info-panel .dplayer-info-panel-item>span{display:inline-block;vertical-align:middle;line-height:15px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dplayer-info-panel .dplayer-info-panel-item-title{width:100px;text-align:right;margin-right:10px}.dplayer-info-panel .dplayer-info-panel-item-data{width:260px} 3 | 4 | /*# sourceMappingURL=DPlayer.min.css.map*/ -------------------------------------------------------------------------------- /demo/ppvod/dplayer/DPlayer.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack://[name]/./node_modules/balloon-css/balloon.css","webpack://[name]/./src/css/index.scss"],"names":[],"mappings":"AAAA,qBACE,gBAAkB,CAEpB,eACE,kBACA,cAAgB,CAChB,qBAQE,iCACA,0BACA,4BACA,2BACA,yBACA,4BACA,kBACA,WACA,2BACA,iBAEA,kBAAoB,CAEtB,2CApBE,wBACA,gEACA,eACA,iBACA,UACA,oBACA,kCAWA,kBAEA,UAAY,CAeE,sBAbd,uQACA,0BACA,WACA,WAQA,UAAY,CAGd,8IACE,0BACA,kEACA,eACA,iBACA,UACA,mBAAqB,CACvB,kCACE,uBAAyB,CAC3B,yCACE,eAAiB,CACnB,mFACE,eAAiB,CACnB,0CAGE,kBAAoB,CAKtB,qFAPE,YACA,SAEA,uCACA,+BACA,6BACA,oBAAsB,CAQE,2CAJxB,iBAAmB,CAQrB,kOACE,kCACA,yBAA8B,CAChC,+CAEE,OACA,kBAAoB,CAKtB,+FAPE,YAGA,mCACA,2BACA,6BACA,oBAAsB,CAQE,gDALxB,SACA,iBAAmB,CAQrB,sPACE,+BACA,sBAA2B,CAC7B,gDAEE,QACA,kBAAoB,CAKtB,iGAPE,YAGA,mCACA,2BACA,6BACA,oBAAsB,CAQE,iDALxB,UACA,iBAAmB,CAQrB,0PACE,+BACA,sBAA2B,CAC7B,4CAEE,eAAiB,CAInB,yFALE,SAEA,SACA,wCACA,+BAAkC,CAUE,6CARpC,yQACA,0BACA,WACA,WAEA,cAAgB,CAOlB,0OACE,kCACA,yBAA8B,CAChC,iDACE,OACA,gBACA,SACA,oCACA,2BAA+B,CACjC,kDACE,yQACA,0BACA,WACA,WACA,SACA,eACA,SACA,oCACA,2BAA+B,CAIjC,8PACE,+BACA,sBAA2B,CAC7B,kDACE,QACA,gBACA,SACA,oCACA,2BAA+B,CACjC,mDACE,yQACA,0BACA,WACA,WACA,UACA,eACA,SACA,oCACA,2BAA+B,CAIjC,kQACE,+BACA,sBAA2B,CAC7B,4CACE,kBACA,WACA,QACA,uCACA,8BAAiC,CACnC,6CACE,wQACA,0BACA,UACA,YACA,iBACA,WACA,QACA,uCACA,8BAAiC,CAInC,0OACE,mCACA,0BAA8B,CAChC,6CACE,UACA,iBACA,QACA,wCACA,+BAAkC,CACpC,8CACE,wQACA,0BACA,UACA,YACA,UACA,gBACA,QACA,wCACA,+BAAkC,CAIpC,8OACE,mCACA,0BAA8B,CAChC,gDACE,mBACA,UAAY,CACd,iDACE,mBACA,WAAa,CACf,gDACE,mBACA,WAAa,CACf,iDACE,mBACA,WAAa,CACb,oCACE,iDACE,mBACA,UAAY,CAAE,CACpB,8CACE,mBACA,UAAY,C;ACxPhB,2BACE,GACE,mDACQ,0CAA8C,CACxD,GACE,oDACQ,2CAAgD,CAC1D,GACE,oDACQ,2CAA+C,CACzD,GACE,qDACQ,4CAAgD,CAC1D,IACE,mDACQ,0CAA8C,CACxD,IACE,mDACQ,0CAA+C,CACzD,IACE,oDACQ,2CAA+C,CACzD,IACE,oDACQ,2CAAgD,CAC1D,IACE,mDACQ,0CAA+C,CACzD,IACE,oDACQ,2CAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,mDACQ,0CAA8C,CACxD,IACE,iDACQ,wCAA8C,CACxD,IACE,kDACQ,yCAA8C,CACxD,IACE,mDACQ,0CAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,oDACQ,2CAA+C,CACzD,IACE,oDACQ,2CAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,oDACQ,2CAA+C,CACzD,IACE,kDACQ,yCAA8C,CACxD,IACE,oDACQ,2CAA+C,CACzD,IACE,kDACQ,yCAA+C,CACzD,IACE,iDACQ,wCAA8C,CACxD,IACE,mDACQ,0CAA8C,CACxD,IACE,oDACQ,2CAA+C,CACzD,IACE,mDACQ,0CAA8C,CACxD,IACE,kDACQ,yCAA8C,CACxD,IACE,mDACQ,0CAA8C,CACxD,IACE,mDACQ,0CAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,oDACQ,2CAAgD,CAC1D,IACE,kDACQ,yCAA8C,CACxD,IACE,mDACQ,0CAA8C,CACxD,IACE,kDACQ,yCAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,mDACQ,0CAA8C,CACxD,IACE,kDACQ,yCAA+C,CACzD,IACE,mDACQ,0CAA8C,CACxD,IACE,qDACQ,4CAAgD,CAC1D,IACE,mDACQ,0CAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,kDACQ,yCAA+C,CACzD,IACE,kDACQ,yCAA8C,CACxD,IACE,mDACQ,0CAA+C,CACzD,IACE,oDACQ,2CAAgD,CAC1D,MAEE,4CACQ,mCAAwC,CAAE,CACtD,mBACE,GACE,mDACQ,0CAA8C,CACxD,GACE,oDACQ,2CAAgD,CAC1D,GACE,oDACQ,2CAA+C,CACzD,GACE,qDACQ,4CAAgD,CAC1D,IACE,mDACQ,0CAA8C,CACxD,IACE,mDACQ,0CAA+C,CACzD,IACE,oDACQ,2CAA+C,CACzD,IACE,oDACQ,2CAAgD,CAC1D,IACE,mDACQ,0CAA+C,CACzD,IACE,oDACQ,2CAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,mDACQ,0CAA8C,CACxD,IACE,iDACQ,wCAA8C,CACxD,IACE,kDACQ,yCAA8C,CACxD,IACE,mDACQ,0CAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,oDACQ,2CAA+C,CACzD,IACE,oDACQ,2CAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,oDACQ,2CAA+C,CACzD,IACE,kDACQ,yCAA8C,CACxD,IACE,oDACQ,2CAA+C,CACzD,IACE,kDACQ,yCAA+C,CACzD,IACE,iDACQ,wCAA8C,CACxD,IACE,mDACQ,0CAA8C,CACxD,IACE,oDACQ,2CAA+C,CACzD,IACE,mDACQ,0CAA8C,CACxD,IACE,kDACQ,yCAA8C,CACxD,IACE,mDACQ,0CAA8C,CACxD,IACE,mDACQ,0CAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,oDACQ,2CAAgD,CAC1D,IACE,kDACQ,yCAA8C,CACxD,IACE,mDACQ,0CAA8C,CACxD,IACE,kDACQ,yCAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,mDACQ,0CAA8C,CACxD,IACE,kDACQ,yCAA+C,CACzD,IACE,mDACQ,0CAA8C,CACxD,IACE,qDACQ,4CAAgD,CAC1D,IACE,mDACQ,0CAA+C,CACzD,IACE,mDACQ,0CAA+C,CACzD,IACE,kDACQ,yCAA+C,CACzD,IACE,kDACQ,yCAA8C,CACxD,IACE,mDACQ,0CAA+C,CACzD,IACE,oDACQ,2CAAgD,CAC1D,MAEE,4CACQ,mCAAwC,CAAE,CAEtD,SACE,kBACA,gBACA,yBACG,sBACC,qBACI,iBACR,aAAe,CACf,WACE,sBAAwB,CAC1B,aACE,WACA,WAAa,CACb,sCAEE,SAAW,CACf,6BACE,WACA,YACA,gBACA,eACA,eACA,OACA,MACA,SACA,UACA,+BACQ,sBAA2B,CACnC,mLAEE,2CACQ,mCACR,qCACQ,4BAA8B,CACxC,0FACE,oCACQ,4BACR,qCACQ,4BAA8B,CAiB1C,ytBACE,YAAc,CAChB,wCACE,cAAgB,CAClB,qCACE,aAAe,CACjB,gEACE,qCACQ,4BAA8B,CACxC,yBAGE,+FACE,SAAW,CAGb,2GACE,SAAW,CAAE,CACjB,+DACE,aAAe,CACjB,gLAGE,oCACQ,2BAA6B,CACvC,iCACE,WAAa,CAKb,+GACE,UACA,mCACQ,0BAA4B,CAGxC,+GACE,SAAW,CACb,wBACE,eACA,eACA,OACA,MACA,WACA,WAAa,CACf,2JAEE,YAAc,CAChB,+FACE,gBACA,oBAAsB,CACxB,0CACE,YAAc,CAElB,4BACE,eACA,MACA,OACA,SACA,SAAW,CAEb,sBACE,YAAc,CAEhB,qBACE,kBACA,2BAAkC,CAEpC,0CACE,eAAiB,CAEnB,eACE,kBACA,OACA,QACA,MACA,SACA,eACA,WACA,mBAAqB,CACrB,mCACE,kBACA,QACA,SACA,uBACA,YACA,WACA,aACA,sBACA,0BACA,kBACA,UACA,mBAAqB,CACrB,4DACE,wCACQ,+BAAiC,CAE/C,8BACE,GACE,UACA,2BACQ,kBAAoB,CAC9B,GACE,UACA,2BACQ,kBAAoB,CAAE,CAElC,sBACE,GACE,UACA,2BACQ,kBAAoB,CAC9B,GACE,UACA,2BACQ,kBAAoB,CAAE,CAChC,mCACE,kBACA,QACA,gBACA,WACA,kBACA,eACA,iBACA,kDACQ,yCAA2C,CACrD,sCACE,aACA,kBACA,QACA,SACA,uBACA,YACA,WACA,mBAAqB,CACrB,6DACE,YAAc,CAChB,4DACE,8DACQ,sDACR,UACA,iCACQ,wBAA0B,CAClC,mFACE,4BACQ,mBAAsB,CAChC,mFACE,4BACQ,mBAAsB,CAChC,mFACE,4BACQ,mBAAsB,CAChC,mFACE,4BACQ,mBAAsB,CAChC,mFACE,4BACQ,mBAAsB,CAChC,mFACE,4BACQ,mBAAsB,CAChC,mFACE,4BACQ,mBAAsB,CAEtC,6CACE,GACE,WACA,6BACQ,oBAA2B,CACrC,IACE,YACA,4BACQ,mBAA2B,CACrC,GACE,YACA,6BACQ,oBAA6B,CAAE,CAE3C,qCACE,GACE,WACA,6BACQ,oBAA2B,CACrC,IACE,YACA,4BACQ,mBAA2B,CACrC,GACE,YACA,6BACQ,oBAA6B,CAAE,CAE3C,yBACE,mSACA,YACA,UAAY,CAKd,6CAJE,kBACA,SACA,uBAA0B,CAaE,oBAR5B,OACA,QACA,YACA,eACA,yBACG,sBACC,qBACI,gBAAkB,CAE1B,8DACE,YAAc,CAChB,kFACE,aAAe,CACjB,sCACE,cACA,eACA,kBACA,YACA,wBACA,UAAY,CACZ,wFACE,2BACQ,kBAAoB,CAC9B,+DACE,cACA,UACA,mCACQ,2BACR,QACA,UAAY,CACd,yDACE,WACA,kBACA,QACA,UACA,WACA,kBACA,sBACA,kBACA,mCACQ,2BACR,8BAAgC,CAChC,uFACE,aAAe,CAGjB,qKACE,SAAW,CACb,iFACE,aACA,kBACA,SACA,UACA,gBACA,iCACA,WACA,kBACA,eACA,mBACA,mCACQ,0BAA4B,CACxC,2DACE,kBACA,gBACA,oBACA,aACA,4BAA8B,CAChC,kEACE,kBACA,WACA,YACA,UACA,mBAAqB,CACvB,wDACE,kBACA,OACA,UACA,kBACA,gBACA,iCACA,WACA,eACA,kBACA,UACA,mCACA,iBACA,kBACA,UACA,mBAAqB,CACrB,+DACE,SAAW,CACf,mDACE,kBACA,WACA,WACA,8BACA,cAAgB,CAChB,mEAKE,8BAEA,uBAA0B,CAE5B,sIARE,kBACA,OACA,MACA,SAEA,WAEA,iBAAmB,CAQnB,kFACE,kBACA,MACA,UACA,gBACA,mBACA,YACA,WACA,kBACA,eACA,+BACA,2BACQ,kBAAoB,CACpC,mCACE,YACA,kBACA,QAAU,CACV,uDACE,aACA,kBACA,+BACA,UACA,YACA,SACA,UACA,WACA,UAAY,CACZ,qEACE,WAAa,CACf,qFACE,kBACA,OACA,KAAO,CACT,0EACE,kBACA,QACA,KAAO,CACT,oFACE,kBACA,6BACA,YACA,OACA,mCACA,kBACA,uBACA,eACA,YACA,+BACA,2BACQ,kBAAoB,CAC5B,iHACE,2BACQ,kBAAoB,CAC9B,sGACE,YAAc,CAChB,0FACE,cAAgB,CAClB,mHACE,eACA,WACA,gBAAkB,CACpB,kHACE,WAAa,CACb,iJACE,iBAAmB,CACrB,0IACE,yBAA2B,CAC7B,0IACE,yBAA2B,CAC7B,uHACE,UACA,gBACA,iBACA,qBACA,eACA,WACA,sBACA,kBACA,sBACA,kBACA,cAAgB,CAClB,qIACE,mBACA,aAAe,CACnB,mHACE,WAAa,CACb,yHACE,YACA,YACA,oBAAsB,CACxB,wHACE,WACA,YACA,qBACA,kBACA,sBACA,cAAgB,CAChB,8HACE,kDACQ,yCAA2C,CAC3D,8EACE,aACA,YACA,iBACA,eACA,iBACA,kBACA,kBACA,gBACA,SACA,YACA,sBACA,WACA,UAAY,CACZ,yGACE,WACA,UAAa,CAIf,yMACE,WACA,UAAa,CACf,2FACE,WACA,UAAa,CACf,yFACE,YAAc,CACpB,oEACE,WAAa,CACf,uDACE,UAAY,CACZ,qEACE,WAAa,CACjB,wGAEE,iBACA,WACA,mCACA,sBACA,eACA,cAAgB,CAClB,qDACE,qBACA,UACA,WACA,kBACA,iBACA,WACA,iBAAmB,CACrB,iDACE,WACA,YACA,YACA,6BACA,aACA,eACA,sBACA,sBACA,oBAAsB,CACtB,uEACE,+BACA,UAAY,CACd,6EACE,SAAW,CACb,sEACE,WACA,WACA,iBACA,cAAgB,CAClB,sEACE,oBAAsB,CACxB,sEACE,iBAAmB,CACrB,qEACE,UAAY,CAChB,mDACE,kBACA,qBACA,eACA,WAAa,CACb,sGACE,UAAY,CACd,+IACE,2BACQ,kBAAoB,CAC9B,sHACE,UAAY,CACd,+JACE,2BACQ,kBAAoB,CAC9B,4EACE,qBACA,qBACA,sBACA,WAAa,CACb,gGACE,kBACA,SACA,QACA,WACA,gBACA,8BAAiC,CACjC,0HACE,kBACA,SACA,OACA,YACA,wBACA,iBAAmB,CACnB,yIACE,kBACA,MACA,UACA,gBACA,mBACA,YACA,WACA,kBACA,eACA,+BACA,2BACQ,kBAAoB,CAItC,6GACE,qBACA,WAAa,CACb,yEACE,kBACA,QACA,YACA,2BACQ,mBACR,YACA,kBACA,6BACA,cACA,+BACA,gBACA,SAAW,CACX,6EACE,YAAc,CACd,0GACE,aAAe,CACnB,kGACE,2BACQ,kBAAoB,CAC9B,oGACE,WACA,aACA,iBAAmB,CACrB,iIACE,YAAc,CAChB,gIACE,aAAe,CACnB,0JAEE,YACA,iBACA,sBACA,eACA,iBAAmB,CACnB,sKAEE,mCAA2C,CAC/C,6EACE,aAAe,CACf,4FACE,eACA,cAAgB,CAClB,kGACE,YAAc,CAChB,6GACE,oBAAsB,CACxB,2HACE,YAAc,CAChB,sIACE,oBAAsB,CACxB,uGACE,eACA,sBACA,aACA,sBACA,YACA,UAAY,CACZ,4HACE,kBACA,UACA,WACA,WACA,gBACA,8BAAiC,CACjC,uJACE,kBACA,SACA,OACA,YACA,wBACA,gBACA,iBAAmB,CACnB,sKACE,kBACA,MACA,UACA,gBACA,mBACA,YACA,WACA,kBACA,eACA,+BACA,eAAiB,CAC7B,iDACE,qBACA,YACA,iBAAmB,CACnB,6EACE,aAAe,CACjB,uEACE,kBACA,UACA,UACA,YAAc,CAClB,oDACE,kBACA,qBACA,YACA,SAAW,CAGX,gKACE,aAAe,CACjB,0EACE,aACA,kBACA,YACA,WACA,WACA,mBAAqB,CACvB,0EACE,aACA,eACA,WACA,kBACA,6BACA,cACA,+BACA,gBACA,WACA,iBAAmB,CACrB,0EACE,YACA,sBACA,eACA,gBAAkB,CAClB,gFACE,mCAA2C,CACjD,oDACE,qBACA,WAAa,CACf,kDACE,WACA,eACA,qBACA,sBACA,kBAAoB,CACtB,mDACE,WACA,YACA,kBACA,YACA,sBACA,kBACA,QACA,UAAY,CACZ,yDACE,aACA,YACA,YAAc,CAChB,+DACE,qBACA,kBACA,iCACA,yBACA,YACA,WACA,mBACA,sBACA,eACA,0BAA4B,CAW9B,2IATE,WACA,kBACA,cACA,YACA,WACA,MACA,OACA,mBACA,0BAA4B,CAYd,qEAJd,gBAEA,mCAAyC,CAG3C,uEACE,+BAAuC,CACzC,8EACE,WACA,6BAAqC,CACvC,6EACE,SAAW,CAEnB,iBACE,kBACA,OACA,QACA,MACA,SACA,eACA,UAAY,CACZ,uCACE,qBACA,oBACA,yBACG,sBACC,qBACI,iBACR,eACA,mBACA,yCAAkD,CAClD,6CACE,kBACA,iBAAmB,CACvB,wCACE,kBACA,QACA,mCACQ,0BAA4B,CACpC,6DACE,sBACA,oCACQ,4BACR,oCACQ,2BAA6B,CAE3C,2BACE,GACE,mCACQ,0BAA4B,CAAE,CAE1C,mBACE,GACE,mCACQ,0BAA4B,CAAE,CACxC,+EAEE,kBACA,WACA,kBACA,iBAAmB,CACnB,yHAEE,uBACA,2CACQ,mCACR,oCACQ,2BAA6B,CAE3C,kCACE,GACE,kBAAoB,CACtB,GACE,kBAAoB,CAAE,CAE1B,0BACE,GACE,kBAAoB,CACtB,GACE,kBAAoB,CAAE,CAE1B,cACE,oBACA,kBACA,UACA,SACA,eACA,eAAiB,CACjB,kBACE,eACA,gBACA,eAAiB,CAErB,cACE,kBACA,YACA,kBACA,8BACA,cACA,gBACA,UACA,YAAc,CACd,gCACE,aAAe,CACjB,iCACE,YACA,sBACA,cAAgB,CAChB,uCACE,mCAA2C,CAC7C,mCAEE,eACA,iBACA,WACA,eACA,qBACA,sBACA,WACA,sBACA,mBACA,uBACA,eAAiB,CACjB,yCACE,oBAAsB,CAE9B,gBACE,UACA,kBACA,YACA,UACA,eACA,kBACA,6BACA,iBACA,+BACA,gBACA,WACA,mBAAqB,CAEvB,kBACE,kBACA,YACA,UACA,QACA,kBACA,WACA,0CACA,cAAgB,CAChB,wCACE,YAAc,CAElB,cACE,kBACA,MACA,SACA,OACA,QACA,UACA,YAAc,CACd,gCACE,aAAe,CAEnB,oBACE,kBACA,gBACA,YACA,WACA,WAAa,CACb,mCACE,WACA,YACA,YAAc,CAChB,2CACE,aAAe,CACjB,2CACE,YAAc,CAElB,oBACE,kBACA,SACA,UACA,YACA,6BACA,aACA,WACA,eACA,iBAAmB,CACnB,yBACE,YAAc,CAChB,8CACE,eACA,kBACA,WACA,QAAU,CACZ,kDACE,qBACA,sBACA,iBACA,mBACA,uBACA,eAAiB,CACnB,mDACE,YACA,iBACA,iBAAmB,CACrB,kDACE,WAAa,C","file":"DPlayer.min.css","sourcesContent":["button[data-balloon] {\n overflow: visible; }\n\n[data-balloon] {\n position: relative;\n cursor: pointer; }\n [data-balloon]:after {\n filter: alpha(opactiy=0);\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n -moz-opacity: 0;\n -khtml-opacity: 0;\n opacity: 0;\n pointer-events: none;\n transition: all 0.18s ease-out 0.18s;\n font-family: sans-serif !important;\n font-weight: normal !important;\n font-style: normal !important;\n text-shadow: none !important;\n font-size: 12px !important;\n background: rgba(17, 17, 17, 0.9);\n border-radius: 4px;\n color: #fff;\n content: attr(data-balloon);\n padding: .5em 1em;\n position: absolute;\n white-space: nowrap;\n z-index: 10; }\n [data-balloon]:before {\n background: no-repeat url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(0)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E\");\n background-size: 100% auto;\n width: 18px;\n height: 6px;\n filter: alpha(opactiy=0);\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n -moz-opacity: 0;\n -khtml-opacity: 0;\n opacity: 0;\n pointer-events: none;\n transition: all 0.18s ease-out 0.18s;\n content: '';\n position: absolute;\n z-index: 10; }\n [data-balloon]:hover:before, [data-balloon]:hover:after, [data-balloon][data-balloon-visible]:before, [data-balloon][data-balloon-visible]:after {\n filter: alpha(opactiy=100);\n -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";\n -moz-opacity: 1;\n -khtml-opacity: 1;\n opacity: 1;\n pointer-events: auto; }\n [data-balloon].font-awesome:after {\n font-family: FontAwesome; }\n [data-balloon][data-balloon-break]:after {\n white-space: pre; }\n [data-balloon][data-balloon-blunt]:before, [data-balloon][data-balloon-blunt]:after {\n transition: none; }\n [data-balloon][data-balloon-pos=\"up\"]:after {\n bottom: 100%;\n left: 50%;\n margin-bottom: 11px;\n -webkit-transform: translate(-50%, 10px);\n transform: translate(-50%, 10px);\n -webkit-transform-origin: top;\n transform-origin: top; }\n [data-balloon][data-balloon-pos=\"up\"]:before {\n bottom: 100%;\n left: 50%;\n margin-bottom: 5px;\n -webkit-transform: translate(-50%, 10px);\n transform: translate(-50%, 10px);\n -webkit-transform-origin: top;\n transform-origin: top; }\n [data-balloon][data-balloon-pos=\"up\"]:hover:after, [data-balloon][data-balloon-pos=\"up\"][data-balloon-visible]:after {\n -webkit-transform: translate(-50%, 0);\n transform: translate(-50%, 0); }\n [data-balloon][data-balloon-pos=\"up\"]:hover:before, [data-balloon][data-balloon-pos=\"up\"][data-balloon-visible]:before {\n -webkit-transform: translate(-50%, 0);\n transform: translate(-50%, 0); }\n [data-balloon][data-balloon-pos=\"up-left\"]:after {\n bottom: 100%;\n left: 0;\n margin-bottom: 11px;\n -webkit-transform: translate(0, 10px);\n transform: translate(0, 10px);\n -webkit-transform-origin: top;\n transform-origin: top; }\n [data-balloon][data-balloon-pos=\"up-left\"]:before {\n bottom: 100%;\n left: 5px;\n margin-bottom: 5px;\n -webkit-transform: translate(0, 10px);\n transform: translate(0, 10px);\n -webkit-transform-origin: top;\n transform-origin: top; }\n [data-balloon][data-balloon-pos=\"up-left\"]:hover:after, [data-balloon][data-balloon-pos=\"up-left\"][data-balloon-visible]:after {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); }\n [data-balloon][data-balloon-pos=\"up-left\"]:hover:before, [data-balloon][data-balloon-pos=\"up-left\"][data-balloon-visible]:before {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); }\n [data-balloon][data-balloon-pos=\"up-right\"]:after {\n bottom: 100%;\n right: 0;\n margin-bottom: 11px;\n -webkit-transform: translate(0, 10px);\n transform: translate(0, 10px);\n -webkit-transform-origin: top;\n transform-origin: top; }\n [data-balloon][data-balloon-pos=\"up-right\"]:before {\n bottom: 100%;\n right: 5px;\n margin-bottom: 5px;\n -webkit-transform: translate(0, 10px);\n transform: translate(0, 10px);\n -webkit-transform-origin: top;\n transform-origin: top; }\n [data-balloon][data-balloon-pos=\"up-right\"]:hover:after, [data-balloon][data-balloon-pos=\"up-right\"][data-balloon-visible]:after {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); }\n [data-balloon][data-balloon-pos=\"up-right\"]:hover:before, [data-balloon][data-balloon-pos=\"up-right\"][data-balloon-visible]:before {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); }\n [data-balloon][data-balloon-pos='down']:after {\n left: 50%;\n margin-top: 11px;\n top: 100%;\n -webkit-transform: translate(-50%, -10px);\n transform: translate(-50%, -10px); }\n [data-balloon][data-balloon-pos='down']:before {\n background: no-repeat url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E\");\n background-size: 100% auto;\n width: 18px;\n height: 6px;\n left: 50%;\n margin-top: 5px;\n top: 100%;\n -webkit-transform: translate(-50%, -10px);\n transform: translate(-50%, -10px); }\n [data-balloon][data-balloon-pos='down']:hover:after, [data-balloon][data-balloon-pos='down'][data-balloon-visible]:after {\n -webkit-transform: translate(-50%, 0);\n transform: translate(-50%, 0); }\n [data-balloon][data-balloon-pos='down']:hover:before, [data-balloon][data-balloon-pos='down'][data-balloon-visible]:before {\n -webkit-transform: translate(-50%, 0);\n transform: translate(-50%, 0); }\n [data-balloon][data-balloon-pos='down-left']:after {\n left: 0;\n margin-top: 11px;\n top: 100%;\n -webkit-transform: translate(0, -10px);\n transform: translate(0, -10px); }\n [data-balloon][data-balloon-pos='down-left']:before {\n background: no-repeat url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E\");\n background-size: 100% auto;\n width: 18px;\n height: 6px;\n left: 5px;\n margin-top: 5px;\n top: 100%;\n -webkit-transform: translate(0, -10px);\n transform: translate(0, -10px); }\n [data-balloon][data-balloon-pos='down-left']:hover:after, [data-balloon][data-balloon-pos='down-left'][data-balloon-visible]:after {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); }\n [data-balloon][data-balloon-pos='down-left']:hover:before, [data-balloon][data-balloon-pos='down-left'][data-balloon-visible]:before {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); }\n [data-balloon][data-balloon-pos='down-right']:after {\n right: 0;\n margin-top: 11px;\n top: 100%;\n -webkit-transform: translate(0, -10px);\n transform: translate(0, -10px); }\n [data-balloon][data-balloon-pos='down-right']:before {\n background: no-repeat url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E\");\n background-size: 100% auto;\n width: 18px;\n height: 6px;\n right: 5px;\n margin-top: 5px;\n top: 100%;\n -webkit-transform: translate(0, -10px);\n transform: translate(0, -10px); }\n [data-balloon][data-balloon-pos='down-right']:hover:after, [data-balloon][data-balloon-pos='down-right'][data-balloon-visible]:after {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); }\n [data-balloon][data-balloon-pos='down-right']:hover:before, [data-balloon][data-balloon-pos='down-right'][data-balloon-visible]:before {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); }\n [data-balloon][data-balloon-pos='left']:after {\n margin-right: 11px;\n right: 100%;\n top: 50%;\n -webkit-transform: translate(10px, -50%);\n transform: translate(10px, -50%); }\n [data-balloon][data-balloon-pos='left']:before {\n background: no-repeat url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(-90 18 18)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E\");\n background-size: 100% auto;\n width: 6px;\n height: 18px;\n margin-right: 5px;\n right: 100%;\n top: 50%;\n -webkit-transform: translate(10px, -50%);\n transform: translate(10px, -50%); }\n [data-balloon][data-balloon-pos='left']:hover:after, [data-balloon][data-balloon-pos='left'][data-balloon-visible]:after {\n -webkit-transform: translate(0, -50%);\n transform: translate(0, -50%); }\n [data-balloon][data-balloon-pos='left']:hover:before, [data-balloon][data-balloon-pos='left'][data-balloon-visible]:before {\n -webkit-transform: translate(0, -50%);\n transform: translate(0, -50%); }\n [data-balloon][data-balloon-pos='right']:after {\n left: 100%;\n margin-left: 11px;\n top: 50%;\n -webkit-transform: translate(-10px, -50%);\n transform: translate(-10px, -50%); }\n [data-balloon][data-balloon-pos='right']:before {\n background: no-repeat url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(90 6 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E\");\n background-size: 100% auto;\n width: 6px;\n height: 18px;\n left: 100%;\n margin-left: 5px;\n top: 50%;\n -webkit-transform: translate(-10px, -50%);\n transform: translate(-10px, -50%); }\n [data-balloon][data-balloon-pos='right']:hover:after, [data-balloon][data-balloon-pos='right'][data-balloon-visible]:after {\n -webkit-transform: translate(0, -50%);\n transform: translate(0, -50%); }\n [data-balloon][data-balloon-pos='right']:hover:before, [data-balloon][data-balloon-pos='right'][data-balloon-visible]:before {\n -webkit-transform: translate(0, -50%);\n transform: translate(0, -50%); }\n [data-balloon][data-balloon-length='small']:after {\n white-space: normal;\n width: 80px; }\n [data-balloon][data-balloon-length='medium']:after {\n white-space: normal;\n width: 150px; }\n [data-balloon][data-balloon-length='large']:after {\n white-space: normal;\n width: 260px; }\n [data-balloon][data-balloon-length='xlarge']:after {\n white-space: normal;\n width: 380px; }\n @media screen and (max-width: 768px) {\n [data-balloon][data-balloon-length='xlarge']:after {\n white-space: normal;\n width: 90vw; } }\n [data-balloon][data-balloon-length='fit']:after {\n white-space: normal;\n width: 100%; }\n","@import url(../../node_modules/balloon-css/balloon.css);\n@-webkit-keyframes my-face {\n 2% {\n -webkit-transform: translate(0, 1.5px) rotate(1.5deg);\n transform: translate(0, 1.5px) rotate(1.5deg); }\n 4% {\n -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);\n transform: translate(0, -1.5px) rotate(-0.5deg); }\n 6% {\n -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);\n transform: translate(0, 1.5px) rotate(-1.5deg); }\n 8% {\n -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);\n transform: translate(0, -1.5px) rotate(-1.5deg); }\n 10% {\n -webkit-transform: translate(0, 2.5px) rotate(1.5deg);\n transform: translate(0, 2.5px) rotate(1.5deg); }\n 12% {\n -webkit-transform: translate(0, -0.5px) rotate(1.5deg);\n transform: translate(0, -0.5px) rotate(1.5deg); }\n 14% {\n -webkit-transform: translate(0, -1.5px) rotate(1.5deg);\n transform: translate(0, -1.5px) rotate(1.5deg); }\n 16% {\n -webkit-transform: translate(0, -0.5px) rotate(-1.5deg);\n transform: translate(0, -0.5px) rotate(-1.5deg); }\n 18% {\n -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);\n transform: translate(0, 0.5px) rotate(-1.5deg); }\n 20% {\n -webkit-transform: translate(0, -1.5px) rotate(2.5deg);\n transform: translate(0, -1.5px) rotate(2.5deg); }\n 22% {\n -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);\n transform: translate(0, 0.5px) rotate(-1.5deg); }\n 24% {\n -webkit-transform: translate(0, 1.5px) rotate(1.5deg);\n transform: translate(0, 1.5px) rotate(1.5deg); }\n 26% {\n -webkit-transform: translate(0, 0.5px) rotate(0.5deg);\n transform: translate(0, 0.5px) rotate(0.5deg); }\n 28% {\n -webkit-transform: translate(0, 0.5px) rotate(1.5deg);\n transform: translate(0, 0.5px) rotate(1.5deg); }\n 30% {\n -webkit-transform: translate(0, -0.5px) rotate(2.5deg);\n transform: translate(0, -0.5px) rotate(2.5deg); }\n 32% {\n -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);\n transform: translate(0, 1.5px) rotate(-0.5deg); }\n 34% {\n -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);\n transform: translate(0, 1.5px) rotate(-0.5deg); }\n 36% {\n -webkit-transform: translate(0, -1.5px) rotate(2.5deg);\n transform: translate(0, -1.5px) rotate(2.5deg); }\n 38% {\n -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);\n transform: translate(0, 1.5px) rotate(-1.5deg); }\n 40% {\n -webkit-transform: translate(0, -0.5px) rotate(2.5deg);\n transform: translate(0, -0.5px) rotate(2.5deg); }\n 42% {\n -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);\n transform: translate(0, 2.5px) rotate(-1.5deg); }\n 44% {\n -webkit-transform: translate(0, 1.5px) rotate(0.5deg);\n transform: translate(0, 1.5px) rotate(0.5deg); }\n 46% {\n -webkit-transform: translate(0, -1.5px) rotate(2.5deg);\n transform: translate(0, -1.5px) rotate(2.5deg); }\n 48% {\n -webkit-transform: translate(0, -0.5px) rotate(0.5deg);\n transform: translate(0, -0.5px) rotate(0.5deg); }\n 50% {\n -webkit-transform: translate(0, 0.5px) rotate(0.5deg);\n transform: translate(0, 0.5px) rotate(0.5deg); }\n 52% {\n -webkit-transform: translate(0, 2.5px) rotate(2.5deg);\n transform: translate(0, 2.5px) rotate(2.5deg); }\n 54% {\n -webkit-transform: translate(0, -1.5px) rotate(1.5deg);\n transform: translate(0, -1.5px) rotate(1.5deg); }\n 56% {\n -webkit-transform: translate(0, 2.5px) rotate(2.5deg);\n transform: translate(0, 2.5px) rotate(2.5deg); }\n 58% {\n -webkit-transform: translate(0, 0.5px) rotate(2.5deg);\n transform: translate(0, 0.5px) rotate(2.5deg); }\n 60% {\n -webkit-transform: translate(0, 2.5px) rotate(2.5deg);\n transform: translate(0, 2.5px) rotate(2.5deg); }\n 62% {\n -webkit-transform: translate(0, -0.5px) rotate(2.5deg);\n transform: translate(0, -0.5px) rotate(2.5deg); }\n 64% {\n -webkit-transform: translate(0, -0.5px) rotate(1.5deg);\n transform: translate(0, -0.5px) rotate(1.5deg); }\n 66% {\n -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);\n transform: translate(0, 1.5px) rotate(-0.5deg); }\n 68% {\n -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);\n transform: translate(0, -1.5px) rotate(-0.5deg); }\n 70% {\n -webkit-transform: translate(0, 1.5px) rotate(0.5deg);\n transform: translate(0, 1.5px) rotate(0.5deg); }\n 72% {\n -webkit-transform: translate(0, 2.5px) rotate(1.5deg);\n transform: translate(0, 2.5px) rotate(1.5deg); }\n 74% {\n -webkit-transform: translate(0, -0.5px) rotate(0.5deg);\n transform: translate(0, -0.5px) rotate(0.5deg); }\n 76% {\n -webkit-transform: translate(0, -0.5px) rotate(2.5deg);\n transform: translate(0, -0.5px) rotate(2.5deg); }\n 78% {\n -webkit-transform: translate(0, -0.5px) rotate(1.5deg);\n transform: translate(0, -0.5px) rotate(1.5deg); }\n 80% {\n -webkit-transform: translate(0, 1.5px) rotate(1.5deg);\n transform: translate(0, 1.5px) rotate(1.5deg); }\n 82% {\n -webkit-transform: translate(0, -0.5px) rotate(0.5deg);\n transform: translate(0, -0.5px) rotate(0.5deg); }\n 84% {\n -webkit-transform: translate(0, 1.5px) rotate(2.5deg);\n transform: translate(0, 1.5px) rotate(2.5deg); }\n 86% {\n -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);\n transform: translate(0, -1.5px) rotate(-1.5deg); }\n 88% {\n -webkit-transform: translate(0, -0.5px) rotate(2.5deg);\n transform: translate(0, -0.5px) rotate(2.5deg); }\n 90% {\n -webkit-transform: translate(0, 2.5px) rotate(-0.5deg);\n transform: translate(0, 2.5px) rotate(-0.5deg); }\n 92% {\n -webkit-transform: translate(0, 0.5px) rotate(-0.5deg);\n transform: translate(0, 0.5px) rotate(-0.5deg); }\n 94% {\n -webkit-transform: translate(0, 2.5px) rotate(0.5deg);\n transform: translate(0, 2.5px) rotate(0.5deg); }\n 96% {\n -webkit-transform: translate(0, -0.5px) rotate(1.5deg);\n transform: translate(0, -0.5px) rotate(1.5deg); }\n 98% {\n -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);\n transform: translate(0, -1.5px) rotate(-0.5deg); }\n 0%,\n 100% {\n -webkit-transform: translate(0, 0) rotate(0deg);\n transform: translate(0, 0) rotate(0deg); } }\n@keyframes my-face {\n 2% {\n -webkit-transform: translate(0, 1.5px) rotate(1.5deg);\n transform: translate(0, 1.5px) rotate(1.5deg); }\n 4% {\n -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);\n transform: translate(0, -1.5px) rotate(-0.5deg); }\n 6% {\n -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);\n transform: translate(0, 1.5px) rotate(-1.5deg); }\n 8% {\n -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);\n transform: translate(0, -1.5px) rotate(-1.5deg); }\n 10% {\n -webkit-transform: translate(0, 2.5px) rotate(1.5deg);\n transform: translate(0, 2.5px) rotate(1.5deg); }\n 12% {\n -webkit-transform: translate(0, -0.5px) rotate(1.5deg);\n transform: translate(0, -0.5px) rotate(1.5deg); }\n 14% {\n -webkit-transform: translate(0, -1.5px) rotate(1.5deg);\n transform: translate(0, -1.5px) rotate(1.5deg); }\n 16% {\n -webkit-transform: translate(0, -0.5px) rotate(-1.5deg);\n transform: translate(0, -0.5px) rotate(-1.5deg); }\n 18% {\n -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);\n transform: translate(0, 0.5px) rotate(-1.5deg); }\n 20% {\n -webkit-transform: translate(0, -1.5px) rotate(2.5deg);\n transform: translate(0, -1.5px) rotate(2.5deg); }\n 22% {\n -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);\n transform: translate(0, 0.5px) rotate(-1.5deg); }\n 24% {\n -webkit-transform: translate(0, 1.5px) rotate(1.5deg);\n transform: translate(0, 1.5px) rotate(1.5deg); }\n 26% {\n -webkit-transform: translate(0, 0.5px) rotate(0.5deg);\n transform: translate(0, 0.5px) rotate(0.5deg); }\n 28% {\n -webkit-transform: translate(0, 0.5px) rotate(1.5deg);\n transform: translate(0, 0.5px) rotate(1.5deg); }\n 30% {\n -webkit-transform: translate(0, -0.5px) rotate(2.5deg);\n transform: translate(0, -0.5px) rotate(2.5deg); }\n 32% {\n -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);\n transform: translate(0, 1.5px) rotate(-0.5deg); }\n 34% {\n -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);\n transform: translate(0, 1.5px) rotate(-0.5deg); }\n 36% {\n -webkit-transform: translate(0, -1.5px) rotate(2.5deg);\n transform: translate(0, -1.5px) rotate(2.5deg); }\n 38% {\n -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);\n transform: translate(0, 1.5px) rotate(-1.5deg); }\n 40% {\n -webkit-transform: translate(0, -0.5px) rotate(2.5deg);\n transform: translate(0, -0.5px) rotate(2.5deg); }\n 42% {\n -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);\n transform: translate(0, 2.5px) rotate(-1.5deg); }\n 44% {\n -webkit-transform: translate(0, 1.5px) rotate(0.5deg);\n transform: translate(0, 1.5px) rotate(0.5deg); }\n 46% {\n -webkit-transform: translate(0, -1.5px) rotate(2.5deg);\n transform: translate(0, -1.5px) rotate(2.5deg); }\n 48% {\n -webkit-transform: translate(0, -0.5px) rotate(0.5deg);\n transform: translate(0, -0.5px) rotate(0.5deg); }\n 50% {\n -webkit-transform: translate(0, 0.5px) rotate(0.5deg);\n transform: translate(0, 0.5px) rotate(0.5deg); }\n 52% {\n -webkit-transform: translate(0, 2.5px) rotate(2.5deg);\n transform: translate(0, 2.5px) rotate(2.5deg); }\n 54% {\n -webkit-transform: translate(0, -1.5px) rotate(1.5deg);\n transform: translate(0, -1.5px) rotate(1.5deg); }\n 56% {\n -webkit-transform: translate(0, 2.5px) rotate(2.5deg);\n transform: translate(0, 2.5px) rotate(2.5deg); }\n 58% {\n -webkit-transform: translate(0, 0.5px) rotate(2.5deg);\n transform: translate(0, 0.5px) rotate(2.5deg); }\n 60% {\n -webkit-transform: translate(0, 2.5px) rotate(2.5deg);\n transform: translate(0, 2.5px) rotate(2.5deg); }\n 62% {\n -webkit-transform: translate(0, -0.5px) rotate(2.5deg);\n transform: translate(0, -0.5px) rotate(2.5deg); }\n 64% {\n -webkit-transform: translate(0, -0.5px) rotate(1.5deg);\n transform: translate(0, -0.5px) rotate(1.5deg); }\n 66% {\n -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);\n transform: translate(0, 1.5px) rotate(-0.5deg); }\n 68% {\n -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);\n transform: translate(0, -1.5px) rotate(-0.5deg); }\n 70% {\n -webkit-transform: translate(0, 1.5px) rotate(0.5deg);\n transform: translate(0, 1.5px) rotate(0.5deg); }\n 72% {\n -webkit-transform: translate(0, 2.5px) rotate(1.5deg);\n transform: translate(0, 2.5px) rotate(1.5deg); }\n 74% {\n -webkit-transform: translate(0, -0.5px) rotate(0.5deg);\n transform: translate(0, -0.5px) rotate(0.5deg); }\n 76% {\n -webkit-transform: translate(0, -0.5px) rotate(2.5deg);\n transform: translate(0, -0.5px) rotate(2.5deg); }\n 78% {\n -webkit-transform: translate(0, -0.5px) rotate(1.5deg);\n transform: translate(0, -0.5px) rotate(1.5deg); }\n 80% {\n -webkit-transform: translate(0, 1.5px) rotate(1.5deg);\n transform: translate(0, 1.5px) rotate(1.5deg); }\n 82% {\n -webkit-transform: translate(0, -0.5px) rotate(0.5deg);\n transform: translate(0, -0.5px) rotate(0.5deg); }\n 84% {\n -webkit-transform: translate(0, 1.5px) rotate(2.5deg);\n transform: translate(0, 1.5px) rotate(2.5deg); }\n 86% {\n -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);\n transform: translate(0, -1.5px) rotate(-1.5deg); }\n 88% {\n -webkit-transform: translate(0, -0.5px) rotate(2.5deg);\n transform: translate(0, -0.5px) rotate(2.5deg); }\n 90% {\n -webkit-transform: translate(0, 2.5px) rotate(-0.5deg);\n transform: translate(0, 2.5px) rotate(-0.5deg); }\n 92% {\n -webkit-transform: translate(0, 0.5px) rotate(-0.5deg);\n transform: translate(0, 0.5px) rotate(-0.5deg); }\n 94% {\n -webkit-transform: translate(0, 2.5px) rotate(0.5deg);\n transform: translate(0, 2.5px) rotate(0.5deg); }\n 96% {\n -webkit-transform: translate(0, -0.5px) rotate(1.5deg);\n transform: translate(0, -0.5px) rotate(1.5deg); }\n 98% {\n -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);\n transform: translate(0, -1.5px) rotate(-0.5deg); }\n 0%,\n 100% {\n -webkit-transform: translate(0, 0) rotate(0deg);\n transform: translate(0, 0) rotate(0deg); } }\n\n.dplayer {\n position: relative;\n overflow: hidden;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n line-height: 1; }\n .dplayer * {\n box-sizing: content-box; }\n .dplayer svg {\n width: 100%;\n height: 100%; }\n .dplayer svg path,\n .dplayer svg circle {\n fill: #fff; }\n .dplayer:-webkit-full-screen {\n width: 100%;\n height: 100%;\n background: #000;\n position: fixed;\n z-index: 100000;\n left: 0;\n top: 0;\n margin: 0;\n padding: 0;\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); }\n .dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-top.dplayer-danmaku-move,\n .dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-bottom.dplayer-danmaku-move {\n -webkit-animation: danmaku-center 6s linear;\n animation: danmaku-center 6s linear;\n -webkit-animation-play-state: inherit;\n animation-play-state: inherit; }\n .dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-right.dplayer-danmaku-move {\n -webkit-animation: danmaku 8s linear;\n animation: danmaku 8s linear;\n -webkit-animation-play-state: inherit;\n animation-play-state: inherit; }\n .dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box .dplayer-setting-showdan,\n .dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box .dplayer-setting-danmaku,\n .dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box .dplayer-setting-danunlimit {\n display: none; }\n .dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-comment {\n display: none; }\n .dplayer.dplayer-no-danmaku .dplayer-danmaku {\n display: none; }\n .dplayer.dplayer-live .dplayer-time {\n display: none; }\n .dplayer.dplayer-live .dplayer-bar-wrap {\n display: none; }\n .dplayer.dplayer-live .dplayer-setting-speed {\n display: none; }\n .dplayer.dplayer-live .dplayer-setting-loop {\n display: none; }\n .dplayer.dplayer-live.dplayer-no-danmaku .dplayer-setting {\n display: none; }\n .dplayer.dplayer-arrow .dplayer-danmaku {\n font-size: 18px; }\n .dplayer.dplayer-arrow .dplayer-icon {\n margin: 0 -3px; }\n .dplayer.dplayer-playing .dplayer-danmaku .dplayer-danmaku-move {\n -webkit-animation-play-state: running;\n animation-play-state: running; }\n @media (min-width: 900px) {\n .dplayer.dplayer-playing .dplayer-controller-mask {\n opacity: 0; }\n .dplayer.dplayer-playing .dplayer-controller {\n opacity: 0; }\n .dplayer.dplayer-playing:hover .dplayer-controller-mask {\n opacity: 1; }\n .dplayer.dplayer-playing:hover .dplayer-controller {\n opacity: 1; } }\n .dplayer.dplayer-loading .dplayer-bezel .diplayer-loading-icon {\n display: block; }\n .dplayer.dplayer-loading .dplayer-danmaku,\n .dplayer.dplayer-loading .dplayer-danmaku-move, .dplayer.dplayer-paused .dplayer-danmaku,\n .dplayer.dplayer-paused .dplayer-danmaku-move {\n -webkit-animation-play-state: paused;\n animation-play-state: paused; }\n .dplayer.dplayer-hide-controller {\n cursor: none; }\n .dplayer.dplayer-hide-controller .dplayer-controller-mask {\n opacity: 0;\n -webkit-transform: translateY(100%);\n transform: translateY(100%); }\n .dplayer.dplayer-hide-controller .dplayer-controller {\n opacity: 0;\n -webkit-transform: translateY(100%);\n transform: translateY(100%); }\n .dplayer.dplayer-show-controller .dplayer-controller-mask {\n opacity: 1; }\n .dplayer.dplayer-show-controller .dplayer-controller {\n opacity: 1; }\n .dplayer.dplayer-fulled {\n position: fixed;\n z-index: 100000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%; }\n .dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-volume,\n .dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-camera-icon {\n display: none; }\n .dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-full .dplayer-full-in-icon {\n position: static;\n display: inline-block; }\n .dplayer.dplayer-mobile .dplayer-bar-time {\n display: none; }\n\n.dplayer-web-fullscreen-fix {\n position: fixed;\n top: 0;\n left: 0;\n margin: 0;\n padding: 0; }\n\n[data-balloon]:before {\n display: none; }\n\n[data-balloon]:after {\n padding: 0.3em 0.7em;\n background: rgba(17, 17, 17, 0.7); }\n\n[data-balloon][data-balloon-pos=\"up\"]:after {\n margin-bottom: 0; }\n\n.dplayer-bezel {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n font-size: 22px;\n color: #fff;\n pointer-events: none; }\n .dplayer-bezel .dplayer-bezel-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -26px 0 0 -26px;\n height: 52px;\n width: 52px;\n padding: 12px;\n box-sizing: border-box;\n background: rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n opacity: 0;\n pointer-events: none; }\n .dplayer-bezel .dplayer-bezel-icon.dplayer-bezel-transition {\n -webkit-animation: bezel-hide .5s linear;\n animation: bezel-hide .5s linear; }\n\n@-webkit-keyframes bezel-hide {\n from {\n opacity: 1;\n -webkit-transform: scale(1);\n transform: scale(1); }\n to {\n opacity: 0;\n -webkit-transform: scale(2);\n transform: scale(2); } }\n\n@keyframes bezel-hide {\n from {\n opacity: 1;\n -webkit-transform: scale(1);\n transform: scale(1); }\n to {\n opacity: 0;\n -webkit-transform: scale(2);\n transform: scale(2); } }\n .dplayer-bezel .dplayer-danloading {\n position: absolute;\n top: 50%;\n margin-top: -7px;\n width: 100%;\n text-align: center;\n font-size: 14px;\n line-height: 14px;\n -webkit-animation: my-face 5s infinite ease-in-out;\n animation: my-face 5s infinite ease-in-out; }\n .dplayer-bezel .diplayer-loading-icon {\n display: none;\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -18px 0 0 -18px;\n height: 36px;\n width: 36px;\n pointer-events: none; }\n .dplayer-bezel .diplayer-loading-icon .diplayer-loading-hide {\n display: none; }\n .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot {\n -webkit-animation: diplayer-loading-dot-fade .8s ease infinite;\n animation: diplayer-loading-dot-fade .8s ease infinite;\n opacity: 0;\n -webkit-transform-origin: 4px 4px;\n transform-origin: 4px 4px; }\n .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-7 {\n -webkit-animation-delay: 0.7s;\n animation-delay: 0.7s; }\n .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-6 {\n -webkit-animation-delay: 0.6s;\n animation-delay: 0.6s; }\n .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-5 {\n -webkit-animation-delay: 0.5s;\n animation-delay: 0.5s; }\n .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-4 {\n -webkit-animation-delay: 0.4s;\n animation-delay: 0.4s; }\n .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-3 {\n -webkit-animation-delay: 0.3s;\n animation-delay: 0.3s; }\n .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-2 {\n -webkit-animation-delay: 0.2s;\n animation-delay: 0.2s; }\n .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-1 {\n -webkit-animation-delay: 0.1s;\n animation-delay: 0.1s; }\n\n@-webkit-keyframes diplayer-loading-dot-fade {\n 0% {\n opacity: .7;\n -webkit-transform: scale(1.2, 1.2);\n transform: scale(1.2, 1.2); }\n 50% {\n opacity: .25;\n -webkit-transform: scale(0.9, 0.9);\n transform: scale(0.9, 0.9); }\n to {\n opacity: .25;\n -webkit-transform: scale(0.85, 0.85);\n transform: scale(0.85, 0.85); } }\n\n@keyframes diplayer-loading-dot-fade {\n 0% {\n opacity: .7;\n -webkit-transform: scale(1.2, 1.2);\n transform: scale(1.2, 1.2); }\n 50% {\n opacity: .25;\n -webkit-transform: scale(0.9, 0.9);\n transform: scale(0.9, 0.9); }\n to {\n opacity: .25;\n -webkit-transform: scale(0.85, 0.85);\n transform: scale(0.85, 0.85); } }\n\n.dplayer-controller-mask {\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;\n height: 98px;\n width: 100%;\n position: absolute;\n bottom: 0;\n transition: all 0.3s ease; }\n\n.dplayer-controller {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 41px;\n padding: 0 20px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n transition: all 0.3s ease; }\n .dplayer-controller.dplayer-controller-comment .dplayer-icons {\n display: none; }\n .dplayer-controller.dplayer-controller-comment .dplayer-icons.dplayer-comment-box {\n display: block; }\n .dplayer-controller .dplayer-bar-wrap {\n padding: 5px 0;\n cursor: pointer;\n position: absolute;\n bottom: 33px;\n width: calc(100% - 40px);\n height: 3px; }\n .dplayer-controller .dplayer-bar-wrap:hover .dplayer-bar .dplayer-played .dplayer-thumb {\n -webkit-transform: scale(1);\n transform: scale(1); }\n .dplayer-controller .dplayer-bar-wrap:hover .dplayer-highlight {\n display: block;\n width: 8px;\n -webkit-transform: translateX(-4px);\n transform: translateX(-4px);\n top: 4px;\n height: 40%; }\n .dplayer-controller .dplayer-bar-wrap .dplayer-highlight {\n z-index: 12;\n position: absolute;\n top: 5px;\n width: 6px;\n height: 20%;\n border-radius: 6px;\n background-color: #fff;\n text-align: center;\n -webkit-transform: translateX(-3px);\n transform: translateX(-3px);\n transition: all .2s ease-in-out; }\n .dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover .dplayer-highlight-text {\n display: block; }\n .dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover ~ .dplayer-bar-preview {\n opacity: 0; }\n .dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover ~ .dplayer-bar-time {\n opacity: 0; }\n .dplayer-controller .dplayer-bar-wrap .dplayer-highlight .dplayer-highlight-text {\n display: none;\n position: absolute;\n left: 50%;\n top: -24px;\n padding: 5px 8px;\n background-color: rgba(0, 0, 0, 0.62);\n color: #fff;\n border-radius: 4px;\n font-size: 12px;\n white-space: nowrap;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%); }\n .dplayer-controller .dplayer-bar-wrap .dplayer-bar-preview {\n position: absolute;\n background: #fff;\n pointer-events: none;\n display: none;\n background-size: 16000px 100%; }\n .dplayer-controller .dplayer-bar-wrap .dplayer-bar-preview-canvas {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 1;\n pointer-events: none; }\n .dplayer-controller .dplayer-bar-wrap .dplayer-bar-time {\n position: absolute;\n left: 0px;\n top: -20px;\n border-radius: 4px;\n padding: 5px 7px;\n background-color: rgba(0, 0, 0, 0.62);\n color: #fff;\n font-size: 12px;\n text-align: center;\n opacity: 1;\n transition: opacity .1s ease-in-out;\n word-wrap: normal;\n word-break: normal;\n z-index: 2;\n pointer-events: none; }\n .dplayer-controller .dplayer-bar-wrap .dplayer-bar-time.hidden {\n opacity: 0; }\n .dplayer-controller .dplayer-bar-wrap .dplayer-bar {\n position: relative;\n height: 3px;\n width: 100%;\n background: rgba(255, 255, 255, 0.2);\n cursor: pointer; }\n .dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-loaded {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.4);\n height: 3px;\n transition: all 0.5s ease;\n will-change: width; }\n .dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: 3px;\n will-change: width; }\n .dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played .dplayer-thumb {\n position: absolute;\n top: 0;\n right: 5px;\n margin-top: -4px;\n margin-right: -10px;\n height: 11px;\n width: 11px;\n border-radius: 50%;\n cursor: pointer;\n transition: all .3s ease-in-out;\n -webkit-transform: scale(0);\n transform: scale(0); }\n .dplayer-controller .dplayer-icons {\n height: 38px;\n position: absolute;\n bottom: 0; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box {\n display: none;\n position: absolute;\n transition: all .3s ease-in-out;\n z-index: 2;\n height: 38px;\n bottom: 0;\n left: 20px;\n right: 20px;\n color: #fff; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-icon {\n padding: 7px; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-icon {\n position: absolute;\n left: 0;\n top: 0; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-send-icon {\n position: absolute;\n right: 0;\n top: 0; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box {\n position: absolute;\n background: rgba(28, 28, 28, 0.9);\n bottom: 41px;\n left: 0;\n box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);\n border-radius: 4px;\n padding: 10px 10px 16px;\n font-size: 14px;\n width: 204px;\n transition: all .3s ease-in-out;\n -webkit-transform: scale(0);\n transform: scale(0); }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box.dplayer-comment-setting-open {\n -webkit-transform: scale(1);\n transform: scale(1); }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box input[type=radio] {\n display: none; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box label {\n cursor: pointer; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-title {\n font-size: 13px;\n color: #fff;\n line-height: 30px; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type {\n font-size: 0; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type .dplayer-comment-setting-title {\n margin-bottom: 6px; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type label:nth-child(2) span {\n border-radius: 4px 0 0 4px; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type label:nth-child(4) span {\n border-radius: 0 4px 4px 0; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type span {\n width: 33%;\n padding: 4px 6px;\n line-height: 16px;\n display: inline-block;\n font-size: 12px;\n color: #fff;\n border: 1px solid #fff;\n margin-right: -1px;\n box-sizing: border-box;\n text-align: center;\n cursor: pointer; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type input:checked + span {\n background: #E4E4E6;\n color: #1c1c1c; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color {\n font-size: 0; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color label {\n font-size: 0;\n padding: 6px;\n display: inline-block; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color span {\n width: 22px;\n height: 22px;\n display: inline-block;\n border-radius: 50%;\n box-sizing: border-box;\n cursor: pointer; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color span:hover {\n -webkit-animation: my-face 5s infinite ease-in-out;\n animation: my-face 5s infinite ease-in-out; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input {\n outline: none;\n border: none;\n padding: 8px 31px;\n font-size: 14px;\n line-height: 18px;\n text-align: center;\n border-radius: 4px;\n background: none;\n margin: 0;\n height: 100%;\n box-sizing: border-box;\n width: 100%;\n color: #fff; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input::-webkit-input-placeholder {\n color: #fff;\n opacity: 0.8; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input:-ms-input-placeholder {\n color: #fff;\n opacity: 0.8; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input::-ms-input-placeholder {\n color: #fff;\n opacity: 0.8; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input::placeholder {\n color: #fff;\n opacity: 0.8; }\n .dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-input::-ms-clear {\n display: none; }\n .dplayer-controller .dplayer-icons.dplayer-icons-left .dplayer-icon {\n padding: 7px; }\n .dplayer-controller .dplayer-icons.dplayer-icons-right {\n right: 20px; }\n .dplayer-controller .dplayer-icons.dplayer-icons-right .dplayer-icon {\n padding: 8px; }\n .dplayer-controller .dplayer-icons .dplayer-time,\n .dplayer-controller .dplayer-icons .dplayer-live-badge {\n line-height: 38px;\n color: #eee;\n text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);\n vertical-align: middle;\n font-size: 13px;\n cursor: default; }\n .dplayer-controller .dplayer-icons .dplayer-live-dot {\n display: inline-block;\n width: 6px;\n height: 6px;\n vertical-align: 4%;\n margin-right: 5px;\n content: '';\n border-radius: 6px; }\n .dplayer-controller .dplayer-icons .dplayer-icon {\n width: 40px;\n height: 100%;\n border: none;\n background-color: transparent;\n outline: none;\n cursor: pointer;\n vertical-align: middle;\n box-sizing: border-box;\n display: inline-block; }\n .dplayer-controller .dplayer-icons .dplayer-icon .dplayer-icon-content {\n transition: all .2s ease-in-out;\n opacity: .8; }\n .dplayer-controller .dplayer-icons .dplayer-icon:hover .dplayer-icon-content {\n opacity: 1; }\n .dplayer-controller .dplayer-icons .dplayer-icon.dplayer-quality-icon {\n color: #fff;\n width: auto;\n line-height: 22px;\n font-size: 14px; }\n .dplayer-controller .dplayer-icons .dplayer-icon.dplayer-comment-icon {\n padding: 10px 9px 9px; }\n .dplayer-controller .dplayer-icons .dplayer-icon.dplayer-setting-icon {\n padding-top: 8.5px; }\n .dplayer-controller .dplayer-icons .dplayer-icon.dplayer-volume-icon {\n width: 43px; }\n .dplayer-controller .dplayer-icons .dplayer-volume {\n position: relative;\n display: inline-block;\n cursor: pointer;\n height: 100%; }\n .dplayer-controller .dplayer-icons .dplayer-volume:hover .dplayer-volume-bar-wrap .dplayer-volume-bar {\n width: 45px; }\n .dplayer-controller .dplayer-icons .dplayer-volume:hover .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner .dplayer-thumb {\n -webkit-transform: scale(1);\n transform: scale(1); }\n .dplayer-controller .dplayer-icons .dplayer-volume.dplayer-volume-active .dplayer-volume-bar-wrap .dplayer-volume-bar {\n width: 45px; }\n .dplayer-controller .dplayer-icons .dplayer-volume.dplayer-volume-active .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner .dplayer-thumb {\n -webkit-transform: scale(1);\n transform: scale(1); }\n .dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap {\n display: inline-block;\n margin: 0 10px 0 -5px;\n vertical-align: middle;\n height: 100%; }\n .dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar {\n position: relative;\n top: 17px;\n width: 0;\n height: 3px;\n background: #aaa;\n transition: all 0.3s ease-in-out; }\n .dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 100%;\n transition: all 0.1s ease;\n will-change: width; }\n .dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner .dplayer-thumb {\n position: absolute;\n top: 0;\n right: 5px;\n margin-top: -4px;\n margin-right: -10px;\n height: 11px;\n width: 11px;\n border-radius: 50%;\n cursor: pointer;\n transition: all .3s ease-in-out;\n -webkit-transform: scale(0);\n transform: scale(0); }\n .dplayer-controller .dplayer-icons .dplayer-subtitle-btn {\n display: inline-block;\n height: 100%; }\n .dplayer-controller .dplayer-icons .dplayer-setting {\n display: inline-block;\n height: 100%; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box {\n position: absolute;\n right: 0;\n bottom: 50px;\n -webkit-transform: scale(0);\n transform: scale(0);\n width: 150px;\n border-radius: 2px;\n background: rgba(28, 28, 28, 0.9);\n padding: 7px 0;\n transition: all .3s ease-in-out;\n overflow: hidden;\n z-index: 2; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box > div {\n display: none; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box > div.dplayer-setting-origin-panel {\n display: block; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-open {\n -webkit-transform: scale(1);\n transform: scale(1); }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-narrow {\n width: 70px;\n height: 180px;\n text-align: center; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-speed .dplayer-setting-origin-panel {\n display: none; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-speed .dplayer-setting-speed-panel {\n display: block; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-item,\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-speed-item {\n height: 30px;\n padding: 5px 10px;\n box-sizing: border-box;\n cursor: pointer;\n position: relative; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-item:hover,\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-speed-item:hover {\n background-color: rgba(255, 255, 255, 0.1); }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku {\n padding: 5px 0; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-label {\n padding: 0 10px;\n display: inline; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku:hover .dplayer-label {\n display: none; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku:hover .dplayer-danmaku-bar-wrap {\n display: inline-block; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku.dplayer-setting-danmaku-active .dplayer-label {\n display: none; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku.dplayer-setting-danmaku-active .dplayer-danmaku-bar-wrap {\n display: inline-block; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap {\n padding: 0 10px;\n box-sizing: border-box;\n display: none;\n vertical-align: middle;\n height: 100%;\n width: 100%; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar {\n position: relative;\n top: 8.5px;\n width: 100%;\n height: 3px;\n background: #fff;\n transition: all 0.3s ease-in-out; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar .dplayer-danmaku-bar-inner {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 100%;\n transition: all 0.1s ease;\n background: #aaa;\n will-change: width; }\n .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar .dplayer-danmaku-bar-inner .dplayer-thumb {\n position: absolute;\n top: 0;\n right: 5px;\n margin-top: -4px;\n margin-right: -10px;\n height: 11px;\n width: 11px;\n border-radius: 50%;\n cursor: pointer;\n transition: all .3s ease-in-out;\n background: #aaa; }\n .dplayer-controller .dplayer-icons .dplayer-full {\n display: inline-block;\n height: 100%;\n position: relative; }\n .dplayer-controller .dplayer-icons .dplayer-full:hover .dplayer-full-in-icon {\n display: block; }\n .dplayer-controller .dplayer-icons .dplayer-full .dplayer-full-in-icon {\n position: absolute;\n top: -30px;\n z-index: 1;\n display: none; }\n .dplayer-controller .dplayer-icons .dplayer-quality {\n position: relative;\n display: inline-block;\n height: 100%;\n z-index: 2; }\n .dplayer-controller .dplayer-icons .dplayer-quality:hover .dplayer-quality-list {\n display: block; }\n .dplayer-controller .dplayer-icons .dplayer-quality:hover .dplayer-quality-mask {\n display: block; }\n .dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-mask {\n display: none;\n position: absolute;\n bottom: 38px;\n left: -18px;\n width: 80px;\n padding-bottom: 12px; }\n .dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-list {\n display: none;\n font-size: 12px;\n width: 80px;\n border-radius: 2px;\n background: rgba(28, 28, 28, 0.9);\n padding: 5px 0;\n transition: all .3s ease-in-out;\n overflow: hidden;\n color: #fff;\n text-align: center; }\n .dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-item {\n height: 25px;\n box-sizing: border-box;\n cursor: pointer;\n line-height: 25px; }\n .dplayer-controller .dplayer-icons .dplayer-quality .dplayer-quality-item:hover {\n background-color: rgba(255, 255, 255, 0.1); }\n .dplayer-controller .dplayer-icons .dplayer-comment {\n display: inline-block;\n height: 100%; }\n .dplayer-controller .dplayer-icons .dplayer-label {\n color: #eee;\n font-size: 13px;\n display: inline-block;\n vertical-align: middle;\n white-space: nowrap; }\n .dplayer-controller .dplayer-icons .dplayer-toggle {\n width: 32px;\n height: 20px;\n text-align: center;\n font-size: 0;\n vertical-align: middle;\n position: absolute;\n top: 5px;\n right: 10px; }\n .dplayer-controller .dplayer-icons .dplayer-toggle input {\n max-height: 0;\n max-width: 0;\n display: none; }\n .dplayer-controller .dplayer-icons .dplayer-toggle input + label {\n display: inline-block;\n position: relative;\n box-shadow: #dfdfdf 0 0 0 0 inset;\n border: 1px solid #dfdfdf;\n height: 20px;\n width: 32px;\n border-radius: 10px;\n box-sizing: border-box;\n cursor: pointer;\n transition: .2s ease-in-out; }\n .dplayer-controller .dplayer-icons .dplayer-toggle input + label:before {\n content: \"\";\n position: absolute;\n display: block;\n height: 18px;\n width: 18px;\n top: 0;\n left: 0;\n border-radius: 15px;\n transition: .2s ease-in-out; }\n .dplayer-controller .dplayer-icons .dplayer-toggle input + label:after {\n content: \"\";\n position: absolute;\n display: block;\n left: 0;\n top: 0;\n border-radius: 15px;\n background: #fff;\n transition: .2s ease-in-out;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n height: 18px;\n width: 18px; }\n .dplayer-controller .dplayer-icons .dplayer-toggle input:checked + label {\n border-color: rgba(255, 255, 255, 0.5); }\n .dplayer-controller .dplayer-icons .dplayer-toggle input:checked + label:before {\n width: 30px;\n background: rgba(255, 255, 255, 0.5); }\n .dplayer-controller .dplayer-icons .dplayer-toggle input:checked + label:after {\n left: 12px; }\n\n.dplayer-danmaku {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n font-size: 22px;\n color: #fff; }\n .dplayer-danmaku .dplayer-danmaku-item {\n display: inline-block;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: default;\n white-space: nowrap;\n text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5); }\n .dplayer-danmaku .dplayer-danmaku-item--demo {\n position: absolute;\n visibility: hidden; }\n .dplayer-danmaku .dplayer-danmaku-right {\n position: absolute;\n right: 0;\n -webkit-transform: translateX(100%);\n transform: translateX(100%); }\n .dplayer-danmaku .dplayer-danmaku-right.dplayer-danmaku-move {\n will-change: transform;\n -webkit-animation: danmaku 5s linear;\n animation: danmaku 5s linear;\n -webkit-animation-play-state: paused;\n animation-play-state: paused; }\n\n@-webkit-keyframes danmaku {\n from {\n -webkit-transform: translateX(100%);\n transform: translateX(100%); } }\n\n@keyframes danmaku {\n from {\n -webkit-transform: translateX(100%);\n transform: translateX(100%); } }\n .dplayer-danmaku .dplayer-danmaku-top,\n .dplayer-danmaku .dplayer-danmaku-bottom {\n position: absolute;\n width: 100%;\n text-align: center;\n visibility: hidden; }\n .dplayer-danmaku .dplayer-danmaku-top.dplayer-danmaku-move,\n .dplayer-danmaku .dplayer-danmaku-bottom.dplayer-danmaku-move {\n will-change: visibility;\n -webkit-animation: danmaku-center 4s linear;\n animation: danmaku-center 4s linear;\n -webkit-animation-play-state: paused;\n animation-play-state: paused; }\n\n@-webkit-keyframes danmaku-center {\n from {\n visibility: visible; }\n to {\n visibility: visible; } }\n\n@keyframes danmaku-center {\n from {\n visibility: visible; }\n to {\n visibility: visible; } }\n\n.dplayer-logo {\n pointer-events: none;\n position: absolute;\n left: 20px;\n top: 20px;\n max-width: 50px;\n max-height: 50px; }\n .dplayer-logo img {\n max-width: 100%;\n max-height: 100%;\n background: none; }\n\n.dplayer-menu {\n position: absolute;\n width: 170px;\n border-radius: 2px;\n background: rgba(28, 28, 28, 0.85);\n padding: 5px 0;\n overflow: hidden;\n z-index: 3;\n display: none; }\n .dplayer-menu.dplayer-menu-show {\n display: block; }\n .dplayer-menu .dplayer-menu-item {\n height: 30px;\n box-sizing: border-box;\n cursor: pointer; }\n .dplayer-menu .dplayer-menu-item:hover {\n background-color: rgba(255, 255, 255, 0.1); }\n .dplayer-menu .dplayer-menu-item a {\n display: inline-block;\n padding: 0 10px;\n line-height: 30px;\n color: #eee;\n font-size: 13px;\n display: inline-block;\n vertical-align: middle;\n width: 100%;\n box-sizing: border-box;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden; }\n .dplayer-menu .dplayer-menu-item a:hover {\n text-decoration: none; }\n\n.dplayer-notice {\n opacity: 0;\n position: absolute;\n bottom: 60px;\n left: 20px;\n font-size: 14px;\n border-radius: 2px;\n background: rgba(28, 28, 28, 0.9);\n padding: 7px 20px;\n transition: all .3s ease-in-out;\n overflow: hidden;\n color: #fff;\n pointer-events: none; }\n\n.dplayer-subtitle {\n position: absolute;\n bottom: 40px;\n width: 90%;\n left: 5%;\n text-align: center;\n color: #fff;\n text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);\n font-size: 20px; }\n .dplayer-subtitle.dplayer-subtitle-hide {\n display: none; }\n\n.dplayer-mask {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1;\n display: none; }\n .dplayer-mask.dplayer-mask-show {\n display: block; }\n\n.dplayer-video-wrap {\n position: relative;\n background: #000;\n font-size: 0;\n width: 100%;\n height: 100%; }\n .dplayer-video-wrap .dplayer-video {\n width: 100%;\n height: 100%;\n display: none; }\n .dplayer-video-wrap .dplayer-video-current {\n display: block; }\n .dplayer-video-wrap .dplayer-video-prepare {\n display: none; }\n\n.dplayer-info-panel {\n position: absolute;\n top: 10px;\n left: 10px;\n width: 400px;\n background: rgba(28, 28, 28, 0.8);\n padding: 10px;\n color: #fff;\n font-size: 12px;\n border-radius: 2px; }\n .dplayer-info-panel-hide {\n display: none; }\n .dplayer-info-panel .dplayer-info-panel-close {\n cursor: pointer;\n position: absolute;\n right: 10px;\n top: 10px; }\n .dplayer-info-panel .dplayer-info-panel-item > span {\n display: inline-block;\n vertical-align: middle;\n line-height: 15px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden; }\n .dplayer-info-panel .dplayer-info-panel-item-title {\n width: 100px;\n text-align: right;\n margin-right: 10px; }\n .dplayer-info-panel .dplayer-info-panel-item-data {\n width: 260px; }\n"],"sourceRoot":""} --------------------------------------------------------------------------------