Dplayer绑定事件说明

最新推荐文章于 2025-02-12 16:41:06 发布
最新推荐文章于 2025-02-12 16:41:06 发布
阅读量1.8k 收藏
点赞数
分类专栏： js Dplayer 文章标签： 音视频 Dplayer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012995995/article/details/129840721
版权
本文详细介绍了Dplayer中与视频播放相关的事件，包括abort、canplay、canplaythrough等，覆盖了视频加载、播放、暂停、进度、音量等关键交互阶段。这些事件可以帮助开发者实现更丰富的视频播放体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • abort 视频终止加载
  • canplay 提示该视频已准备好开始播放
  • canplaythrough 提示视频能够不停顿地一直播放：
  • durationchange 视频的时长已改变
  • emptied 重置为初始状态下触发
  • ended 视频播放结束后触发
  • error 获得视频的错误状态：
  • loadeddata 视频加载完后才出现
  • loadedmetadata 提示音频的元数据已加载：
  • loadstart 提示视频已开始加载：
  • mozaudioavailable 当音频数据缓存并交给音频层处理时
  • pause 事件在音频/视频(audio/video)暂停时触发。
  • play 事件在音频/视频(audio/video)开始播放时触发。
  • playing 事件在音频/视频(audio/video)因缓冲而暂停或停止后已就绪时触发。
  • progress 浏览器正在下载指定的音频/视频时，会发生 progress 事件
  • ratechange 事件在音频/视频(audio/video)播放速度发生改变时触发(如用户切换到慢速或快速播放模式)。
    该事件通过音频/视频(audio/video)的playbackRate属性调用，用于设置或返回音频/视频(audio/video)的播放速度。
  • seeked 事件在用户已移动/跳跃到音频/视频（audio/video）中的新位置时触发。
  • seeking 事件在用户开始移动/跳跃到新的音频/视频（audio/video）播放位置时触发。
    **提示：**seeking 事件的相反事件为
