mirror of
https://github.com/DIYgod/DPlayer
synced 2024-11-22 01:51:48 +00:00
make demo page great again
This commit is contained in:
DIYgod
parent
a7afc9cf43
commit
41578d58cf
78
demo/demo.css
Normal file
78
demo/demo.css
Normal 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
Normal file
14
demo/demo.js
Normal 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();
|
||||
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>
|
||||
1321
demo/modernizr.js
Normal file
1321
demo/modernizr.js
Normal file
File diff suppressed because it is too large
Load Diff
2
dist/DPlayer.min.css
vendored
2
dist/DPlayer.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/DPlayer.min.js
vendored
2
dist/DPlayer.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/DPlayer.min.js.map
vendored
2
dist/DPlayer.min.js.map
vendored
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
Block a user