DPlayer 播放rmtp/m3u8/flv视频
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>为什么播放器不能在手机上自动播放？
大多数移动端浏览器禁止了视频自动播放。
