MSE 支持

HLS

需要在 DPlayer.min.js 前面加载 hls.js (opens new window)。

Load demo

<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 实例

// 另一种方式，使用 customType
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.m3u8',
        type: 'customHls',
        customType: {
            customHls: function (video, player) {
                const hls = new Hls();
                hls.loadSource(video.src);
                hls.attachMedia(video);
            },
        },
    },
});

MPEG DASH

需要在 DPlayer.min.js 前面加载 dash.js (opens new window)。

<div id="dplayer"></div>
<script src="dash.min.js"></script>
<script src="DPlayer.min.js"></script>

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.mpd',
        type: 'dash',
    },
    pluginOptions: {
        dash: {
            // dash config
        },
    },
});
console.log(dp.plugins.dash); // Dash 实例

// 另一种方式，使用 customType
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.mpd',
        type: 'customDash',
        customType: {
            customDash: function (video, player) {
                dashjs.MediaPlayer().create().initialize(video, video.src, false);
            },
        },
    },
});

MPEG DASH (Shaka)

需要在 DPlayer.min.js 前面加载 shaka-player.compiled.js (opens new window)。

<div id="dplayer"></div>
<script src="shaka-player.compiled.js"></script>
<script src="DPlayer.min.js"></script>

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    screenshot: true,
    video: {
        url: 'demo.mpd',
        type: 'shakaDash',
        customType: {
            shakaDash: function (video, player) {
                var src = video.src;
                var playerShaka = new shaka.Player(video); // 将会修改 video.src
                playerShaka.load(src);
            },
        },
    },
});

FLV

需要在 DPlayer.min.js 前面加载 flv.js (opens new window)。

Load demo

<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 实例

// 另一种方式，使用 customType
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.flv',
        type: 'customFlv',
        customType: {
            customFlv: function (video, player) {
                const flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    url: video.src,
                });
                flvPlayer.attachMediaElement(video);
                flvPlayer.load();
            },
        },
    },
});

WebTorrent

需要在 DPlayer.min.js 前面加载 webtorrent (opens new window)。

Load demo

<div id="dplayer"></div>
<script src="webtorrent.min.js"></script>
<script src="DPlayer.min.js"></script>

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'magnet:demo',
        type: 'webtorrent',
    },
    pluginOptions: {
        webtorrent: {
            // webtorrent config
        },
    },
});
console.log(dp.plugins.webtorrent); // WebTorrent 实例

// 另一种方式，使用 customType
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'magnet:demo',
        type: 'customWebTorrent',
        customType: {
            customWebTorrent: function (video, player) {
                player.container.classList.add('dplayer-loading');
                const client = new WebTorrent();
                const torrentId = video.src;
                client.add(torrentId, (torrent) => {
                    const file = torrent.files.find((file) => file.name.endsWith('.mp4'));
                    file.renderTo(
                        video,
                        {
                            autoplay: player.options.autoplay,
                        },
                        () => {
                            player.container.classList.remove('dplayer-loading');
                        }
                    );
                });
            },
        },
    },
});

配合其他 MSE 库使用

DPlayer 可以通过 customType 参数与任何 MSE 库一起使用，例如支持P2P插件：

<div id="dplayer"></div>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="DPlayer.min.js"></script>

var type = 'normal';
if(Hls.isSupported() && Hls.WEBRTC_SUPPORT) {
    type = 'customHls';
}
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    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);
            }
        }
    },
});

直播

你可以把 DPlayer 用在直播当中，但如果你想要直播弹幕，你需要自己准备一个 WebSocket 后端。

Load demo

初始化播放器:

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    live: true,
    danmaku: true,
    apiBackend: {
        read: function (endpoint, callback) {
            console.log('Pretend to connect WebSocket');
            callback();
        },
        send: function (endpoint, danmakuData, callback) {
            console.log('Pretend to send danmaku via WebSocket', danmakuData);
            callback();
        },
    },
    video: {
        url: 'demo.m3u8',
        type: 'hls',
    },
});

通过 WebSocket 获取到弹幕之后，通过 dp.danmaku.draw 绘制弹幕:

const danmaku = {
    text: 'Get a danmaku via WebSocket',
    color: '#fff',
    type: 'right',
};
dp.danmaku.draw(danmaku);

常见问题

为什么播放器不能全屏？

如果播放器被包含在 iframe 里，尝试在 iframe 上添加 allowfullscreen 属性。

为了完善的浏览器兼容性，它应该是这样：

<iframe src="example.com" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>

为什么播放器不能在手机上自动播放？

大多数移动端浏览器禁止了视频自动播放。

Tags：video autoplay