[JavaScript知识库] Vue——播放器DPlayer

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue——播放器DPlayer -> 正文阅读

[JavaScript知识库]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){}