Dplayer实现弹幕功能

使用Dplayer实现弹幕功能(后台是Python)

下载Dplayer插件, blog地址

https://download.csdn.net/download/zsx1314lovezyf/11645186

把插件解压, 放在项目中

导入css和js—这里用的flask(看你用什么语言就用什么语言导入静态资源)

<link rel="stylesheet" href="{{ url_for("static", filename="dplayer/dist/DPlayer.min.css") }}">
<script src="{{ url_for("static", filename="dplayer/plugin/flv.min.js") }}"></script>
<script src="{{ url_for("static", filename="dplayer/plugin/hls.min.js") }}"></script>
<script src="{{ url_for("static", filename="dplayer/dist/DPlayer.min.js") }}"></script>

添加样式

.dplayer-comment-setting-type>label{display: inline;
}

添加播放器

<!-- 播放器 -->
<div id="dplayer" style="height: 500px; width: 774px;"></div>

添加js弹幕

var dp1 = new DPlayer({element: document.getElementById("dplayer1"),video: {url: "播放地址"},danmaku: {id: "电影id",api: "API地址"}})

案列

前端代码

<html>
<head><link rel="stylesheet" href="{{ url_for("static", filename="dplayer/dist/DPlayer.min.css") }}"><script src="{{ url_for("static", filename="dplayer/plugin/flv.min.js") }}"></script><script src="{{ url_for("static", filename="dplayer/plugin/hls.min.js") }}"></script><script src="{{ url_for("static", filename="dplayer/dist/DPlayer.min.js") }}"></script><style>.dplayer-comment-setting-type>label{display: inline;}</style>
</head>
<body>
<!-- 播放器 -->
<div id="dplayer" style="height: 500px; width: 774px;"></div>
<script>// 弹幕jsvar dp1 = new DPlayer({element: document.getElementById("dplayer"),video: {// 视屏地址url: "{{ url_for("static", filename="uploads"+movie.url) }}"},danmaku: {id: "{{ movie.id }}",api: 'https://dplayer.moerats.com/'}})</script></body>
</html>

Dplayer实现弹幕功能相关推荐

dplayer播放器增加记忆 P2P播放自动下一集弹幕功能
搭建过苹果cms的都知道,苹果cms自带的播放器都特别拉跨如:DP ali这些都只要一些基础的功能,但是现在这些功能都都满足不了用户群体,所以今天小编给大家带来一款二改过的播放器新增了记忆播放,P2 ...
JavaScript css3模拟简单的视频弹幕功能
最近相对比较空闲,想写一些东西写着玩.就尝试写了一个demo模拟了最简单的视频弹幕功能~~. 思路: 设置一个<div>和所播放的video的大小一致,把这个div标签蒙在video上面用 ...
因弹幕系统技术升级 B站即日起至6月6日关闭弹幕功能
昨日晚间,B站官方微博发布声明称,因弹幕系统技术升级,从即日起至6月6日网站将暂时关闭弹幕功能. 在日前的第七届网络视听大会上,B站董事长兼CEO陈睿透露,2019年至今,已有2027万人在这家名为哔 ...
html段落自动删除,利用JS代码自动删除稿件的普通弹幕功能
事情的起因是在b站投稿了一个高级弹幕测试的视频(av9940487),但是由于b站的弹幕池机制是新的弹幕顶掉旧的弹幕,所以导致一些人发的高级弹幕很快就被顶掉了. 所以就想着写个脚本来自动删除属性为普通 ...
php怎么实现弹幕,HTML如何利用canvas实现弹幕功能
本篇文章主要介绍HTML如何利用canvas实现弹幕功能,感兴趣的朋友参考下,希望对大家有所帮助. 简介最近在做大作业的时候需要做一个弹幕播放器.借鉴了一下别人的源码自己重新实现了一个,演示如下主 ...
简单实现一个手持弹幕功能+文字抖动特效
简单实现一个手持弹幕功能+文字抖动特效效果展示代码如下小程序内更多配置效果预览总结前段时间抖音上有个抖动弹幕挺火的,于是决定仿写一个,话不多说,先看效果- 效果展示 GIF图看着有点模糊,但 ...
直播电商平台开发，video组件实现视频弹幕功能
直播电商平台开发,video组件实现视频弹幕功能发送弹幕 WXML文件代码如下:  <video class=" ...
html5 canvas实现高并发视频弹幕功能
由于项目需要,分享自己开发的高并发弹幕功能以下为源代码,仅80行而已,可以根据canvas 的宽高自动适配: /*!*@作者: 赵玉*@邮箱: sailiy@126.com*@公司: 彩虹世纪文化传 ...
flutter 弹幕插件_Flutter 实现虎牙/斗鱼弹幕功能
用Flutter实现弹幕功能,轻松实现虎牙.斗鱼的弹幕效果. 先来一张效果图: 实现原理弹幕的实现原理非常简单,即将一条弹幕从左侧平移到右侧,当然我们要计算弹幕垂直方向上的偏移,不然所有的弹幕都会在 ...

Dplayer实现弹幕功能

使用Dplayer实现弹幕功能(后台是Python)

案列

Dplayer实现弹幕功能相关推荐

最新文章

热门文章