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属性】

属性名类型备注
containerElement播放器容器,默认值document.querySelector(‘.dplayer’)
videoObject视频信息
video.urlString视频链接
video.picString视频封面
video.thumbnailsString视频缩略图,可以使用 DPlayer-thumbnails生成
video.typeString可选值: ‘auto’, ‘hls’, ‘flv’, ‘dash’, ‘webtorrent’, ‘normal’ 或其他自定义类型, 见#MSE 支持
video.customTypeObject自定义类型, 见#MSE 支持
contextmenuArray自定义右键菜单
contextmenu.textString菜单名
contextmenu.linkString跳转地址
contextmenu.clickFunction点击事件function(player){}

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

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值