{"id":2960,"date":"2025-03-06T10:36:37","date_gmt":"2025-03-06T02:36:37","guid":{"rendered":"https:\/\/code.jishujc.com\/?p=2960"},"modified":"2025-03-06T10:36:37","modified_gmt":"2025-03-06T02:36:37","slug":"dplayer-%e4%b8%80%e6%ac%be%e9%9d%9e%e5%b8%b8%e4%bc%98%e7%a7%80%e7%9a%84%e5%bc%80%e6%ba%90%e5%bc%b9%e5%b9%95h5%e6%92%ad%e6%94%be%e5%99%a8","status":"publish","type":"post","link":"https:\/\/www.qqjishu.com\/index.php\/2025\/03\/06\/dplayer-%e4%b8%80%e6%ac%be%e9%9d%9e%e5%b8%b8%e4%bc%98%e7%a7%80%e7%9a%84%e5%bc%80%e6%ba%90%e5%bc%b9%e5%b9%95h5%e6%92%ad%e6%94%be%e5%99%a8\/","title":{"rendered":"Dplayer – \u4e00\u6b3e\u975e\u5e38\u4f18\u79c0\u7684\u5f00\u6e90\u5f39\u5e55H5\u64ad\u653e\u5668"},"content":{"rendered":"\n

\u3000\u3000Dplayer\u7b80\u4ecb<\/p>\n\n\n\n

\u3000\u3000Dplayer\u662f\u4e00\u6b3e\u975e\u5e38\u4f18\u79c0\u7684\u5f00\u6e90\u7684HTML5\u5f39\u5e55\u89c6\u9891\u64ad\u653e\u5668\uff0c\u57fa\u4e8eJavaScript\u7f16\u5199\uff0c\u9075\u5b88MIT\u5f00\u6e90\u534f\u8bae\u3002\u652f\u6301\u7684\u6d41\u5a92\u4f53\u683c\u5f0f\u5305\u542b\uff1aHLS FLV MPEG DASH WebTorrent\uff0c\u81ea\u5b9a\u4e49\u6d41\u5a92\u4f53\u683c\u5f0f\u7b49\u3002\u591a\u5a92\u4f53\u683c\u5f0f\u652f\u6301\uff1aMP4 H.264 WebM Ogg Theora Vorbis\u3002\u9644\u4e0a\u9879\u76ee\u6587\u6863\u53ca\u5730\u5740\uff1a<\/p>\n\n\n\n

\u3000\u3000#\u5b98\u65b9\u6587\u6863\u5730\u5740<\/p>\n\n\n\n

https:\/\/dplayer.diygod.dev<\/a><\/p>\n\n\n\n

\u3000\u3000#\u9879\u76ee\u4ed3\u5e93\u5730\u5740<\/p>\n\n\n\n

https:\/\/github.com\/DIYgod\/DPlayer<\/a><\/p>\n\n\n\n

\u3000\u3000\u53e6\u5916\uff0cDPlayer\u7cfb\u5217\u64ad\u653e\u5668\u8fd8\u5305\u542bVue\u548cReact\u7248\u672c\u3002<\/p>\n\n\n\n

\u3000\u3000Dplayer demo<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

DEMO HTML<\/p>\n\n\n\n

<link rel=\"stylesheet\" href=\"DPlayer.min.CSS\">\n<!-- ... -->\n<div id=\"player\" class=\"dplayer\"><\/div>\n<!-- ... -->\n<!--HLS\u548cFLV\u652f\u6301\u9700\u8981\u5728 DPlayer.min.js \u524d\u9762\u52a0\u8f7d hls.js\u6216\u8005flv.js-->\n<script type=\"text\/JavaScript\" src=\"hls.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"flv.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"DPlayer.min.js\"><\/script><\/code><\/pre>\n\n\n\n
DEMO JS<\/p>\n\n\n\n
var dp = new DPlayer({\n    container: document.getElementById('player'),\n    autoplay: false,\/\/\u81ea\u52a8\u64ad\u653e\n    preload: 'auto',\/\/\u89c6\u9891\u9884\u52a0\u8f7d\n    volume: 0.7,\/\/\u9ed8\u8ba4\u97f3\u91cf\n    video: {\n        url: https:\/\/xxx.com\/index.M3U8,\/\/\u89c6\u9891\u5730\u5740\n        type: 'auto',\/\/\u89c6\u9891\u7c7b\u578b\n        pic: '',\/\/\u89c6\u9891\u5c01\u9762\n        thumbnails: '',\/\/\u7f29\u7565\u56fe\n    },\n});<\/code><\/pre>\n\n\n\n
Dplayer\u53c2\u6570<\/p>\n\n\n\n
const dp = new DPlayer({\n    container: document.getElementById('dplayer'),\n    autoplay: false,\/\/\u81ea\u52a8\u64ad\u653e\n    live: false,\/\/\u76f4\u64ad\u6a21\u5f0f\n    theme: '#FADFA3',\/\/\u4e3b\u9898\u989c\u8272\n    loop: true,\/\/\u5faa\u73af\u64ad\u653e\n    lang: 'zh-cn',\/\/\u8bed\u8a00\u9009\u62e9\n    screenshot: true,\/\/\u622a\u56fe\u9009\u9879\n    hotkey: true,\/\/\u70ed\u952e\u5f00\u542f\n    airplay: false,\/\/\u5728 Safari \u4e2d\u5f00\u542f AirPlay\n    lang: 'zh-cn',\/\/\u8bed\u8a00\n    preload: 'auto',\/\/\u89c6\u9891\u9884\u52a0\u8f7d\n    logo: 'logo.png',\/\/LOGO\n    volume: 0.7,\/\/\u97f3\u91cf\n    mutex: true,\/\/\u64ad\u653e\u5668\u4e92\u65a5\n    video: {\/\/\u89c6\u9891\u53c2\u6570\n        url: 'dplayer.mp4',\/\/\u89c6\u9891\u5730\u5740\n        pic: 'dplayer.png',\/\/\u89c6\u9891\u5c01\u9762\n        thumbnails: 'thumbnails.jpg',\/\/\u7f29\u7565\u56fe\n        type: 'auto',\/\/\u89c6\u9891\u7c7b\u578b\n    },\n    subtitle: {\/\/\u5916\u6302\u5b57\u5e55\u53c2\u6570\n        url: 'dplayer.vtt',\n        type: 'webvtt',\n        fontSize: '25px',\n        bottom: '10%',\n        color: '#b7daff',\n    },\n    danmaku: {\/\/\u5f39\u5e55\u53c2\u6570\n        id: '9E2E3368B56CDBB4',\n        api: 'https:\/\/api.prprpr.me\/dplayer\/',\n        token: 'tokendemo',\n        maximum: 1000,\n        addition: ['https:\/\/api.prprpr.me\/dplayer\/v3\/bilibili?aid=4157142'],\n        user: 'DIYgod',\n        bottom: '15%',\n        unlimited: true,\n        speedRate: 0.5,\n    },\n    contextmenu: [\/\/\u9f20\u6807\u53f3\u952e\u83dc\u5355\u53c2\u6570\n        {\n            text: 'custom1',\n            link: 'https:\/\/GitHub.com\/DIYgod\/DPlayer',\n        },\n        {\n            text: 'custom2',\n            click: (player) => {\n                console.log(player);\n            },\n        },\n    ],\n    highlight: [\/\/\u81ea\u5b9a\u4e49\u8fdb\u5ea6\u6761\u63d0\u793a\u70b9\u53c2\u6570\n        {\n            time: 20,\n            text: '\u8fd9\u662f\u7b2c 20 \u79d2',\n        },\n        {\n            time: 120,\n            text: '\u8fd9\u662f 2 \u5206\u949f',\n        },\n    ],});<\/code><\/pre>\n\n\n\n
Dplayer API<\/h3>\n\n\n\n
\u3000\u3000Dplayer\u6709\u6bd4\u8f83\u5168\u9762\u7684API\uff0c\u7ed3\u5408Dplayer\u7684\u4e8b\u4ef6\u7ed1\u5b9a\u80fd\u591f\u6ee1\u8db3\u5927\u90e8\u5206\u5f00\u53d1\u8005\u5bf9\u89c6\u9891\u9875\u9762\u7684\u8bbe\u8ba1\u4e0e\u63a7\u5236\uff0c\u4f8b\u5982\uff1a<\/p>\n\n\n\n
\u3000\u30001\u3001\u5728\u6682\u505c\u89c6\u9891\u7684\u540c\u65f6\uff0c\u63d2\u5165\u4e00\u4e2a\u5e7f\u544a\u56fe\u7247<\/p>\n\n\n\n
\u3000\u30002\u3001\u5728\u89c6\u9891\u64ad\u653e\u5b8c\u6bd5\u4e4b\u540e\uff0c\u5207\u6362\u5230\u4e0b\u4e00\u4e2a\u89c6\u9891<\/p>\n\n\n\n
\u3000\u30003\u3001\u5f53\u64ad\u653e\u5668\u52a0\u8f7d\u89c6\u9891\u5931\u8d25\u65f6\uff0c\u5f39\u51fa\u4e00\u4e2a\u663e\u793a\u9519\u8bef\u7684\u63d0\u793a\u6846<\/p>\n\n\n\n
\u3000\u3000\u7b49\u7b49\u2026<\/p>\n\n\n\n
dp.play(): \u64ad\u653e\u89c6\u9891\ndp.pause(): \u6682\u505c\u89c6\u9891\ndp.seek(time: number): \u8df3\u8f6c\u5230\u7279\u5b9a\u65f6\u95f4\ndp.toggle(): \u5207\u6362\u64ad\u653e\u548c\u6682\u505c\ndp.on(event: string, handler: function): \u7ed1\u5b9a\u89c6\u9891\u548c\u64ad\u653e\u5668\u4e8b\u4ef6\ndp.switchVideo(video, danmaku): \u5207\u6362\u5230\u5176\u4ed6\u89c6\u9891\ndp.notice(text: string, time: number): \u663e\u793a\u901a\u77e5\uff0c\u65f6\u95f4\u7684\u5355\u4f4d\u4e3a\u6beb\u79d2\uff0c\u9ed8\u8ba4\u65f6\u95f4 2000 \u6beb\u79d2\uff0c\u9ed8\u8ba4\u900f\u660e\u5ea6 0.8\ndp.switchQuality(index: number): \u5207\u6362\u6e05\u6670\u5ea6\ndp.destroy(): \u9500\u6bc1\u64ad\u653e\u5668\ndp.speed(rate: number): \u8bbe\u7f6e\u89c6\u9891\u901f\u5ea6\ndp.volume(percentage: number, nostorage: boolean, nonotice: boolean): \u8bbe\u7f6e\u89c6\u9891\u97f3\u91cf\ndp.video: \u539f\u751f video\ndp.video.currentTime: \u8fd4\u56de\u89c6\u9891\u5f53\u524d\u64ad\u653e\u65f6\u95f4\ndp.video.duration: \u8fd4\u56de\u89c6\u9891\u603b\u65f6\u95f4\ndp.video.paused: \u8fd4\u56de\u89c6\u9891\u662f\u5426\u6682\u505c\ndp.danmaku\ndp.danmaku.send(danmaku, callback: function): \u63d0\u4ea4\u4e00\u4e2a\u65b0\u5f39\u5e55\ndp.danmaku.draw(danmaku): \u5b9e\u65f6\u7ed8\u5236\u4e00\u4e2a\u65b0\u5f39\u5e55\ndp.danmaku.opacity(percentage: number): \u8bbe\u7f6e\u5f39\u5e55\u900f\u660e\u5ea6\uff0c\u900f\u660e\u5ea6\u503c\u5728 0 \u5230 1 \u4e4b\u95f4\ndp.danmaku.clear(): \u6e05\u9664\u6240\u6709\u5f39\u5e55\ndp.danmaku.hide(): \u9690\u85cf\u5f39\u5e55\ndp.danmaku.show(): \u663e\u793a\u5f39\u5e55\ndp.fullScreen: \u4e24\u4e2a\u7c7b\u578b\uff1aweb \u548c browser\uff0c\u9ed8\u8ba4\u7c7b\u578b\u662f browser\ndp.fullScreen.request(type: string): \u8fdb\u5165\u5168\u5c4f\ndp.fullScreen.cancel(type: string): \u9000\u51fa\u5168\u5c4f<\/code><\/pre>\n\n\n\n
\/\/\u683c\u5f0f:\ndp.on(event, handler)\n\n\/\/\u4f8b\u5b50:\ndp.on('ended', function () {\n    console.log('player ended');\n});\n    \n\/\/\u89c6\u9891\u4e8b\u4ef6\nabort\ncanplay\ncanplaythrough\ndurationchange\nemptied\nended\nerror\nloadeddata\nloadedmetadata\nloadstart\nmozaudioavailable\npause\nplay\nplaying\nprogress\nratechange\nseeked\nseeking\nstalled\nsuspend\ntimeupdate\nvolumechange\nwaiting\n\n\/\/\u64ad\u653e\u5668\u4e8b\u4ef6\nscreenshot\nthumbnails_show\nthumbnails_hide\ndanmaku_show\ndanmaku_hide\ndanmaku_clear\ndanmaku_loaded\ndanmaku_send\ndanmaku_opacity\ncontextmenu_show\ncontextmenu_hide\nnotice_show\nnotice_hide\nquality_start\nquality_end\ndestroy\nresize\nfullscreen\nfullscreen_cancel\nsubtitle_show\nsubtitle_hide\nsubtitle_change<\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\u3000\u3000Dplayer\u7b80\u4ecb \u3000\u3000Dplayer\u662f\u4e00\u6b3e\u975e\u5e38\u4f18\u79c0\u7684\u5f00\u6e90\u7684HTML5\u5f39\u5e55\u89c6\u9891\u64ad\u653e\u5668\uff0c\u57fa\u4e8eJavaScript\u7f16\u5199\uff0c\u9075\u5b88MIT\u5f00\u6e90\u534f\u8bae\u3002\u652f\u6301\u7684\u6d41\u5a92\u4f53\u683c\u5f0f\u5305\u542b\uff1aHLS FLV MPEG DASH WebTorrent\uff0c\u81ea\u5b9a\u4e49\u6d41\u5a92\u4f53\u683c\u5f0f\u7b49\u3002\u591a\u5a92\u4f53\u683c\u5f0f\u652f\u6301\uff1aMP4 H.264 WebM Ogg Theora Vorbis\u3002\u9644\u4e0a\u9879\u76ee\u6587\u6863\u53ca\u5730\u5740\uff1a \u3000\u3000#\u5b98\u65b9\u6587\u6863\u5730\u5740 https:\/\/dplayer.diygod.dev \u3000\u3000#\u9879\u76ee\u4ed3\u5e93\u5730\u5740 https:\/\/github.com\/DIYgod\/DPlayer \u3000\u3000\u53e6\u5916\uff0cDP<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[],"collection":[],"class_list":["post-2960","post","type-post","status-publish","format-standard","hentry","category-qtcj"],"_links":{"self":[{"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/posts\/2960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/comments?post=2960"}],"version-history":[{"count":0,"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/posts\/2960\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/media?parent=2960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/categories?post=2960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/tags?post=2960"},{"taxonomy":"collection","embeddable":true,"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/collection?post=2960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}