DPlayer 播放 HLS 视频时为什么一直加载转圈？

雪琪提问于 2026-03-12 10:10:22 阅读 18

交互

我用 DPlayer 播放一个 .m3u8 的直播流，但页面一直显示加载动画，视频就是出不来。控制台也没报错，网络面板里能看到 m3u8 文件和 ts 分片都成功请求了。

我试过把 video 元素的 crossorigin 设成 anonymous，也加了 hls.js 作为插件，但还是不行。是不是哪里配置漏了？

const player = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'https://example.com/live/stream.m3u8',
        type: 'hls'
    },
    plugins: [HlsJsPlugin]
});

我来解答赞 4 收藏

反馈

2 条解答

皇甫春莉 Lv1

兄弟，你这个写法有问题。

DPlayer 里 plugin 选项接收的应该是一个 Hls 实例，不是 HlsJsPlugin 这个类本身。你得先 new 一个 Hls 出来，再传进去：

const hls = new Hls();

const player = new DPlayer({

    container: document.getElementById('dplayer'),

    video: {

        url: 'https://example.com/live/stream.m3u8',

        type: 'hls'

    },

    plugin: {

        hls: hls

    }

});

还有一种更省心的办法——如果你用的是较新版本的 DPlayer（1.25.0+），其实已经内置了 HLS 支持，直接删掉那个插件配置都行：

const player = new DPlayer({

    container: document.getElementById('dplayer'),

    video: {

        url: 'https://example.com/live/stream.m3u8',

        type: 'hls'

    }

});

当时我也卡在这捣鼓半天，后来发现官方文档关于 plugin 的示例特别少，很容易踩坑。你先试试上面第一种写法，把 Hls 实例传进去，大概率就能播了。

2026-03-20 00:00

Top丶竞一 Lv1

你的问题大概率出在 HlsJsPlugin 的初始化方式上。DPlayer 的 hls.js 插件不是直接 new 一下就完事的。

正确的用法应该是这样：

// 先实例化插件，再传给 DPlayer

const hlsjsPlugin = new DPlayer.HlsJsPlugin({

    enableWorker: true,

    lowLatencyMode: true

});



const player = new DPlayer({

    container: document.getElementById('dplayer'),

    video: {

        url: 'https://example.com/live/stream.m3u8',

        type: 'hls'

    },

    plugin: hlsjsPlugin

});

注意这里是 plugin 而不是 plugins，这是个容易踩的坑。

另外还有几个可能的原因要排查一下：

1. 跨域配置光设 video 元素不够，服务器端的 m3u8 和 ts 文件响应头必须带 Access-Control-Allow-Origin，而且 ts 分片的 CORS 也得配，别漏了

2. 如果你用的是 https 页面，直播流必须也是 https，混合内容浏览器会直接拦截

3. 试试在浏览器直接打开那个 m3u8 地址，看能不能正常播放，能的话说明流本身没问题

4. 可以打开 hls.js 的 debug 模式看看具体卡在哪一步：

const hlsjsPlugin = new DPlayer.HlsJsPlugin({

    enableWorker: true,

    lowLatencyMode: true,

    debug: true  // 加这个看详细日志

});

你先试试改一下 plugin 的写法，应该能解决。

2026-03-12 10:14