iotcat
/
DPlayer
mirror of https://github.com/IoTcat/DPlayer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

make demo page great again

Browse Source
master
DIYgod 7 years ago
parent a7afc9cf43
commit 41578d58cf
No known key found for this signature in database
GPG Key ID: EC0B76A252D3EF67
11 changed files with 1714 additions and 261 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 78
      demo/demo.css
  2. 14
      demo/demo.js
  3. 542
      demo/index.html
  4. 1321
      demo/modernizr.js
  5. 2
      dist/DPlayer.min.css
  6. 2
      dist/DPlayer.min.js
  7. 2
      dist/DPlayer.min.js.map
  8. 4
      package.json
  9. 2
      src/DPlayer.js
  10. 6
      src/DPlayer.scss
  11. 2
      src/option.js

78
demo/demo.css
Unescape View File

@ -0,0 +1,78 @@
body {
max-width: 700px;
margin: 0 auto;
padding: 45px;
}
.example {
position: relative;
margin: 15px 0 0;
padding: 39px 19px 14px;
background-color: #fff;
border-radius: 4px 4px 0 0;
border: 1px solid #ddd;
}
.example:after {
content: "Example";
position: absolute;
top: 0;
left: 0;
padding: 2px 8px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
color: #9da0a4;
border-radius: 4px 0 4px 0;
}
.highlight {
border-radius: 0 0 4px 4px;
border: 1px solid #ddd;
border-top: none;
}
.btn {
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
width: 110px;
height: 40px;
font-size: 14px;
margin: 0 0 10px;
cursor: pointer;
outline: none;
}
/* github-corner */
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0)
}
20%,
60% {
transform: rotate(-25deg)
}
40%,
80% {
transform: rotate(10deg)
}
}
@media (max-width:500px) {
.github-corner:hover .octo-arm {
animation: none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
/* modernizr */
.adownload li.adownload{ color: green; }.canvas li.canvas{ color: green; }.cssanimations li.cssanimations{ color: green; }.csstransforms li.csstransforms{ color: green; }.documentfragment li.documentfragment{ color: green; }.fullscreen li.fullscreen{ color: green; }.localstorage li.localstorage{ color: green; }.svg li.svg{ color: green; }.texttrackapi li.texttrackapi{ color: green; }.track li.track{ color: green; }.todataurljpeg li.todataurljpeg{ color: green; }.todataurlpng li.todataurlpng{ color: green; }.todataurlwebp li.todataurlwebp{ color: green; }.video li.video{ color: green; }.websockets li.websockets{ color: green; }.setclasses li.setclasses{ color: green; }
.no-adownload li.adownload{ color: red; }.no-canvas li.canvas{ color: red; }.no-cssanimations li.cssanimations{ color: red; }.no-csstransforms li.csstransforms{ color: red; }.no-documentfragment li.documentfragment{ color: red; }.no-fullscreen li.fullscreen{ color: red; }.no-localstorage li.localstorage{ color: red; }.no-svg li.svg{ color: red; }.no-texttrackapi li.texttrackapi{ color: red; }.no-track li.track{ color: red; }.no-todataurljpeg li.todataurljpeg{ color: red; }.no-todataurlpng li.todataurlpng{ color: red; }.no-todataurlwebp li.todataurlwebp{ color: red; }.no-video li.video{ color: red; }.no-websockets li.websockets{ color: red; }.no-setclasses li.setclasses{ color: red; }

14
demo/demo.js
Unescape View File

@ -0,0 +1,14 @@
// stats.js: JavaScript Performance Monitor
const stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom);
function animate () {
stats.begin();
// monitored code goes here
stats.end();
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
hljs.initHighlightingOnLoad();

542
demo/index.html
Unescape View File

@ -4,274 +4,308 @@
<meta charset="UTF-8">
<title>DPlayer Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
max-width: 40rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}
h1 {
font-size: 54px;
color: #333;
margin: 30px 0 10px;
}
h2 {
font-size: 22px;
color: #555;
}
h3 {
font-size: 24px;
color: #555;
}
hr {
display: block;
width: 7rem;
height: 1px;
margin: 2.5rem 0;
background-color: #eee;
border: 0;
}
a {
color: #08c;
text-decoration: none;
}
p {
font-size: 18px;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/github-markdown-css">
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/github-gist.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="../dist/DPlayer.min.css">
<script src="../plugin/flv.min.js"></script>
<script src="../plugin/hls.min.js"></script>
<script src="../dist/DPlayer.min.js"></script>
</head>
<body>
<div class="container">
<h1>DPlayer</h1>
<h2>Wow, such a lovely HTML5 danmaku video player</h2>
<p>Made by <a href="https://www.anotherhome.net/" target="_blank">DIYgod</a>. Available on <a href="https://github.com/DIYgod/DPlayer" target="_blank">GitHub</a>. Licensed SATA.</p>
<hr>
<h3>Normal</h3>
<div id="dplayer1"></div>
<button onclick="switchDPlayer()">Switch Video</button>
<button onclick="dp1.notice('Notice演示')">Notice</button>
<h3>Quality switching</h3>
<div id="dplayer6"></div>
<button onclick="dp6.switchQuality(1)">Switch quality</button>
<h3>Live Video (HTTP Live Streaming, M3U8 format) support</h3>
<div id="dplayer3"></div>
<h3>FLV format support</h3>
<div id="dplayer4"></div>
<h3>Bilibili video and danmaku support</h3>
<div id="dplayer2"></div>
<!--<h3>Segmented videos</h3>
<div id="dplayer5"></div>-->
</div>
<script src="https://rawgit.com/mrdoob/stats.js/master/build/stats.min.js"></script>
<script src="../plugin/flv.min.js"></script>
<script src="../plugin/hls.min.js"></script>
<script src="../dist/DPlayer.min.js"></script>
<script>
// Normal
var dp1 = new DPlayer({
element: document.getElementById('dplayer1'),
autoplay: false,
theme: '#FADFA3',
loop: true,
screenshot: true,
hotkey: true,
logo: 'http://devtest.qiniudn.com/DPlayer.png',
<body class="markdown-body">
<p align="center">
<img src="https://ws4.sinaimg.cn/large/006tKfTcgy1fhu01y9uy7j305k04s3yc.jpg" alt="ADPlayer" width="100">
</p>
<h1 align="center" style="margin-top: 16px;">DPlayer</h1>
<blockquote>
<p>Wow, such a lovely HTML5 danmaku video player</p>
</blockquote>
<p><a href="https://www.npmjs.com/package/dplayer"><img src="https://img.shields.io/npm/v/dplayer.svg?style=flat-square" alt="npm"></a>
<a href="https://github.com/DIYgod/DPlayer/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/dplayer.svg?style=flat-square"></a>
<a href="https://david-dm.org/DIYgod/DPlayer#info=devDependencies"><img src="https://img.shields.io/david/dev/DIYgod/dplayer.svg?style=flat-square"></a>
<a href="https://www.npmjs.com/package/dplayer"><img src="https://img.shields.io/npm/dt/dplayer.svg?style=flat-square"></a>
<a href="https://travis-ci.org/DIYgod/DPlayer"><img src="https://img.shields.io/travis/DIYgod/DPlayer.svg?style=flat-square"></a>
<a href="https://github.com/DIYgod/DPlayer#donate"><img src="https://img.shields.io/badge/$-donate-ff69b4.svg?style=flat-square"></a></p>
<h2>Quick Start</h2>
<div class="example">
<div id="dplayer1"></div>
<script>
var dp1 = new DPlayer({
element: document.getElementById('dplayer1'),
video: {
url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
pic: 'http://devtest.qiniudn.com/若能绽放光芒.png',
},
danmaku: {
id: '9E2E3368B56CDBB4',
api: 'https://api.prprpr.me/dplayer/'
}
});
</script>
</div>
<div class="highlight highlight-text-html-basic"><pre><code class="html">&lt;link rel=&quot;stylesheet&quot; href=&quot;dist/DPlayer.min.css&quot;&gt;
&lt;div id=&quot;dplayer&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;dist/DPlayer.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
var dp = new DPlayer({
element: document.getElementById(&#39;dplayer&#39;),
video: {
url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
pic: 'http://devtest.qiniudn.com/若能绽放光芒.png',
type: 'auto',
url: &#39;demo.mp4&#39;,
pic: &#39;demo.png&#39;
},
danmaku: {
id: '9E2E3368B56CDBB4',
api: 'https://api.prprpr.me/dplayer/',
token: 'tokendemo',
maximum: 3000,
user: 'DIYgod的女粉'
},
contextmenu: [
{
text: '关于作者',
link: 'http://diygod.me'
},
{
text: '播放器意见反馈',
link: 'https://github.com/DIYgod/DPlayer/issues'
},
{
text: '关于 DPlayer 播放器',
link: 'https://github.com/DIYgod/DPlayer'
},
{
text: '自定义右键菜单demo',
link: 'https://github.com/DIYgod/DPlayer'
},
]
id: &#39;demo&#39;,
api: &#39;https://api.prprpr.me/dplayer/&#39;
}
});
function switchDPlayer() {
if (dp1.option.danmaku.id !== '5rGf5Y2X55qu6Z2p') {
dp1.switchVideo({
url: 'http://devtest.qiniudn.com/微小微-江南皮革厂倒闭了.mp4',
pic: 'http://devtest.qiniudn.com/微小微-江南皮革厂倒闭了.jpg',
type: 'auto',
},
{
id: '5rGf5Y2X55qu6Z2p',
&lt;/script&gt;</code></pre></div>
<h2>Options</h2>
<div class="example">
<button class="btn" onclick="switchDPlayer()">Switch Video</button>
<button class="btn" onclick="dp2.notice('Notice演示')">Notice</button>
<div id="dplayer2"></div>
<script>
var dp2 = new DPlayer({
element: document.getElementById('dplayer2'),
autoplay: false,
theme: '#FADFA3',
loop: true,
screenshot: true,
hotkey: true,
logo: 'http://devtest.qiniudn.com/DPlayer.png',
video: {
url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
pic: 'http://devtest.qiniudn.com/若能绽放光芒.png',
type: 'auto',
},
danmaku: {
id: '9E2E3368B56CDBB42',
api: 'https://api.prprpr.me/dplayer/',
token: 'tokendemo',
maximum: 3000
});
}
else {
dp1.switchVideo({
url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
maximum: 3000,
user: 'DIYgod'
},
contextmenu: [
{
text: 'custom contextmenu',
link: 'https://github.com/DIYgod/DPlayer'
},
]
});
function switchDPlayer() {
if (dp2.option.danmaku.id !== '5rGf5Y2X55qu6Z2p') {
dp2.switchVideo({
url: 'http://devtest.qiniudn.com/微小微-江南皮革厂倒闭了.mp4',
pic: 'http://devtest.qiniudn.com/微小微-江南皮革厂倒闭了.jpg',
type: 'auto',
},
{
id: '5rGf5Y2X55qu6Z2p',
api: 'https://api.prprpr.me/dplayer/',
maximum: 3000,
user: 'DIYgod'
});
}
else {
dp2.switchVideo({
url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
pic: 'http://devtest.qiniudn.com/若能绽放光芒.png',
type: 'auto',
},
{
id: '9E2E3368B56CDBB42',
api: 'https://api.prprpr.me/dplayer/',
maximum: 3000,
user: 'DIYgod'
});
}
}
</script>
</div>
<div class="highlight highlight-text-html-basic">
<pre><code class="js">{
element: document.getElementById(&#39;dplayer&#39;),
autoplay: false,
theme: &#39;#FADFA3&#39;,
loop: true,
screenshot: true,
hotkey: true,
logo: &#39;logo.png&#39;,
video: {
url: &#39;demo.mp4&#39;,
pic: &#39;demo.png&#39;,
type: &#39;auto&#39;,
},
danmaku: {
id: &#39;demo&#39;,
api: &#39;https://api.prprpr.me/dplayer/&#39;,
token: &#39;demo&#39;,
maximum: 3000,
user: &#39;DIYgod&#39;
},
contextmenu: [
{
text: &#39;custom contextmenu&#39;,
link: &#39;https://github.com/DIYgod/DPlayer&#39;
},
]
}</code></pre>
</div>
<h2>Quality switching</h2>
<div class="example">
<button class="btn" onclick="dp3.switchQuality(1)">Switch quality</button>
<div id="dplayer3"></div>
<script>
var dp3 = new DPlayer({
element: document.getElementById('dplayer3'),
video: {
quality: [{
name: 'HD',
url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4?1'
}, {
name: 'SD',
url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4?2'
}],
defaultQuality: 0,
pic: 'http://devtest.qiniudn.com/若能绽放光芒.png',
type: 'auto',
},
{
id: '9E2E3368B56CDBB4',
danmaku: {
id: '9E2E3368B56CDBB43',
api: 'https://api.prprpr.me/dplayer/'
}
});
</script>
</div>
<div class="highlight highlight-text-html-basic">
<pre><code class="js">{
video: {
quality: [{
name: &#39;HD&#39;,
url: &#39;demo1.mp4&#39;
}, {
name: &#39;SD&#39;,
url: &#39;demo2.mp4&#39;
}],
defaultQuality: 0
}
}</code></pre>
</div>
<h2>Live Video (HTTP Live Streaming, M3U8 format) support</h2>
<div class="example">
<div id="dplayer4"></div>
<script>
var dp4 = new DPlayer({
element: document.getElementById('dplayer4'),
video: {
url: 'http://devtest.qiniudn.com/若能绽放光芒5.m3u8',
pic: 'http://devtest.qiniudn.com/若能绽放光芒.png',
type: 'hls',
},
danmaku: {
id: '9E2E3368B56CDBB44',
api: 'https://api.prprpr.me/dplayer/',
token: 'tokendemo',
maximum: 3000
});
}
}
});
</script>
</div>
<div class="highlight highlight-text-html-basic">
<pre><code class="js">{
video: {
url: &#39;demo.m3u8&#39;,
pic: &#39;demo.png&#39;,
type: &#39;hls&#39;,
}
}</code></pre>
</div>
<h2>FLV support</h2>
<div class="example">
<div id="dplayer5"></div>
<script>
var dp5 = new DPlayer({
element: document.getElementById('dplayer5'),
video: {
url: 'http://devtest.qiniudn.com/【微小微】玖月奇迹－踩踩踩.flv',
pic: 'http://devtest.qiniudn.com/【微小微】玖月奇迹－踩踩踩.jpg',
type: 'flv',
},
danmaku: {
id: '9E2E3368B56CDBB45',
api: 'https://api.prprpr.me/dplayer/',
}
});
</script>
</div>
<div class="highlight highlight-text-html-basic">
<pre><code class="js">{
video: {
url: &#39;demo.flv&#39;,
pic: &#39;demo.png&#39;,
type: &#39;flv&#39;,
}
}</code></pre>
</div>
<h2>Bilibili video and danmaku support</h2>
<div class="example">
<div id="dplayer6"></div>
<script>
var dp5 = new DPlayer({
element: document.getElementById('dplayer6'),
screenshot: false,
video: {
url: 'https://api.prprpr.me/dplayer/video/bilibili?aid=4045652',
pic: 'http://devtest.qiniudn.com/微小微-江南皮革厂倒闭了.jpg'
},
danmaku: {
id: '9E2E3368B56CDBB46',
api: 'https://api.prprpr.me/dplayer/',
addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4045652']
}
});
</script>
</div>
<div class="highlight highlight-text-html-basic">
<pre><code class="js">{
screenshot: false,
video: {
url: &#39;https://api.prprpr.me/dplayer/video/bilibili?aid=[aid]&#39;
},
danmaku: {
addition: [&#39;https://api.prprpr.me/dplayer/bilibili?aid=[aid]&#39;]
}
}</code></pre>
</div>
<h2>HTML5 check</h2>
<ul>
<li class="adownload">a[download]</li>
<li class="canvas">Canvas</li>
<li class="cssanimations">CSS animations</li>
<li class="csstransforms">CSS transforms</li>
<li class="documentfragment">Document fragment</li>
<li class="fullscreen">Fullscreen</li>
<li class="localstorage">Localstorage</li>
<li class="svg">SVG</li>
<li class="track">Track</li>
<li class="todataurljpeg">toDataURL jpeg</li>
<li class="todataurlpng">toDataURL png</li>
<li class="todataurlwebp">toDataURL webp</li>
<li class="video">Video</li>
<li class="websockets">WebSockets</li>
</ul>
// Bilibili video and danmaku support
var dp2 = new DPlayer({
element: document.getElementById('dplayer2'),
autoplay: false,
theme: '#FADFA3',
loop: true,
screenshot: false,
logo: 'http://devtest.qiniudn.com/DPlayer.png',
video: {
url: 'https://api.prprpr.me/dplayer/video/bilibili?aid=4045652',
pic: 'http://devtest.qiniudn.com/微小微-江南皮革厂倒闭了.jpg',
type: 'auto',
},
danmaku: {
id: '5rGf5Y2X55qu6Z2p',
api: 'https://api.prprpr.me/dplayer/',
token: 'tokendemo',
maximum: 3000,
addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4045652']
}
});
// Live Video (HTTP Live Streaming, M3U8 format) support
var dp3 = new DPlayer({
element: document.getElementById('dplayer3'),
autoplay: false,
theme: '#FADFA3',
loop: true,
screenshot: true,
hotkey: true,
logo: 'http://devtest.qiniudn.com/DPlayer.png',
video: {
url: 'http://devtest.qiniudn.com/若能绽放光芒5.m3u8',
pic: 'http://devtest.qiniudn.com/若能绽放光芒.png',
type: 'hls',
},
danmaku: {
id: '9E2E3368B56CDBB42',
api: 'https://api.prprpr.me/dplayer/',
token: 'tokendemo',
maximum: 3000
}
});
// FLV format support
var dp4 = new DPlayer({
element: document.getElementById('dplayer4'),
autoplay: false,
theme: '#FADFA3',
loop: true,
screenshot: true,
hotkey: true,
logo: 'http://devtest.qiniudn.com/DPlayer.png',
video: {
url: 'http://devtest.qiniudn.com/【微小微】玖月奇迹－踩踩踩.flv',
pic: 'http://devtest.qiniudn.com/【微小微】玖月奇迹－踩踩踩.jpg',
type: 'flv',
},
danmaku: {
id: '9E2E3368B56CDBB43',
api: 'https://api.prprpr.me/dplayer/',
token: 'tokendemo',
maximum: 3000
}
});
// Segmented videos
// var dp5 = new DPlayer({
// element: document.getElementById('dplayer5'),
// autoplay: false,
// theme: '#FADFA3',
// loop: true,
// screenshot: true,
// hotkey: true,
// preload: 'metadata',
// video: {
// url: ['http://devtest.qiniudn.com/若能绽放光芒0.mp4', 'http://devtest.qiniudn.com/若能绽放光芒1.mp4', 'http://devtest.qiniudn.com/若能绽放光芒2.mp4', 'http://devtest.qiniudn.com/若能绽放光芒3.mp4', 'http://devtest.qiniudn.com/若能绽放光芒4.mp4', 'http://devtest.qiniudn.com/若能绽放光芒5.mp4', 'http://devtest.qiniudn.com/若能绽放光芒6.mp4', 'http://devtest.qiniudn.com/若能绽放光芒7.mp4', 'http://devtest.qiniudn.com/若能绽放光芒8.mp4'],
// pic: 'http://devtest.qiniudn.com/若能绽放光芒.png',
// type: 'normal',
// },
// danmaku: {
// id: '9E2E3368B56CDBB40',
// api: 'https://api.prprpr.me/dplayer/',
// token: 'tokendemo',
// maximum: 3000
// }
// });
// Quality switching
var dp6 = new DPlayer({
element: document.getElementById('dplayer6'),
autoplay: false,
theme: '#FADFA3',
loop: true,
screenshot: true,
hotkey: true,
logo: 'http://devtest.qiniudn.com/DPlayer.png',
video: {
quality: [{
name: '高清',
url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4?1'
}, {
name: '超清',
url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4?2'
}],
defaultQuality: 0,
pic: 'http://devtest.qiniudn.com/若能绽放光芒.png',
type: 'auto',
},
danmaku: {
id: '9E2E3368B56CDBB4',
api: 'https://api.prprpr.me/dplayer/',
token: 'tokendemo',
maximum: 3000,
user: 'DIYgod的女粉'
}
});
// stats.js: JavaScript Performance Monitor
var stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom);
function animate() {
stats.begin();
// monitored code goes here
stats.end();
<a href="https://github.com/DIYgod/DPlayer" target="_blank" class="github-corner">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg>
</a>
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</script>
<a href="https://github.com/DIYgod/DPlayer" target="_blank" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<script src="https://rawgit.com/mrdoob/stats.js/master/build/stats.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script src="demo.js"></script>
<script src="modernizr.js"></script>
</body>
</html>

1321
demo/modernizr.js
View File

File diff suppressed because it is too large Load Diff

2
dist/DPlayer.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/DPlayer.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/DPlayer.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
package.json
Unescape View File

@ -1,6 +1,6 @@
{
"name": "dplayer",
"version": "1.4.3",
"version": "1.5.0",
"description": "Wow, such a lovely HTML5 danmaku video player",
"main": "dist/DPlayer.min.js",
"style": "dist/DPlayer.min.css",
@ -23,7 +23,7 @@
"html5"
],
"author": "DIYgod",
"license": "SATA",
"license": "MIT",
"bugs": {
"url": "https://github.com/DIYgod/DPlayer/issues"
},

2
src/DPlayer.js
Unescape View File

@ -1,4 +1,4 @@
console.log('\n %c DPlayer 1.4.3 %c http://dplayer.js.org \n\n', 'color: #fadfa3; background: #030307; padding:5px 0;', 'background: #fadfa3; padding:5px 0;');
console.log('\n %c DPlayer 1.5.0 %c http://dplayer.js.org \n\n', 'color: #fadfa3; background: #030307; padding:5px 0;', 'background: #fadfa3; padding:5px 0;');
require('./DPlayer.scss');
const utils = require('./utils.js');

6
src/DPlayer.scss
Unescape View File

@ -4,6 +4,10 @@
user-select: none;
line-height: 1;
* {
box-sizing: content-box;
}
&:-webkit-full-screen {
width: 100%;
height: 100%;
@ -386,6 +390,7 @@
text-align: center;
opacity: 1;
transition: opacity .1s ease-in-out;
word-wrap: normal;
}
.dplayer-bar {
@ -1046,6 +1051,7 @@
img {
max-width: 100%;
max-height: 100%;
background: none;
}
}

2
src/option.js
Unescape View File

@ -14,7 +14,7 @@ module.exports = (option) => {
theme: '#b7daff',
loop: false,
lang: navigator.language.indexOf('zh') !== -1 ? 'zh' : 'en',
screenshot: false,
screenshot: true,
hotkey: true,
preload: 'auto',
apiBackend: defaultApiBackend,

Write Preview
Loading…
Cancel
Save