说明:此整合只适合播放m3u8资源的视频



下载dplayer播放器

官方Github地址 https://github.com/MoePlayer/DPlayer

解压得到只需要demo文件夹的内容

到此,已经得到主文件了,但还差一个JS和CSS文件

下载官方的CSS和JS

https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css

https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js

https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js    <因为要支持m3u8的hls模式,需要用到>

把这两个文件下载保存到demo文件夹下面。

至此播放器代码全部下载完成


把demo文件夹名改成dplayer

上传到Public/player目录下


在feifeicms后台建立播放器源

如dplayer

在Public/player目录下新建一个dplayer.js文件

代码如下:

document.write('<iframe width="100%" height="100%" src="/Public/player/dplayer.html" frameborder=0 border=0 marginwidth=0 marginheight=0 scrolling=no></iframe>');

这个/Public/player/dplayer.html  可以是任何文件名


dplayer.html代码如下:

<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
<meta name="referrer" content="no-referrer">
<title>mp4</title>
<link rel="stylesheet" href="dplayer/DPlayer.min.css"/>
</head>
<body>
<div id="video" style="width:100%;height:100%"></div>
<script src="dplayer/hls.min.js"></script>
<script src="dplayer/DPlayer.min.js"></script>
<script>
var playurlinfo=window.parent.frames.cms_player.url;
new DPlayer({
container: document.getElementById('video'),
autoplay: true,
screenshot: true,
mutex: false,
loop: true,
preload: 'auto',
logo: 'dplayer/logo.png',
video: {
url: ''+playurlinfo+'',
type: 'hls',
},
});
</script>
</body>
</html>

如此播放器就完成了。