最低0.47元/天 解锁文章
前端依赖库--DPlayer自定义控制栏、事件
qq985169322的博客
11-03 5226
有此需求能换就换吧，实在像我一样不能换的，那就一起改改源码吧。 一、自定义控制栏，步骤如下（以增加一个倍速按钮为例子） 1.修改ui模板： <!-- 文件：player.art --> <!-- 右侧按钮容器 --> <div class="dplayer-icons dplayer-icons-right"> <!-- 新增一个按钮 --> <div class="dplayer-speed">
dplayer js控制 自动全屏_DPlayer简单用法
weixin_42496225的博客
12-23 4615
DPlayer是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku，实时视频(HTTP Live Streaming，M3U8格式)以及 FLV 格式。用法HTML选项var dp = new DPlayer({element: document.getElementById('player1'), // 可选，pl...
DPlayer视频播放
04-26
DPlayer 的 视频播放、监听开始、结束、暂停、播放时间、切换视频，注意：弹幕功能此资源没做...
前端：vue2 Dplayer 视频播放器使用方法,弹幕显示弹幕添加追加
qq_27228105的博客
02-12 966
onSyncTime="onSyncTime" // emit事件：当前视频的进度，返回当前进度和总进度。@onPlayRecord="onPlayRecord" // emit事件：后退和更新时间走进度记录方法。curentId,// 替换，一个唯一id，根据你项目的需求。playurl,//替换， 视频路径，根据你项目需求，setTime // 上次的观看时间，没有可不添加。author: userId,// 替换，用户 根据你项目的需求。id: id,// 替换，一个唯一id，根据你项目的需求。
DPlayer - 免费开源、轻量简洁的 HTML5 视频播放器，支持弹幕播放、清晰度切换、倍速播放
那些免费的砖
06-07 6613
最近我在使用的一款简单容易集成的 web 视频播放组件，支持播放 B站弹幕。
推荐开源神器：DPlayer - 轻量级HTML5视频播放器
gitblog_00068的博客
03-19 3449
推荐开源神器：DPlayer - 轻量级HTML5视频播放器 项目地址:https://gitcode.com/gh_mirrors/dp/DPlayer 是一个由DIYgod开发的轻量级、美观且功能丰富的HTML5视频播放器。它提供了许多现代化的特性，使得在网页上实现专业级的视频播放体验变得更加简单。 项目简介 DPlayer的设计理念是“简洁而强大”，它的目标是让每一个开发者都能轻松地在自己的...
【源码-弹幕服务-Dplayer】Danmaku PHP API - 一个功能丰富的Dplayer.JS配套的可扩展视频站弹幕API服务器
qq_30836733的博客
07-06 2770
这是一个PHP弹幕API，可以在服务器端部署伪静态以运行。支持本地数据库保存弹幕和解析Bilibili的弹幕。也支持自行扩展。本代码的作者为笔者本人。
dplayer插件添加loading动画
03-19
// 绑定事件监听器 dp.on('waiting', () => { spinnerDiv.style.display = 'block'; // 开始缓冲时显示加载动画 }); dp.on('playing', () => { spinnerDiv.style.display = 'none'; // 缓冲完成时隐藏加载...
<html><head> <title>Dplayer记忆播放功能</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=11"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css"> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery.min.js/jquery.min.js"></script> <style type="text/css">html,body{height:100%;margin:0;padding:0;overflow:hidden;text-align:center;background:#181818}#player{height:100%;z-index: 9999999999;}.dplayer-logo{max-width: 150px;right: 2px;top: 2px;}@media (max-width: 768px){.dplayer-logo{max-width: 120px;right: 2px;top: 2px;}} .tbox{display: block;padding: 10px;height:50%;overflow: auto;} .tbox p{font-family: 'Microsoft YaHei', '微软雅黑', 'Arial', sans-serif;color:#FFF;font-size:14px;padding: 0 5px 15px 5px;text-align:left} </style> </head> <body> <div id="player"></div> <script type="text/javascript"> //视频URL var vid = "<?PHP echo $_GET['url'];?>"; var dp = new DPlayer({ container: document.getElementById('player'), autoplay: true,//自动播放 live: false,//直播模式 loop: false,//循环播放 screenshot: true,//开启截图 theme: '#FF9900',//主题配色 preload: 'auto',//视频预加载 hotkey: true,//热键控制 airplay: false,//在 Safari 中开启 AirPlay volume: 0.7,//默认音量 logo: 'js/logo.png',//logo图片 lang: 'zh-cn',//语言 mutex: true,//播放器互斥 video: { url: vid,//视频地址 //type: 'auto',//视频类型 pic: 'js/video.jpg',//视频封面 thumbnails: '',//缩列图 }, }); </script></body></html> 给这段代码添加一个画中画按钮
最新发布
03-25
DPlayer允许通过配置controls添加自定义按钮，需要写一个按钮的HTML元素，并绑定点击事件。点击时触发video元素的requestPictureInPicture方法。同时，要处理退出画中画的事件，可能需要监听leavepictureinpicture...
vue播放视频之vue-video-player插件详解
wang_1220的博客
09-09 5748
github项目地址：https://github.com/surmon-china/vue-video-player CSDN文件资源下载： 目录前言video.js是什么？快速引入1.安装2.在main.js入口文件中引入3.使用难点进阶1.回调函数2.CSS样式总结 前言 最近在给某一线城市的某个区的政府部门做一个项目，刚好上半年遇到疫情缘故，所以都提倡在线教育，线上指导等等，所以我这个项目也新增了一个线上视频播放某某领导的疫情指导及疫情防护措施部署。 在网上调研了不少vue视频播放的插件，比如：
DPlayer一个HTML5弹幕视频播放器
08-07
一个可爱的HTML5弹幕视频播放器
dplayer播放器.rar
06-21
网页m3u8格式在线解析播放，苹果CMS影视站点dplayer播放器，不会使用的可以在压缩包查看使用说明。
dplayer.zip
08-30
dplayer跟自己的电影网站插上自己的弹幕功能, 需要的可以下载, 详细介绍也写成博客
Dplayer(非常经典的Mp3播放器,含源码)
02-23
Delphi 4.0/5.0编译只有40多K,Delphi 6.0编译只有51K.非常不错,强烈推荐.
DPlayer, 哇这么可爱的HTML5 danmaku视频播放器.zip
10-10
DPlayer, 哇这么可爱的HTML5 danmaku视频播放器 DPlayer
开源H5播放器
01-05
完美修改的手机端H5播放器，支持全屏，支持MP4 flv m3u8等主流格式
H5移动端页面使用DPlayer视频播放器
热门推荐
山有木兮木有枝 心悦君兮君不知
04-20 1万+
H5播放视频，自定义播放器样式，自定义播放按钮。
Dplayer播放器
malanjun11的博客
10-30 2339
安装 npm install vue-dplayer -S <!--组件调用示例--> <template> <div> <d-player :options="options" @play="play" ref="player"> </d-player> </div> </template> <script> import VueDPlayer from "vue-dplayer"; im
【Dplayer视频播放器】一款好用的视频播放器
bfsz的博客
12-16 4844
使用 安装 npm install dplayer --save 使用 <div class="card"> <div id="dplayer"></div> </div> </body> <script src="/dplayer/dist/DPlayer.min.js"></script> <script> const dp = new DPlayer({ conta
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值