DPlayer播放器

前言
今天花了点时间看了一下DPlayer播放器，DPlayer播放器支持弹幕，音量调节，后期的弹幕设置以及放大缩小屏幕等操作，好的一点是比上次那个flv的demo好一点，总感觉用DPlayer播放器和flvdemo的播放器时间误差减小了点，进入正题。

效果预览

推流使用OBS直播平台，浏览器使用Chrome

源码呈上

附上代码地址：https://github.com/lym-github01/DPlayer

有更好的提议或者疑问，欢迎在issue提，我会第一时间回复！

核心代码

– HTML代码 –

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>DPlayer Demo</title><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css"><link rel="stylesheet" href="demo.css"><script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script><script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script><script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pearplayer"></script><script src="DPlayer.js"></script>
</head>
<body class="markdown-body">
<h2>在 dialog 中承载视频</h2>
<h3 id="dplayer-dialog" class="show-dialog">Show Dialog</h3>
<div id="float-dplayer" class="float-dplayer"><div id="dplayer-container" class="dplayer-container"></div><h3 id="close-dialog" class="close-dialog">X</h3>
</div>
<h2 id="quick-start">Quick Start</h2>
<div class="example" style="width: 100%"><div class="bofang" id="dplayer1"></div><div class="bofang" id="dplayer2"></div><div class="bofang" id="dplayer3"></div><div class="bofang" id="dplayer4"></div><div class="bofang" id="dplayer5"></div><div class="bofang" id="dplayer6"></div><div class="bofang" id="dplayer7"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/stats.js"></script>
<script src="demo.js"></script>
</body>
</html>

– JS代码 –

function initPlayers(num) {window.dp1 = new DPlayer({container: document.getElementById('dplayer' + num),preload: 'none',autoplay: true,//自动播放hotkey: true,//热键screenshot: true,//开启截图功能live:true,//直播形式// screenshot: true,//后期配给视频的字幕显示mutex:false,//播放地址video: {url:"http://192.168.0.200:81/live?port=1935&app=hls&stream=mystream",//视频地址type:"flv",//视频类型pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',//首先显示背景图thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg',//缩略图},//后期给视频配的字幕数据subtitle: {url: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.vtt',},//弹幕danmaku: {id: '9E2E3368B56CDBB4',api: 'https://api.prprpr.me/dplayer/',addition: ['https://s-sh-17-dplayercdn.oss.dogecdn.com/1678963.json'],},});
}
var data = document.getElementsByClassName('bofang').length;
for (var i = 1; i <= data; i++) {initPlayers(i);
}

步骤

1，配置好OBS直播平台

如有不会的，可以看我之前的博客：链接附上————

2，运行代码实现效果踩坑

（1）在cnpm i时报node-sass@5.0.0错误

首先把代码拉到本地后，cnpm i的时候会出现node-sass@5.0.0问题，这个问题我已经改好了，如果各位在cnpm i 或者 npm run dev 的时候出现，可能是node与node-sass不适配，给大家放一张适配图，可以按照上面更改node版本或者node-sass版本

修改node-sass最简单的方法，直接找到package.json文件，找到node-sass直接修改后面的版本号即可

（2）在npm run dev 运行时报node与npm不适配

如果是node与npm版本不适配的情况，给大家一个noed官方链接，里面有node与适配的npm版本对照表
链接呈上：https://nodejs.org/zh-cn/download/releases/

3，展示数量

经过测试，浏览器还是只能允许最多6个视频，超过就进入等待状态，显示不了画面，也有可能就像github的issues里有人说的“和http1.1，浏览器限制了”有关系吧。

目前问题我就发现了这几条，如果还有更好的提议或者疑问的，欢迎在下方留言，我会第一时间参与讨论。

DPlayer播放器相关推荐

DPlayer播放器本地化P2P解析加速版源码
介绍: dplayer播放器本地化P2P加速版源码,提升P2P加速.共享.记忆播放.拖动快进等功能完整优化版 DPlayer适用于于各种CMS,这个快绝版了,有能力自己修改吧. PC端自动P2P加速, ...
使用腾讯云轻量应用服务器搭建dplayer播放器弹幕服务器
说明 Dplayer播放器就不过多介绍了,不知道的可以查看官方项目地址:点击查看,算是目前国内比较火的视频播放器,貌似很多人喜欢用弹幕功能,而官方提供的弹幕api已经挂了,所以我们想使用的话,要么使用 ...
苹果cms8整合dplayer播放器
一.准备工作已上传CMS8网站模板到空间并能正常打开网站页面二.整合dplayer播放器 1.新建txt文档,将以下代码复制到txt文档中,并将txt文档命名为dplayer.php <ht ...
Dplayer播放器插件整合前置广告、暂停广告3.0版本
介绍 1.整合的苹果cmsV10程序,其他程序无效 2.使用的Dplayer播放器,广告设置效果仅支持PC端 3.安卓手机支持显示前置广告,不支持显示暂停广告 4.苹果手机自测,不保证手机端支持前置和 ...
苹果cms整合dplayer播放器增加记忆+P2P播放+自动下一集
声明:除特殊声明外本站文档均由作者原创,转载请注明出处,原文地址:苹果cms整合dplayer播放器增加记忆+P2P播放+自动下一集今天给大家分享下给dplayer播放器增加记忆+P2P播放+自动下 ...
Bootstrap实战---Dplayer播放器(影片)
Dplayer播放器简单用法可参考 https://www.cnblogs.com/bamboopanders/p/13431476.html <div id="player1&quo ...
dplayer播放器增加记忆 P2P播放自动下一集弹幕功能
搭建过苹果cms的都知道,苹果cms自带的播放器都特别拉跨如:DP ali这些都只要一些基础的功能,但是现在这些功能都都满足不了用户群体,所以今天小编给大家带来一款二改过的播放器新增了记忆播放,P2 ...
Bootstrap实战---Dplayer播放器(图片)
Bootstrap实战-Dplayer播放器(图片) 本章介绍如何利用Dplayer播放器来构建视频播放网页. <!DOCTYPE html> <html> <head& ...
苹果cmsv10 dplayer播放器优化
播放器功能: 支持格式:m3u8.mp4 播放记忆 P2P加速(去除在视频中P2P信息) 自动播放下一集(仅电脑端) 去掉弹幕(需要的自行去掉注释) 手机增加引导点击播放图片使用方法: 将文件上传到 ...

DPlayer播放器

DPlayer播放器

DPlayer播放器相关推荐

最新文章

热门文章