今天給大家推薦一個超強(qiáng)大的html5含彈幕視頻播放器插件DPlayer。
dplayer 一款開源的高質(zhì)量H5視頻播放器，Star高達(dá)9.5K+。作者是一名大四95后小鮮肉。支持發(fā)布彈幕、Bilibili視頻及實時視頻(HLS M3U8 FLV)等格式。
安裝
$ npm install dplayer --save
也可以使用cdn引入，dplayer目前最新版本1.26.0
https://www.bootcdn.cn/dplayer/
我們先嘗試初始化一個最簡單的 DPlayer
加載播放器文件：
使用模塊管理器
import DPlayer from 'dplayer';
const dp = new DPlayer(options);
使用js初始化
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'demo.mp4',
},
});
DPlayer 有豐富的參數(shù)可以自定義你的播放器實例，詳細(xì)配置如下：
const dp = new DPlayer({
container: document.getElementById('dplayer'),
autoplay: false,
theme: '#FADFA3',
loop: true,
lang: 'zh-cn',
screenshot: true,
hotkey: true,
preload: 'auto',
logo: 'logo.png',
volume: 0.7,
mutex: true,
video: {
url: 'dplayer.mp4',
pic: 'dplayer.png',
thumbnails: 'thumbnails.jpg',
type: 'auto',
},
subtitle: {
url: 'dplayer.vtt',
type: 'webvtt',
fontSize: '25px',
bottom: '10%',
color: '#b7daff',
},
danmaku: {
id: '9E2E3368B56CDBB4',
api: 'https://api.prprpr.me/dplayer/',
token: 'tokendemo',
maximum: 1000,
addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
user: 'DIYgod',
bottom: '15%',
unlimited: true,
},
contextmenu: [
{
text: 'custom1',
link: 'https://github.com/DIYgod/DPlayer',
},
{
text: 'custom2',
click: (player) => {
console.log(player);
},
},
],
highlight: [
{
time: 20,
text: '這是第 20 秒',
},
{
time: 120,
text: '這是 2 分鐘',
},
],
});
清晰度切換
在 video.quality 里設(shè)置不同清晰度的視頻鏈接和類型，video.defaultQuality 設(shè)置默認(rèn)清晰度
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
quality: [
{
name: 'HD',
url: 'demo.m3u8',
type: 'hls',
},
{
name: 'SD',
url: 'demo.mp4',
type: 'normal',
},
],
defaultQuality: 0,
pic: 'demo.png',
thumbnails: 'thumbnails.jpg',
},
});
HLS支持
需要在 DPlayer.min.js 前面加載 hls.js
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'demo.m3u8',
type: 'hls',
},
pluginOptions: {
hls: {
// hls config
},
},
});
console.log(dp.plugins.hls); // Hls 實例
提供豐富的文檔支持及示例演示
附上項目文檔及地址
# 文檔地址
http://dplayer.js.org/zh/
# 倉庫地址
https://github.com/MoePlayer/DPlayer
另外，DPlayer系列播放器還包含Vue和React版本。
本文由網(wǎng)上采集發(fā)布，不代表我們立場，轉(zhuǎn)載聯(lián)系作者并注明出處：http://m.zltfw.cn/shbk/38732.html
相關(guān)推薦
-
小米主題美化（小米miui主題破解破解入門技能）
自MIUI9后，小米便加強(qiáng)了MIUI主題的保護(hù)策略，無論是收費或免費的主題，都禁止從瀏覽器下載主題包，主題下載途徑僅僅只有主題商店可選。但是主題商店...
-
稱為兩榜出身的是（兩榜出身是什么意思）
在科舉考試盛行的唐朝時期，進(jìn)士會試分甲、乙兩科，即稱所謂的兩榜而到了清朝，會試即進(jìn)士會試，鄉(xiāng)試即舉人試，分別為甲榜、乙榜，合稱兩榜 ，下面...
-
牂牁江怎么讀（牂牁江的拼音）
牂牁江讀作zāng kē jiāng牂牁江風(fēng)景區(qū)牂牁江景區(qū)位于貴州省六盤水市六枝特區(qū)西部，距離六枝特區(qū)中心區(qū)62公里，距六盤水市中心75公里沿水黃(水城到黃果...
-
史上最全五禽戲教學(xué)（最全專業(yè)五禽戲）
五禽戲 五禽戲是以肢體運動為主，輔以呼吸吐納與意念配合的導(dǎo)引類功法。它是模仿五種禽獸虎、鹿、熊、猿、鳥的動作而編創(chuàng)成的氣功功法。五禽戲歷史...
-
漢樂府民歌有哪些（漢代樂府民歌）
樂府是自秦代以來設(shè)立的配置樂曲、訓(xùn)練樂工和采集民歌的專門官署，漢樂府指由漢時樂府機(jī)關(guān)所采制的詩歌。這些詩，原本在民間流傳，經(jīng)由樂府保存下...
-
書寫高原戍邊的忠誠答卷（致敬戍邊英雄勇立時代新功）
你們牢記黨和人民賦予的使命，堅守在生命禁區(qū)，用青春和熱血守衛(wèi)著祖國的神圣領(lǐng)土，出色完成了擔(dān)負(fù)的任務(wù)大家都是好樣的在中秋佳節(jié)即將來臨之際，...
-
浙江李蘭娟院士最新研究成果（李蘭娟院士夫婦相愛45年
文|筆下有情 有人說：婚姻不是天堂，就是地獄。 婚姻的上半場，是紅花過殿堂;婚姻的下半場，是考驗赤子心。 在這場疫情中，婚姻幸福與否也成為了一...
-
兄弟四色激光打印機(jī)（功能全面還支持WiFi）
前言： 說起打印機(jī)，相信是很多單位、企業(yè)、甚至不少小伙伴家中必備產(chǎn)品。而打印機(jī)共享使用也越來越流行。簡單來說就是一個辦公室或者一個區(qū)域內(nèi)通...
-
不能忘卻的紀(jì)念原文魯迅（不能忘卻的紀(jì)念）
1937年12月12日下午伊始，已經(jīng)徹底喪失戰(zhàn)斗力的南京守軍接到上級命令開始全面撤退。緊接著在12月13日，盛極一時的南京城開始淪陷。由于提前沒有做好撤...
-
山西省合并了多少個縣（山西合并縣一覽表）
在山西省的東南部，有一個地方叫做長治縣，也就是現(xiàn)在的上黨區(qū)，它隸屬于長治市。長治縣地處于上黨盆地的南邊，西面和長子縣相連，東面和壺關(guān)縣相...
