2016-05-03 14:11:47 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
2017-09-18 20:40:16 +00:00
|
|
|
|
2016-05-03 14:11:47 +00:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>DPlayer Demo</title>
|
2017-03-08 16:30:51 +00:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
2018-01-06 18:56:54 +00:00
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css">
|
2017-07-24 18:26:38 +00:00
|
|
|
<link rel="stylesheet" href="demo.css">
|
2018-01-06 18:56:54 +00:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
|
2017-09-25 17:51:33 +00:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script>
|
2018-01-19 09:30:35 +00:00
|
|
|
<script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
|
2018-01-19 10:50:25 +00:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/pearplayer"></script>
|
2017-07-27 09:38:14 +00:00
|
|
|
<script src="DPlayer.js"></script>
|
2016-05-03 14:11:47 +00:00
|
|
|
</head>
|
2017-09-18 20:40:16 +00:00
|
|
|
|
2017-07-24 18:26:38 +00:00
|
|
|
<body class="markdown-body">
|
2018-07-19 06:53:26 +00:00
|
|
|
<h2>在 dialog 中承载视频</h2>
|
|
|
|
|
<h3 id="dplayer-dialog" class="show-dialog">Show Dialog</h3>
|
|
|
|
|
<div id="float-dplayer" class="float-dplayer">
|
|
|
|
|
<div id="dplayer-container" class="dplayer-container"></div>
|
|
|
|
|
<h3 id="close-dialog" class="close-dialog">X</h3>
|
|
|
|
|
</div>
|
|
|
|
|
|
2017-07-25 17:17:10 +00:00
|
|
|
<h2 id="quick-start">Quick Start</h2>
|
2017-07-24 18:26:38 +00:00
|
|
|
<div class="example">
|
|
|
|
|
<div id="dplayer1"></div>
|
|
|
|
|
</div>
|
2017-07-25 17:17:10 +00:00
|
|
|
|
|
|
|
|
<h2 id="options">Options</h2>
|
2017-07-24 18:26:38 +00:00
|
|
|
<div class="example">
|
|
|
|
|
<button class="btn" onclick="switchDPlayer()">Switch Video</button>
|
2017-08-16 16:12:48 +00:00
|
|
|
<button class="btn" onclick="dp2.notice('Notice演示')">notice</button>
|
|
|
|
|
<button class="btn" onclick="dp2.seek(120)">seek</button>
|
|
|
|
|
<button class="btn" onclick="dp2.volume(0.2)">volume</button>
|
|
|
|
|
<button class="btn" onclick="dp2.toggle()">toggle</button>
|
|
|
|
|
<button class="btn" onclick="dp2.destroy()">destroy</button>
|
|
|
|
|
<button class="btn" onclick="dp2.danmaku.hide()">danmaku.hide</button>
|
|
|
|
|
<button class="btn" onclick="dp2.danmaku.show()">danmaku.show</button>
|
2017-07-24 18:26:38 +00:00
|
|
|
<div id="dplayer2"></div>
|
2017-09-07 17:15:40 +00:00
|
|
|
<div id="events"></div>
|
2017-07-24 18:26:38 +00:00
|
|
|
</div>
|
2017-07-25 17:17:10 +00:00
|
|
|
|
|
|
|
|
<h2 id="quality-switching">Quality switching</h2>
|
2017-07-24 18:26:38 +00:00
|
|
|
<div class="example">
|
|
|
|
|
<button class="btn" onclick="dp3.switchQuality(1)">Switch quality</button>
|
|
|
|
|
<div id="dplayer3"></div>
|
|
|
|
|
</div>
|
2017-07-25 17:17:10 +00:00
|
|
|
|
|
|
|
|
<h2 id="hls-support">HLS support</h2>
|
2017-07-24 18:26:38 +00:00
|
|
|
<div class="example">
|
|
|
|
|
<div id="dplayer4"></div>
|
|
|
|
|
</div>
|
2017-07-25 17:17:10 +00:00
|
|
|
|
2018-01-06 18:56:54 +00:00
|
|
|
<h2 id="dash-support">MPEG DASH support</h2>
|
2017-07-24 18:26:38 +00:00
|
|
|
<div class="example">
|
2018-01-06 18:56:54 +00:00
|
|
|
<div id="dplayer8"></div>
|
2017-07-24 18:26:38 +00:00
|
|
|
</div>
|
2017-11-30 08:10:47 +00:00
|
|
|
|
2018-01-06 18:56:54 +00:00
|
|
|
<h2 id="flv-support">FLV support</h2>
|
2017-09-25 17:51:33 +00:00
|
|
|
<div class="example">
|
2018-01-06 18:56:54 +00:00
|
|
|
<div id="dplayer5"></div>
|
2017-09-25 17:51:33 +00:00
|
|
|
</div>
|
2017-07-25 17:17:10 +00:00
|
|
|
|
2018-01-19 09:30:35 +00:00
|
|
|
<h2 id="webtorrent">WebTorrent</h2>
|
|
|
|
|
<div class="example">
|
|
|
|
|
<div id="dplayer9"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2017-12-15 11:02:02 +00:00
|
|
|
<h2 id="live">Live</h2>
|
2017-07-24 18:26:38 +00:00
|
|
|
<div class="example">
|
2018-01-11 16:45:09 +00:00
|
|
|
<button class="btn" onclick="dp6.danmaku.draw({text: '假装收到 WebSocket 弹幕', color: '#fff', type: 'right'})">假装收到 WebSocket 弹幕</button>
|
2018-01-06 18:56:54 +00:00
|
|
|
<div id="dplayer6"></div>
|
2017-09-18 20:40:16 +00:00
|
|
|
</div>
|
|
|
|
|
|
2018-01-19 10:50:25 +00:00
|
|
|
<h2 id="custon-type">Custon video type</h2>
|
|
|
|
|
<div class="example">
|
|
|
|
|
<div id="dplayer10"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2018-01-06 18:56:54 +00:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/stats.js"></script>
|
2017-07-24 18:26:38 +00:00
|
|
|
<script src="demo.js"></script>
|
2016-05-03 14:11:47 +00:00
|
|
|
</body>
|
2017-09-18 20:40:16 +00:00
|
|
|
|
2016-05-03 14:11:47 +00:00
|
|
|
</html>
|
