dplayer使用记录与bug解决

vocal
1,369 阅读3分钟

dplayer

优点：

  1. 配置简单：DPlayer 提供了一个简单的 API 接口来初始化播放器，只需要简单的几行代码就可以嵌入到网页中。
  2. 弹幕功能：对于喜欢观看带有评论的视频用户来说，弹幕是一个很受欢迎的功能。DPlayer 支持实时显示用户发送的弹幕。
  3. API 丰富：DPlayer 提供了许多方法来控制播放器，比如 .play(), .pause(), .volume(0.5) 等等，这些都是通过实例对象进行调用。
  4. 提供直播功能：DPlayer 支持直播流，这意味着你可以使用 RTMP、HLS 等协议来播放直播视频。你需要设置正确的 video 配置项来指向直播流的 URL。
  5. 支持多种 MSE：MSE 指的是 Media Source Extensions，这是一种允许浏览器在视频播放过程中动态地向媒体源添加数据的技术。DPlayer 支持多种格式，包括但不限于 MP4、WebM 和 HLS（HTTP Live Streaming），这使得它可以处理不同的视频编码格式和流媒体协议。

缺陷

  1. dplayer的文档并不非常易懂，有些地方是一笔带过的，而搜索引擎上的可用文章也不多，如果对自己能力有信心，可以去官方仓库 github.com/DIYgod/DPla… ；不过仓库关闭了 issue，多半只能阅读源码自己解决问题
  2. 有些问题console里并没有提示

Debug 解决方案

以下均使用的vue开发，视频源为阿里云vod

HLS导入问题，无法使用HLS

image.png

目前包括网上，在基于vue的开发中，HLS的导入方式均为

import Hls from 'hls.js'
import DPlayer from 'dplayer'

但本人这里出现问题

image.png

有时还会提示 ERR: find by Hls

所以可能是导入有问题, 从而导致dplayer找不到hls

然后本人改用在index.html中，

<script src="https://cdn.bootcdn.net/ajax/libs/hls.js/1.5.15/hls.js"></script>

确实成功解决了问题，但这毕竟是传统的解决方法，不犹豫，最后我将导入代码改为

import Hls from 'hls.js'
window.Hls = Hls
import DPlayer from 'dplayer'

从而显式将Hls挂载在window.Hls中

image.png

HLS在dplayer下的配置问题

在官网的配置中，是这样的

image.png

第一种由于提示过少，就不要用了；

讨论下第二种, 本质上第二种方式是自定义格式，我们通过在type处自定义，然后在customType中自定义处理方式，（但我这里失败了，出现了和上面一样的问题，不知道为什么)

第二种方式下，type不可为'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal'；这些是dplayer自己用的

第三种方式 实际上我们不必使用自定义格式，只需要在type处指定为hls，dplayer就会自动去使用hls.js，同理，使用dash，就自动去使用dash.js 例子

playInfoList.forEach(item => {
  qualityList.push({
    name: item.definition,
    url: item.playURL,
    type: item.format === 'm3u8' ? 'hls' : 'mp4'
  });
});

this.qualityList = qualityList;

this.dplayer = new DPlayer({
  container: this.$refs.dplayer,
  video: {
    quality: this.qualityList,
    defaultQuality: 0,
    pic: this.videoDetail.videoImgUrl,
  },
  danmaku: {
    id: this.videoId,
    api: getDanmuUrl(),
    user: 'dplayer', //弹幕作者
    bottom: '15%',
    unlimited: true,
  }
});

当type === hls时，dplayer会自己用window.Hls来处理，并不需要多余的配置

弹幕无法正确加载问题

弹幕加载格式 image.png offset(s)，位置(顶部弹幕，底部弹幕，滚动弹幕), 颜色， 发弹幕人，弹幕内容

在本人这里出现了弹幕无法正确加载的问题, 所有的弹幕都被渲染到了左上角

ac0649330a7b68858c951d01a6b951a5.png

表现为，有弹幕数量，弹幕在视频中也有位置，也有html但是没有动画，而这些style本身就是css属性

image.png

去阅读源码也没找到解决方案，然后考虑了个方法，自己使用js去捕捉html，从而创建平移，出现与消失的动画。

但在实施前，本人考虑可能也与dplayer的版本有关，如果这种bug从以前就有，这个播放器也不会这么出名；故本人回退了版本，使用了下载量更大的v1.26.0

image.png

结果bug就解决了。可能是新版的bug

image.png image.png

成功看到滚动弹幕与顶部弹幕

avatar
文章
阅读
粉丝