Vue——播放器DPlayer

1. 安装依赖

cnpm i -S dplayer
或
yarn add dplayer

2. 引入依赖

import DPlayer from "dplayer";

3. 初始化播放器

//播放器容器
<template><div><div id="dplayer"></div></div>
</template>
//初始化
let options = {container: document.getElementById("dplayer"),video: {url: "http://47.105.206.28/videos/wangkun.mp4"},
}
new DPlayer(options);

【options属性】

属性名	类型	备注
container	Element	播放器容器，默认值document.querySelector(‘.dplayer’)
video	Object	视频信息
video.url	String	视频链接
video.pic	String	视频封面
video.thumbnails	String	视频缩略图，可以使用 DPlayer-thumbnails生成
video.type	String	可选值: ‘auto’, ‘hls’, ‘flv’, ‘dash’, ‘webtorrent’, ‘normal’ 或其他自定义类型, 见#MSE 支持
video.customType	Object	自定义类型, 见#MSE 支持
contextmenu	Array	自定义右键菜单
contextmenu.text	String	菜单名
contextmenu.link	String	跳转地址
contextmenu.click	Function	点击事件function(player){}

【api事件】
参考文档：http://dplayer.js.org/zh/guide.html#api

Vue——播放器DPlayer相关推荐

vue直播流播放器DPlayer使用
官网地址:http://dplayer.js.org/zh/guide.html 初始化dplayer yarn add dplayer 新建播放器组件player.vue,导入包并创建播放器 < ...
vue 播放器视频插件之 vue-video-player 铺满全屏自动播放
1.安装video.js npm install video.js 2.在main.js中引入 import Video from 'video.js' import 'video.js/dist/v ...
One_DPLayer -一款简单好用的在线播放器[DPLayer]
DPLayer - 很好用的一款播放器,很多中小企业都有用过「学习强国」也使用过. 另外一款西瓜
播放器 dplayer.js.org
安装使用npm: npm install dplayer --save 使用纱线: yarn add dplayer #快速开始首先,让我们初始化一个最简单的DPlayer 加载DPlayer文件 ...
前端互动视频 vue 播放器
前端互动视频 vue制作最近鼓捣了一下互动视频,记录一下前端的做法和思路难点:1.播放器 2 数据结构 1.首先说下播放器,做互动视频,最主要的是遮罩,遮罩不仅能覆盖原视频,而且上面可以显示能实际 ...
php苹果系统播放flv视频播放器,【分享】【优化】苹果CMSV10播放器dplayer
[PHP] 纯文本查看复制代码 dplayer增加记忆+P2P播放 body,html{width:100%;height:100%;background:#000;padding:0;margin ...
Vue实现仿音乐播放器项目总述以及阶段目录
Github地址 https://github.com/badaoliumang/vuemusicplayer Vue实现仿音乐播放器各阶段代码 https://download.csdn.net/d ...
Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
前言前面在首页已经完成今日推荐以及访问百度API获取数据,现在继续来完善home主页. 效果新歌速递 swiper实现轮播图实现实现新歌速递在components下新建新歌速递组件News_ ...
Vue实现仿音乐播放器3-将项目托管到git以及github
Github新建项目 1.登录github,点击右上角新建仓库 2.输入仓库名以及描述等,点击Create resposity 3.新建仓库完成后,右边有个clone or download,复制SS ...

Vue——播放器DPlayer

Vue——播放器DPlayer相关推荐

最新文章

热门文章