html播放器源码，html5版播放器

今天给大家推荐DPlayer，一款超强大的HTML5视频播放器插件，功能丰富。

dplayer 是一款开源高品质H5 视频播放器，拥有9.5K+ 星级评级。作者是1995年出生的大四学生。支持发布弹幕、哔哩哔哩视频、实时视频（HLS M3U8 FLV）格式。

安装

也可以使用$ npm install dplayer –save cdn 进行部署。 dplayer的最新版本是1.26.0。

https://www.bootcdn.cn/dplayer/首先我们来初始化一个最简单的DPlayer

加载播放器文件：

使用模块管理器

从\’dplayer\’ 导入DPlayer const dp=new DPlayer(options);

const dp=new DPlayer({container: document.getElementById(\’dplayer\’), video: { url: \’demo.mp4\’, },}); DPlayer 有一组丰富的参数来自定义播放器实例。

const dp=new DPlayer({container: document.getElementById(\’dplayer\’), autoplay: false, theme: \’#FADFA3\’, Loop: true, lang: \’zh-cn\’, Screenshot: true, hotkey: true, preload: \’auto\’, logo: \’log o .png\’，volume: 0.7，mutex: true，video: { url: \’dplayer.mp4\’，pic: \’dplayer.png\’，thumbnails: \’thumbnails.jpg\’，type: \’auto\’，}，subtitle: { \’dplayer.vtt\’，类型第3336章0 \’webvtt\’, fontSize: \’25px\’, Bottom: \’10%\’, color: \’#b7daff\’, }, danmaku: { id: \’9E2E3368B56CDBB4\’, api: \’https://api.prprpr.me/dplayer/\’, 0 \’代币演示\’,最大： 1000，added: [\’https://api.prprpr.me/dplayer/v3/bilibili help=4157142\’]，user:\’DIYgod\’，bottom:\’15\’，unlimited: true，}，contextmenu: [{text:\’custom1\’，link:\’ 333 59github.com/DIYgod/DPlayer\’, }, { text: \’custom2\’, click: (player)={ console.log(player) }, }, ],highlight: [ { time: 20, text: \’这是第20 秒\’ , } , { time: 120, text: \’这是2 分钟\’, }, ],});

在video.quality 中设置视频链接和不同的清晰度类型，在video.defaultQuality 中设置默认清晰度。

const dp=new DPlayer({container: document.getElementById(\’dplayer\’), video: {quality: [ { name: \’HD\’, url: \’demo.m3u8\’, type: \’hls\’, }, { name: \’标清\’, url: \’演示.mp4\’, type: \’正常\’, }, ], defaultQuality: 0, pic: \’demo.png\’,thumbnails: \’thumbnails.jpg\’, },});HLS 支持

hls.js 必须在DPlayer.min.js 之前加载

const dp=new DPlayer({container: document.getElementById(\’dplayer\’), video: { url: \’demo.m3u8\’, type: \’hls\’, }, pluginOptions: { hls: { //hls 配置}, },});控制台。 log(dp.plugins.hls); //Hls 实例提供广泛的文档支持和示例演示。

请附上您的项目文件和地址

# 文档地址http://dplayer.js.org/zh/# 仓库地址https://github.com/MoePlayer/DPlayer 另外，DPlayer 系列播放器还包括Vue 和React 版本。

Vue-DPlayerhttps://dplayer.netlify.app/React-DPlayerhttps://github.com/MoePlayer/react-dplayer 现在，让我们在这里分享一下。欢迎感兴趣的同学来看看！如果您还知道其他优秀的H5选手，欢迎与我们讨论。