DPlayer播放器

最新推荐文章于 2024-06-07 10:16:52 发布

lrf01

最新推荐文章于 2024-06-07 10:16:52 发布

阅读量2.7w

点赞数 1

分类专栏： DPlayer播放器文章标签： npm nodejs

本文链接：https://blog.csdn.net/m0_50013804/article/details/111684577

版权

DPlayer播放器专栏收录该内容

1 篇文章 1 订阅

订阅专栏

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，浏览器限制了”有关系吧。

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

lrf01

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
DPlayer播放器

DPlayer播放器前言DPlayer播放器支持弹幕，音量调节，后期的弹幕设置以及放大缩小屏幕等操作，好的一点是比上次那个flv的demo好一点，进入正题。效果预览推流使用OBS直播平台，浏览器使用Chrome源码呈上附上代码地址：https://github.com/lym-github01/DPlayer有更好的提议或者疑问，欢迎在issue提，我会第一时间回复！1，配置好OBS直播平台如有不会的，可以看我之前的博客：链接附上————2，运行代码实现效果踩坑（1）在cnpm i
复制链接

扫一扫

专栏目录