vue中DPlayer视频播放器使用方法

最新推荐文章于 2025-03-21 17:50:30 发布
最新推荐文章于 2025-03-21 17:50:30 发布
阅读量6.4k 收藏
点赞数 1
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xuewengang/article/details/105858483
版权

vue中DPlayer视频播放器使用方法

1通过npm下载

npm install dplayer - s

2在需要使用的组件中导入

 import Dplayer from 'Dplayer'

3页面加载完成后mounted中
在这里插入图片描述

this.data为播放的地址,通过父组件传入
vue直播流播放器DPlayer使用
淘淘小窝
07-22 1482
官网地址:http://dplayer.js.org/zh/guide.html 初始化dplayer yarn add dplayer 新建播放器组件player.vue,导入包并创建播放器 <template> <div> <div id="dplayer" class="video-box"> 视频播放器 </div> </div> </template> <script&.
vue-dplayer 视频播放器实例代码
12-30
官网 vue-dplayer dplayer-doc 示例 如果默认 options 中没有视频链接，之后设置视频链接时，直接通过 this.options.video.url = videoPath 是无效的 需要先获取到播放器的实例 this.$refs.player.dp ，然后通过 switchVideo() 对 url 进行修改 [removed] import dPlayer
VueDPlayer一个基于vue2和DPlayer的视频播放组件
08-09
Vue-DPlayer一个基于vue2和DPlayer的视频播放组件。支持循环播放，自动播放，可选择语言，支持截屏，设置快捷键等。
vue2：使用 vue-dplayer视频播放器
weixin_1095的博客
12-02 1959
在VUE中使用 vue-dplayervue-dplayer是DPlayer的vue版 支持弹幕,字幕,截图等功能。
Vue 3 + TypeScript 实现视频播放与字幕功能：集成西瓜播放器 XGPlayer
最新发布
程序员林北北的博客
03-21 1008
随着视频内容消费的快速增长，特别是在教育、娱乐、新闻等领域，集成一个流畅且功能丰富的视频播放器已成为 Web 应用的必备。大多数现有的视频播放器都能满足基本播放需求，但要实现像字幕切换、播放控制、响应式设计等功能，就需要使用更加专业的播放器。西瓜播放器 XGPlayer 是一款开源且高性能的前端视频播放器，支持 HLS、MP4、FLV 等多种格式，并且提供了丰富的插件支持，能够轻松实现视频播放器的自定义需求。
vue中使用 vue-dplayer视频播放器
Var的博客
12-02 7882
在VUE中使用 vue-dplayer vue-dplayer是DPlayer的vue版 支持弹幕,字幕,截图等功能 1.安装 npm install vue-dplayer -S 2.mian.js里 import VueDPlayer from "vue-dplayer"; import "vue-dplayer/dist/vue-dplayer.css"; Vue.use(VueDPlayer); 3.页面使用 完整代码 <template> <div class="mai
Vue-DPlayer详细使用（包含遇到坑）
一步一个脚印，踏实努力，向着目标前进
09-16 6267
Vue-DPlayer：一个优秀的视频播放器组件Vue-DPlayer是一个易于使用、高性能的基于Vue.js的视频播放器组件。如果你需要在你的Vue.js应用程序中实现视频播放功能，那么Vue-DPlayer就是一个很好的选择。在下面的文章中，我们将从以下四个方面对Vue-DPlayer进行详细的阐述:一、安装Vue-DPlayer并简单使用在安装Vue-DPlayer之前，请确保已经安装了Vue.js。
vue引用DPlayer播放器
唐屁屁
07-28 5441
用过vue-video-player和html5 video；vue-video-player音量进度调节需要写js且使用感很不好；html5 video虽然音量进度跳不用自己写，但是有些电脑用谷歌或者搜狗浏览器没有倍速选项的情况。综上的缺点改用了dplayer播放，目前感觉良好，功能很完善，期望能兼容各个浏览器，后续有任何问题将会留下笔记。...............
vue-dplayer：:video_camera:一个基于DPlayer的Vue 2.x视频播放器组件
02-06
基于Vue 2.x视频播放器组件。 安装 npm install vue-dplayer -S 用法 CDN： ： import VueDPlayer from 'vue-dplayer' import 'vue-dplayer/dist/vue-dplayer.css' export default { components : { 'd-player' ...
vue2.0+vue-dplayer实现hls播放的示例
12-28
之前写了一篇《 vue2.0+vue-video-player实现hls播放》，里边有提到在用vue-video-player之前，我尝试着使用vue-dplayer实现hls播放，但是当时时间紧迫，还没有完成,就换方案了。现在抽时间把它补齐吧。 开始 安装...
vue-dplayer 视频播放器
热门推荐
asing1elife's blog
01-07 1万+
vue-dplayer 是对 dplayer 做的 vue 支持 更多精彩 更多技术博客，请移步 asing1elife’s blog 官网 vue-dplayer dplayer-doc 示例 如果默认 options 中没有视频链接，之后设置视频链接时，直接通过 this.options.video.url = videoPath 是无效的 需要先获取到播放器的实例 this.$...
vue3：Dplayer 使用
weixin_1095的博客
01-13 5014
Dplayer是一款上手简单，功能强大的HTML5视频播放器，我们可以使用它，快速在普通HTML、Vue、React中实现视频播放的功能需求。Dplayer同时也提供了目前各大视频站都在使用的弹幕功能，让我们的视频功能更加丰富有趣。下面小千分享如何使用Dplayer在Vue3中实现视频播放及弹幕功能。
vue中安装和使用Dplayer视频播放器
cai_niao5623的博客
11-15 7958
1、下载 npm下载 npm install dplayer - s npm i hls.js -s yarn下载 yarn add dplayer yarn add hls.js 2、使用 <template> <div class="box"> <el-card> <div id="dplayer" style="height: 400px"></div> ..
vue 视频播放器 Dplayer
qq_51953294的博客
06-09 693
官网地址。
VueDPlayer视频插件的使用
qq_56452988的博客
11-18 894
VueDPlayer 是一个基于 DPlayer 的 Vue 封装组件，DPlayer 是一个 HTML5 视频播放器，支持弹幕、视频倍速播放、视频预加载等功能。VueDPlayer 使用了 DPlayer 的默认样式，你可以在你的项目中覆盖这些样式。通过这些步骤，你可以在 Vue.js 应用程序中方便地使用 VueDPlayer 来播放视频，并根据需要进行配置和自定义。中配置 VueDPlayer 的各种选项，例如视频源、封面图片、弹幕、视频质量等。在你的 Vue 组件中，你可以通过。
使用Dplayer实现Vue3中的视频及弹幕播放
qfxulei的博客
10-21 2776
Dplayer是一款上手简单，功能强大的HTML5视频播放器，我们可以使用它，快速在普通HTML、Vue、React中实现视频播放的功能需求。Dplayer同时也提供了目前各大视频站都在使用的弹幕功能，让我们的视频功能更加丰富有趣。如何使用Dplayer在Vue3中实现视频播放及弹幕功能。 一、安装 使用npm npm i dplayer -S 使用yarn yarn add dplayer 二、在Vue3组件中，准备一个ref容器 <div ref="videoRef" clas...
关于vue-dplayer的弹幕功能使用问题以及解决方案
weixin_63020134的博客
04-22 2346
vue-dplayer的安装在使用vue-dplayer开发视频播放器过程中，关于弹幕功能的问题需要解释一下这是一个非常干净，只有基础播放器功能的代码前端展示效果如下然后我们来看一下 DPlayer api 的接口文档地址所以options的内容被改为结果前端报错：意思是没有options.success这个方法怎么会没有呢，都是按照文档的步骤来的呢输出这两条试试其实看到这我就知道了，如果把官方给的danmaku.id 和 danmaku.api 加上去的话就能拼成一个完整的url。
Vue——播放器DPlayer
qq812457115的博客
06-13 2717
1. 安装依赖 2. 引入依赖 3. 初始化播放器 【options属性】【api事件】 参考文档：http://dplayer.js.org/zh/guide.html#api
vue-dplayer 点击播放器事件
05-28
在模板中，我们在 `vue-dplayer` 元素上添加 `@click` 监听器，当播放器被点击时，会自动调用 `handleClick` 方法进行处理。 当然，你需要在 `options` 对象中设置相应的配置项，以便让播放器正常工作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值