Skip to content

Commit

Permalink
support custom video type
Browse files Browse the repository at this point in the history
DIYgod committed Jan 19, 2018
1 parent 8e69ada commit d753f82
Showing 7 changed files with 116 additions and 83 deletions.
21 changes: 11 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
@@ -22,19 +22,20 @@ DPlayer is a lovely HTML5 danmaku video player to help people build video and da
**DPlayer supports:**

- Streaming formats
- [HLS](https://github.com/video-dev/hls.js)
- [FLV](https://github.com/Bilibili/flv.js)
- [MPEG DASH](https://github.com/Dash-Industry-Forum/dash.js)
- [HLS](https://github.com/video-dev/hls.js)
- [FLV](https://github.com/Bilibili/flv.js)
- [MPEG DASH](https://github.com/Dash-Industry-Forum/dash.js)
- [WebTorrent](https://github.com/webtorrent/webtorrent)
- Any other custom streaming formats
- Media formats
- MP4 H.264
- WebM
- Ogg Theora Vorbis
- MP4 H.264
- WebM
- Ogg Theora Vorbis
- Features
- Danamku
- Screenshot
- Hotkeys
- Quality switching
- Danamku
- Screenshot
- Hotkeys
- Quality switching
- Thumbnails
- Subtitle

16 changes: 16 additions & 0 deletions demo/demo.js
Original file line number Diff line number Diff line change
@@ -177,6 +177,22 @@ function initPlayers () {
// type: 'hls'
// }
// });

// window.dp10 = new DPlayer({
// container: document.getElementById('dplayer10'),
// video: {
// url: 'https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4',
// type: 'pearplayer',
// customType: {
// 'pearplayer': function (video, player) {
// new PearPlayer(video, {
// src: video.src,
// autoplay: player.options.autoplay
// });
// }
// }
// }
// });
}

function clearPlayers () {
6 changes: 6 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -11,6 +11,7 @@
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pearplayer"></script>
<script src="DPlayer.js"></script>
</head>

@@ -66,6 +67,11 @@ <h2 id="live">Live</h2>
<div id="dplayer6"></div>
</div>

<h2 id="custon-type">Custon video type</h2>
<div class="example">
<div id="dplayer10"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/stats.js"></script>
<script src="demo.js"></script>
</body>
2 changes: 1 addition & 1 deletion dist/DPlayer.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/DPlayer.min.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "dplayer",
"version": "1.20.2",
"version": "1.21.0",
"description": "Wow, such a lovely HTML5 danmaku video player",
"main": "dist/DPlayer.min.js",
"style": "dist/DPlayer.min.css",
150 changes: 80 additions & 70 deletions src/js/player.js
Original file line number Diff line number Diff line change
@@ -308,93 +308,103 @@ class DPlayer {

initMSE (video, type) {
this.type = type;
if (this.type === 'auto') {
if (/m3u8(#|\?|$)/i.exec(video.src)) {
this.type = 'hls';
}
else if (/.flv(#|\?|$)/i.exec(video.src)) {
this.type = 'flv';
}
else if (/.mpd(#|\?|$)/i.exec(video.src)) {
this.type = 'dash';
if (this.options.video.customType && this.options.video.customType[type]) {
if (Object.prototype.toString.call(this.options.video.customType[type]) === '[object Function]') {
this.options.video.customType[type](this.video, this);
}
else {
this.type = 'normal';
console.error(`Illegal customType: ${type}`);
}
}

switch (this.type) {
// https://github.com/video-dev/hls.js
case 'hls':
if (Hls) {
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(video.src);
hls.attachMedia(video);
else {
if (this.type === 'auto') {
if (/m3u8(#|\?|$)/i.exec(video.src)) {
this.type = 'hls';
}
else if (/.flv(#|\?|$)/i.exec(video.src)) {
this.type = 'flv';
}
else if (/.mpd(#|\?|$)/i.exec(video.src)) {
this.type = 'dash';
}
else {
this.notice('Error: Hls is not supported.');
this.type = 'normal';
}
}
else {
this.notice('Error: Can\'t find Hls.');
}
break;

// https://github.com/Bilibili/flv.js
case 'flv':
if (flvjs && flvjs.isSupported()) {
if (flvjs.isSupported()) {
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url: video.src
});
flvPlayer.attachMediaElement(video);
flvPlayer.load();

switch (this.type) {
// https://github.com/video-dev/hls.js
case 'hls':
if (Hls) {
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(video.src);
hls.attachMedia(video);
}
else {
this.notice('Error: Hls is not supported.');
}
}
else {
this.notice('Error: flvjs is not supported.');
this.notice('Error: Can\'t find Hls.');
}
}
else {
this.notice('Error: Can\'t find flvjs.');
}
break;
break;

// https://github.com/Bilibili/flv.js
case 'flv':
if (flvjs && flvjs.isSupported()) {
if (flvjs.isSupported()) {
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url: video.src
});
flvPlayer.attachMediaElement(video);
flvPlayer.load();
}
else {
this.notice('Error: flvjs is not supported.');
}
}
else {
this.notice('Error: Can\'t find flvjs.');
}
break;

// https://github.com/Dash-Industry-Forum/dash.js
case 'dash':
if (dashjs) {
dashjs.MediaPlayer().create().initialize(video, video.src, false);
}
else {
this.notice('Error: Can\'t find dashjs.');
}
break;

// https://github.com/webtorrent/webtorrent
case 'webtorrent':
if (WebTorrent) {
if (WebTorrent.WEBRTC_SUPPORT) {
this.container.classList.add('dplayer-loading');
const client = new WebTorrent();
const torrentId = video.src;
client.add(torrentId, (torrent) => {
const file = torrent.files.find((file) => file.name.endsWith('.mp4'));
file.renderTo(this.video, {
autoplay: this.options.autoplay
}, () => {
this.container.classList.remove('dplayer-loading');
// https://github.com/Dash-Industry-Forum/dash.js
case 'dash':
if (dashjs) {
dashjs.MediaPlayer().create().initialize(video, video.src, false);
}
else {
this.notice('Error: Can\'t find dashjs.');
}
break;

// https://github.com/webtorrent/webtorrent
case 'webtorrent':
if (WebTorrent) {
if (WebTorrent.WEBRTC_SUPPORT) {
this.container.classList.add('dplayer-loading');
const client = new WebTorrent();
const torrentId = video.src;
client.add(torrentId, (torrent) => {
const file = torrent.files.find((file) => file.name.endsWith('.mp4'));
file.renderTo(this.video, {
autoplay: this.options.autoplay
}, () => {
this.container.classList.remove('dplayer-loading');
});
});
});
}
else {
this.notice('Error: Webtorrent is not supported.');
}
}
else {
this.notice('Error: Webtorrent is not supported.');
this.notice('Error: Can\'t find Webtorrent.');
}
break;
}
else {
this.notice('Error: Can\'t find Webtorrent.');
}
break;
}
}

0 comments on commit d753f82

Please sign in to comment.