|
|
@@ -1,5 +1,6 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
+
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>DPlayer Demo</title>
|
|
|
@@ -10,6 +11,7 @@
|
|
|
<script src="https://unpkg.com/hls.js/dist/hls.min.js"></script>
|
|
|
<script src="DPlayer.js"></script>
|
|
|
</head>
|
|
|
+
|
|
|
<body class="markdown-body">
|
|
|
<h2 id="quick-start">Quick Start</h2>
|
|
|
<div class="example">
|
|
|
@@ -122,7 +124,7 @@
|
|
|
var eventsEle = document.getElementById('events');
|
|
|
for (let i = 0; i < events.length; i++) {
|
|
|
dp2.on(events[i], (info) => {
|
|
|
- eventsEle.innerHTML += '<p>Event: ' + events[i] + '</p>';
|
|
|
+ eventsEle.innerHTML += '<p>Event: ' + events[i] + '</p>';
|
|
|
eventsEle.scrollTop = eventsEle.scrollHeight;
|
|
|
})
|
|
|
}
|
|
|
@@ -134,22 +136,22 @@
|
|
|
<button class="btn" onclick="dp3.switchQuality(1)">Switch quality</button>
|
|
|
<div id="dplayer3"></div>
|
|
|
<script>
|
|
|
- var dp3 = new DPlayer({
|
|
|
- container: document.getElementById('dplayer3'),
|
|
|
- video: {
|
|
|
- quality: [{
|
|
|
- name: 'HD',
|
|
|
- url: 'http://devtest.qiniudn.com/若能绽放光芒5.m3u8',
|
|
|
- type: 'hls'
|
|
|
- }, {
|
|
|
- name: 'SD',
|
|
|
- url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
|
|
|
- type: 'normal'
|
|
|
- }],
|
|
|
- defaultQuality: 0,
|
|
|
- pic: 'http://devtest.qiniudn.com/若能绽放光芒.png'
|
|
|
- }
|
|
|
- });
|
|
|
+ var dp3 = new DPlayer({
|
|
|
+ container: document.getElementById('dplayer3'),
|
|
|
+ video: {
|
|
|
+ quality: [{
|
|
|
+ name: 'HD',
|
|
|
+ url: 'http://devtest.qiniudn.com/若能绽放光芒5.m3u8',
|
|
|
+ type: 'hls'
|
|
|
+ }, {
|
|
|
+ name: 'SD',
|
|
|
+ url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
|
|
|
+ type: 'normal'
|
|
|
+ }],
|
|
|
+ defaultQuality: 0,
|
|
|
+ pic: 'http://devtest.qiniudn.com/若能绽放光芒.png'
|
|
|
+ }
|
|
|
+ });
|
|
|
</script>
|
|
|
</div>
|
|
|
|
|
|
@@ -221,6 +223,91 @@
|
|
|
</script>
|
|
|
</div>
|
|
|
|
|
|
+ <h2 id="customize-ui-icons">Customize UI icons</h2>
|
|
|
+ <div class="example">
|
|
|
+ <div id="dplayer9"></div>
|
|
|
+ <script>
|
|
|
+ var dp9 = new DPlayer({
|
|
|
+ container: document.getElementById('dplayer9'),
|
|
|
+ screenshot: false,
|
|
|
+ video: {
|
|
|
+ url: 'https://api.prprpr.me/dplayer/video/bilibili?aid=4045652',
|
|
|
+ },
|
|
|
+ icons: {
|
|
|
+ play: [
|
|
|
+ '0 0 24 24',
|
|
|
+ 'M8 5v14l11-7z',
|
|
|
+ '24'
|
|
|
+ ],
|
|
|
+ pause: [
|
|
|
+ '0 0 24 24',
|
|
|
+ 'M6 19h4V5H6v14zm8-14v14h4V5h-4z',
|
|
|
+ '24'
|
|
|
+ ],
|
|
|
+ 'volume-up': [
|
|
|
+ '0 0 24 24',
|
|
|
+ 'M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z',
|
|
|
+ '24'
|
|
|
+ ],
|
|
|
+ 'volume-down': [
|
|
|
+ '0 0 24 24',
|
|
|
+ 'M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z',
|
|
|
+ '24'
|
|
|
+ ],
|
|
|
+ 'volume-off': [
|
|
|
+ '0 0 24 24',
|
|
|
+ 'M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z',
|
|
|
+ '24'
|
|
|
+ ],
|
|
|
+ loop: [
|
|
|
+ '0 0 32 32',
|
|
|
+ 'M1.882 16.941c0 4.152 3.221 7.529 7.177 7.529v1.882c-4.996 0-9.060-4.222-9.060-9.412s4.064-9.412 9.060-9.412h7.96l-3.098-3.098 1.331-1.331 5.372 5.37-5.37 5.372-1.333-1.333 3.1-3.098h-7.962c-3.957 0-7.177 3.377-7.177 7.529zM22.94 7.529v1.882c3.957 0 7.177 3.377 7.177 7.529s-3.221 7.529-7.177 7.529h-7.962l3.098-3.098-1.331-1.331-5.37 5.37 5.372 5.372 1.331-1.331-3.1-3.1h7.96c4.998 0 9.062-4.222 9.062-9.412s-4.064-9.412-9.060-9.412z'
|
|
|
+ ],
|
|
|
+ full: [
|
|
|
+ '0 0 24 24',
|
|
|
+ 'M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z',
|
|
|
+ '24'
|
|
|
+ ],
|
|
|
+ 'full-in': [
|
|
|
+ '0 0 32 33',
|
|
|
+ 'M24.965 24.38h-18.132c-1.366 0-2.478-1.113-2.478-2.478v-11.806c0-1.364 1.111-2.478 2.478-2.478h18.132c1.366 0 2.478 1.113 2.478 2.478v11.806c0 1.364-1.11 2.478-2.478 2.478zM6.833 10.097v11.806h18.134l-0.002-11.806h-18.132zM2.478 28.928h5.952c0.684 0 1.238-0.554 1.238-1.239 0-0.684-0.554-1.238-1.238-1.238h-5.952v-5.802c0-0.684-0.554-1.239-1.238-1.239s-1.239 0.556-1.239 1.239v5.802c0 1.365 1.111 2.478 2.478 2.478zM30.761 19.412c-0.684 0-1.238 0.554-1.238 1.238v5.801h-5.951c-0.686 0-1.239 0.554-1.239 1.238 0 0.686 0.554 1.239 1.239 1.239h5.951c1.366 0 2.478-1.111 2.478-2.478v-5.801c0-0.683-0.554-1.238-1.239-1.238zM0 5.55v5.802c0 0.683 0.554 1.238 1.238 1.238s1.238-0.555 1.238-1.238v-5.802h5.952c0.684 0 1.238-0.554 1.238-1.238s-0.554-1.238-1.238-1.238h-5.951c-1.366-0.001-2.478 1.111-2.478 2.476zM32 11.35v-5.801c0-1.365-1.11-2.478-2.478-2.478h-5.951c-0.686 0-1.239 0.554-1.239 1.238s0.554 1.238 1.239 1.238h5.951v5.801c0 0.683 0.554 1.237 1.238 1.237 0.686 0.002 1.239-0.553 1.239-1.236z'
|
|
|
+ ],
|
|
|
+ setting: [
|
|
|
+ '0 0 24 24',
|
|
|
+ 'M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z',
|
|
|
+ '24'
|
|
|
+ ],
|
|
|
+ right: [
|
|
|
+ '0 0 32 32',
|
|
|
+ 'M22 16l-10.105-10.6-1.895 1.987 8.211 8.613-8.211 8.612 1.895 1.988 8.211-8.613z'
|
|
|
+ ],
|
|
|
+ comment: [
|
|
|
+ '0 0 24 24',
|
|
|
+ 'M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z',
|
|
|
+ '24'
|
|
|
+ ],
|
|
|
+ 'comment-off': [
|
|
|
+ '0 0 32 32',
|
|
|
+ 'M27.090 0.131h-22.731c-2.354 0-4.262 1.839-4.262 4.109v16.401c0 2.269 1.908 4.109 4.262 4.109h4.262v-2.706h8.469l-8.853 8.135 1.579 1.451 7.487-6.88h9.787c2.353 0 4.262-1.84 4.262-4.109v-16.401c0-2.27-1.909-4.109-4.262-4.109v0zM28.511 19.304c0 1.512-1.272 2.738-2.841 2.738h-8.425l-0.076-0.070-0.076 0.070h-11.311c-1.569 0-2.841-1.226-2.841-2.738v-13.696c0-1.513 1.272-2.739 2.841-2.739h19.889c1.569 0 2.841-0.142 2.841 1.37v15.064z'
|
|
|
+ ],
|
|
|
+ send: [
|
|
|
+ '0 0 32 32',
|
|
|
+ 'M13.725 30l3.9-5.325-3.9-1.125v6.45zM0 17.5l11.050 3.35 13.6-11.55-10.55 12.425 11.8 3.65 6.1-23.375-32 15.5z'
|
|
|
+ ],
|
|
|
+ menu: [
|
|
|
+ '0 0 22 32',
|
|
|
+ 'M20.8 14.4q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2zM1.6 11.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2zM20.8 20.8q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2z'
|
|
|
+ ],
|
|
|
+ camera: [
|
|
|
+ '0 0 32 32',
|
|
|
+ 'M16 23c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM16 13c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.206 0 4-1.794 4-4s-1.794-4-4-4zM27 28h-22c-1.654 0-3-1.346-3-3v-16c0-1.654 1.346-3 3-3h3c0.552 0 1 0.448 1 1s-0.448 1-1 1h-3c-0.551 0-1 0.449-1 1v16c0 0.552 0.449 1 1 1h22c0.552 0 1-0.448 1-1v-16c0-0.551-0.448-1-1-1h-11c-0.552 0-1-0.448-1-1s0.448-1 1-1h11c1.654 0 3 1.346 3 3v16c0 1.654-1.346 3-3 3zM24 10.5c0 0.828 0.672 1.5 1.5 1.5s1.5-0.672 1.5-1.5c0-0.828-0.672-1.5-1.5-1.5s-1.5 0.672-1.5 1.5zM15 4c0 0.552-0.448 1-1 1h-4c-0.552 0-1-0.448-1-1v0c0-0.552 0.448-1 1-1h4c0.552 0 1 0.448 1 1v0z'
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ iconColor: 'orange'
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ </div>
|
|
|
+
|
|
|
<h2 id="html5-check">HTML5 check</h2>
|
|
|
<ul>
|
|
|
<li class="video">Video</li>
|
|
|
@@ -239,4 +326,5 @@
|
|
|
<script src="demo.js"></script>
|
|
|
<script src="modernizr.js"></script>
|
|
|
</body>
|
|
|
+
|
|
|
</html>
|
Donald Silveira