DPlayer使用和下载

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;
                    }
                }
            }