uniapp使用Dplayer.js实现视频播放

1.通过npm方式安装

npm install dplayer --save

2.或者使用Yarn方式

yarn add dplayer

3.简单创建一个播放器

<div id="dplayer"></div>

4.页面引用

import DPlayer from 'dplayer';

5.使用

const dp = new DPlayer({container: document.getElementById('dplayer'),video: {url: '视频地址',},
});

简单的一个视频播放器就完成了。。

更多使用方法，详见Dplayer官网：https://dplayer.diygod.dev/zh/guide.html#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B

uniapp使用Dplayer.js实现视频播放相关推荐

基于uni-app开发的一款视频播放器插件
yy-video-player 基于uni-app开发的一款视频播放器插件,开箱即用,具有视频下载,页面返回,弹幕,进度条等功能. 插件地址:https://ext.dcloud.net.cn/plu ...
springboot + vue3实现视频播放Demo（video.js Vue3-video-play视频播放器）
文章目录学习链接前言 ffmpeg 安装ffmpeg 配置环境变量分割视频文件后台配置 WebConfig 前端代码 video.js示例安装依赖视频播放组件效果 Vue3-video- ...
使用html+js实现视频播放器
使用html+js实现视频播放器新手第一次发CSDN,请多关照今天我来整理一下视频播放器,主要是javaScript部分. 首先是html部分(我这里只贴出关键部分,其他修饰网页的部分在末尾完整实 ...
uniapp + renderjs + heatmap.js 实现热力图
uniapp + renderjs + heatmap.js 实现热力图 app项目中需要热力图展示,第一次用uniapp的renderjs操作dom,遇到了一些坑,包括引入组件,请求传参啥的项目安 ...
在vue项目中使用video.js实现视频播放和视频进度条打点
一.用video.js实现视频播放 1.安装video.js插件 // 安装video.js插件 npm install video.js -S // 如果需要播放rtmp直播流,需安装一下插件 np ...
uniapp项目引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频文件，文末有项目代码可供下载
1.下载依赖 npm i dplayer -S npm i hls.js -S 2.vue页面 <template><view class="content"&g ...
dplayer js控制自动全屏_vue 中使用video.js 实现m3u8视频播放格式
官方文档:https://docs.videojs.com/tutorial-vue.html H5 的 video 标签不支持m3u8视频播放,所以借助于 video.js 1.video 定义与用 ...
Dplayer Blob对视频播放地址加密
DPlayer 播放 blob 加密视频普通Mp4格式的视频 Java后台将视频以文件流的形式传给前端前端使用JavaScript将视频文件接收并转为Blob对象使用Dplayer播放器将Bl ...
dplayer js控制自动全屏_vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】...
最近公司的产品上线,一些高级功能在基础版本中不对用户开发,通过视频的形式展示. 产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件,通过 demo案例很快实现了视频 ...

uniapp使用Dplayer.js实现视频播放

uniapp使用Dplayer.js实现视频播放相关推荐

最新文章

热门文章