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.js # javascript # 前端
Logo
Vue

前往低代码交流专区

更多推荐

cover

Mac 使用vscode 创建vue项目后修改文件提示：权限不足，以超级用户身份重试

avatar Vue
cover

基于nodejs+vue云计算的城乡医疗卫生服务系统[程序+论文+开题]-计算机毕业设计

avatar Vue
cover

ElasticSearch迁移至openGauss

avatar Vue