make demo page great again
This commit is contained in:
DIYgod
parent
a7afc9cf43
commit
41578d58cf
|
|
@ -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; }
|
||||
|
|
@ -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();
|
||||
544
demo/index.html
544
demo/index.html
|
|
@ -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"><link rel="stylesheet" href="dist/DPlayer.min.css">
|
||||
<div id="dplayer"></div>
|
||||
<script src="dist/DPlayer.min.js"></script>
|
||||
<script>
|
||||
var dp = new DPlayer({
|
||||
element: document.getElementById('dplayer'),
|
||||
video: {
|
||||
url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
|
||||
pic: 'http://devtest.qiniudn.com/若能绽放光芒.png',
|
||||
type: 'auto',
|
||||
url: 'demo.mp4',
|
||||
pic: 'demo.png'
|
||||
},
|
||||
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: 'demo',
|
||||
api: 'https://api.prprpr.me/dplayer/'
|
||||
}
|
||||
});
|
||||
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',
|
||||
</script></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('dplayer'),
|
||||
autoplay: false,
|
||||
theme: '#FADFA3',
|
||||
loop: true,
|
||||
screenshot: true,
|
||||
hotkey: true,
|
||||
logo: 'logo.png',
|
||||
video: {
|
||||
url: 'demo.mp4',
|
||||
pic: 'demo.png',
|
||||
type: 'auto',
|
||||
},
|
||||
danmaku: {
|
||||
id: 'demo',
|
||||
api: 'https://api.prprpr.me/dplayer/',
|
||||
token: 'demo',
|
||||
maximum: 3000,
|
||||
user: 'DIYgod'
|
||||
},
|
||||
contextmenu: [
|
||||
{
|
||||
text: 'custom contextmenu',
|
||||
link: 'https://github.com/DIYgod/DPlayer'
|
||||
},
|
||||
]
|
||||
}</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: 'HD',
|
||||
url: 'demo1.mp4'
|
||||
}, {
|
||||
name: 'SD',
|
||||
url: 'demo2.mp4'
|
||||
}],
|
||||
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: 'demo.m3u8',
|
||||
pic: 'demo.png',
|
||||
type: 'hls',
|
||||
}
|
||||
|
||||
// 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();
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}</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: 'demo.flv',
|
||||
pic: 'demo.png',
|
||||
type: 'flv',
|
||||
}
|
||||
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>
|
||||
}</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: 'https://api.prprpr.me/dplayer/video/bilibili?aid=[aid]'
|
||||
},
|
||||
danmaku: {
|
||||
addition: ['https://api.prprpr.me/dplayer/bilibili?aid=[aid]']
|
||||
}
|
||||
}</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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue