http://dplayer.js.org/zh/

https://github.com/DIYgod/DPlayer

https://github.com/video-dev/hls.js

https://github.com/Bilibili/flv.js

---加载播放器文件:

<div id="dplayer"></div>

<script src="DPlayer.min.js"></script>

---在 js 里初始化:

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.mp4',
    },
});

---m3u8支持

<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',
        type: 'hls',
    },
    pluginOptions: {
        hls: {
            // hls config
        },
    },
});
console.log(dp.plugins.hls); // Hls 实例

---FLV支持

<div id="dplayer"></div>

<script src="flv.min.js"></script>

<script src="DPlayer.min.js"></script>

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.flv',
        type: 'flv',
    },
    pluginOptions: {
        flv: {
            // refer to https://github.com/bilibili/flv.js/blob/master/docs/api.md#flvjscreateplayer
            mediaDataSource: {
                // mediaDataSource config
            },
            config: {
                // config
            },
        },
    },
});
console.log(dp.plugins.flv); // flv 实例

---配合其他 MSE 库使用

<div id="dplayer"></div>

<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>

<script src="https://static.htmltoo.com/master/dplayer/dplayer.min.js"></script>

<script>
var type = 'normal';
if(Hls.isSupported() && Hls.WEBRTC_SUPPORT) {
    type = 'customHls';
}
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    autoplay: true,     // 可选，自动播放视频，不支持移动浏览器
    loop: true,         // 可选，循环播放音乐，默认：true
    lang: 'zh',         // 可选，语言，`zh'用于中文，`en'用于英语，
    video: {
        url: 'demo.m3u8',
        type: type,
        customType: {
            'customHls': function (video, player) {
                const hls = new Hls({
                    debug: false,
                    // Other hlsjsConfig options provided by hls.js
                    p2pConfig: {
                        live: false,        // 如果是直播设为true
                        // Other p2pConfig options provided by CDNBye http://www.cdnbye.com/cn/
                    }
                });
                hls.loadSource(video.src);
                hls.attachMedia(video);
            }
        }
    },
});
</script>

---参数

DPlayer 有丰富的参数可以自定义你的播放器实例