1.官网介绍
http://dplayer.js.org/#/home?id=installation
2.下载:
记得把带map的一起下了
https://github.com/MoePlayer/DPlayer/tree/master/dist
3.m3u8格式在线测试:
http://www.86y.org/m3u8test.html
4.报错:Hls未定义(如果出现flvjs、dashjs未定什么的类似)
解决:
网上去下个hls.js并链接到你的网页。
原因:
由于DPlayer只是播放器,需要自己添加需要的媒体流协议如Hls,如果没有就会报错。
下面这段是报错位置的部分:
目的是:通过视频格式(如.m3u8)判断需要的媒体流协议:hls、flv、dash、normal。然后进行相应的播放.
value: function initMSE(video, type) {
var _this3 = this;
this.type = type;
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 {
console.error('Illegal customType: ' + type);
}
} 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.type = 'normal';
}
}
if (this.type === 'hls' && (video.canPlayType('application/x-mpegURL') || video.canPlayType('application/vnd.apple.mpegURL'))) {
this.type = 'normal';
}
switch (this.type) {
case 'hls':
if (Hls) {
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(video.src);
hls.attachMedia(video);
} else {
this.notice('Error: Hls is not supported.');
}
} else {
this.notice('Error: Can\'t find Hls.');
}
break;
case 'flv':
if (flvjs && flvjs.isSupported()) {
if (flvjs.isSupported()) {
var 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;
case 'dash':
if (dashjs) {
dashjs.MediaPlayer().create().initialize(video, video.src, false);
} else {
this.notice('Error: Can\'t find dashjs.');
}
break;
case 'webtorrent':
if (WebTorrent) {
if (WebTorrent.WEBRTC_SUPPORT) {
this.container.classList.add('dplayer-loading');
var client = new WebTorrent();
var torrentId = video.src;
client.add(torrentId, function (torrent) {
var file = torrent.files.find(function (file) {
return file.name.endsWith('.mp4');
});
file.renderTo(_this3.video, { autoplay: _this3.options.autoplay }, function () {
_this3.container.classList.remove('dplayer-loading');
});
});
} else {
this.notice('Error: Webtorrent is not supported.');
}
} else {
this.notice('Error: Can\'t find Webtorrent.');
}
break;
}
}
}