零分杂记

DPlayer官方教程不清晰，GitHub打包下载的ZIP文件很乱，不知道该引入哪个JS，另外HLS是另外一个开发项目，而M3U8链接的播放又必须引入HLS的JS，如果看指南，下载GitHub上的项目，真的会看的一头雾水。

而事实上，M3U8链接播放，DPlayer的搭建，只需要3个JS，一个是JQ库，一个是DPlayer.js，另外一个就是HLS.js，这3个文件直接从官网指南里下载就可以了。官网链接

另外一个JQ文件，百度就可以直接下载，接下来就简单了。直接按照指南引入JS，创建DPlayer播放器

<div id="dplayer"></div>
<script src="hls.min.js"></script>      //本地文件路径
<script src="DPlayer.min.js"></script>  //本地文件路径

初始化播放器

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.m3u8',  //M3U8播放链接
        type: 'hls',
    },
    pluginOptions: {
        hls: {
            // hls config
        },
    },
});

另外一种方式，这种方式适合接入其他的方式，如P2P，上面那种方式基本上都够用

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.m3u8', //M3U8播放链接
        type: 'customHls',
        customType: {
            customHls: function (video, player) {
                const hls = new Hls();
                hls.loadSource(video.src);
                hls.attachMedia(video);
            },
        },
    },
});

需要注意的是：3个JS的顺序，JQ、HLS、DPlayer，然后就是初始化播放器的JS，关于其他的参数，参考官网指南！

在实际的测试中，iPhone手机的默认浏览器Safari无法创建DPlayer播放器，原因暂时未找到，不过，iPhone可以直接播放M3U8链接，所以，可以通过判断，在iPhone端，直接用video标签。

JS判断代码

<script type="text/javascript">
            /* 智能机浏览器版本信息: */
            var browser = {
                versions: function() {
                    var u = navigator.userAgent, app = navigator.appVersion;
                    return {
                        //移动终端浏览器版本信息
                        trident: u.indexOf('Trident') > -1, //IE内核
                        presto: u.indexOf('Presto') > -1, //opera内核
                        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                        mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
                        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                        iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
                        iPad: u.indexOf('iPad') > -1, //是否iPad
                        webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
                    };
                }(),
                language: (navigator.browserLanguage || navigator.language).toLowerCase()
            }

            if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
                document.writeln("苹果: " + browser.language +"<br><br>");
            }
            else if (browser.versions.android) {
                document.writeln("安卓: " + browser.language +"<br><br>");
            }else{
                document.writeln("电脑: " + browser.language +"<br><br>");
            }

            document.writeln("语言版本: " + browser.language +"<br><br>");
            document.writeln(" 是否为移动终端: " + browser.versions.mobile +"<br><br>");
            document.writeln(" ios终端: " + browser.versions.ios +"<br><br>");
            document.writeln(" android终端: " + browser.versions.android +"<br><br>");
            document.writeln(" 是否为iPhone: " + browser.versions.iPhone +"<br><br>");
            document.writeln(" 是否iPad: " + browser.versions.iPad +"<br><br>");
            document.writeln(navigator.userAgent +"<br><br>");

        </script>