"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[696],{3905:function(n,e,t){t.d(e,{Zo:function(){return s},kt:function(){return d}});var a=t(7294);function r(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function l(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(n);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.push.apply(t,a)}return t}function i(n){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?l(Object(t),!0).forEach((function(e){r(n,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}))}return n}function u(n,e){if(null==n)return{};var t,a,r=function(n,e){if(null==n)return{};var t,a,r={},l=Object.keys(n);for(a=0;a<l.length;a++)t=l[a],e.indexOf(t)>=0||(r[t]=n[t]);return r}(n,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(n);for(a=0;a<l.length;a++)t=l[a],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(n,t)&&(r[t]=n[t])}return r}var p=a.createContext({}),o=function(n){var e=a.useContext(p),t=e;return n&&(t="function"==typeof n?n(e):i(i({},e),n)),t},s=function(n){var e=o(n.components);return a.createElement(p.Provider,{value:e},n.children)},m={inlineCode:"code",wrapper:function(n){var e=n.children;return a.createElement(a.Fragment,{},e)}},c=a.forwardRef((function(n,e){var t=n.components,r=n.mdxType,l=n.originalType,p=n.parentName,s=u(n,["components","mdxType","originalType","parentName"]),c=o(t),d=r,k=c["".concat(p,".").concat(d)]||c[d]||m[d]||l;return t?a.createElement(k,i(i({ref:e},s),{},{components:t})):a.createElement(k,i({ref:e},s))}));function d(n,e){var t=arguments,r=e&&e.mdxType;if("string"==typeof n||r){var l=t.length,i=new Array(l);i[0]=c;var u={};for(var p in e)hasOwnProperty.call(e,p)&&(u[p]=e[p]);u.originalType=n,u.mdxType="string"==typeof n?n:r,i[1]=u;for(var o=2;o<l;o++)i[o]=t[o];return a.createElement.apply(null,i)}return a.createElement.apply(null,t)}c.displayName="MDXCreateElement"},7823:function(n,e,t){t.r(e),t.d(e,{assets:function(){return s},contentTitle:function(){return p},default:function(){return d},frontMatter:function(){return u},metadata:function(){return o},toc:function(){return m}});var a=t(7462),r=t(3366),l=(t(7294),t(3905)),i=["components"],u={title:"\u5f39\u5e55\u5e93\u63d2\u4ef6",sidebar_position:1},p=void 0,o={unversionedId:"zh-cn/Plugins/danmuku",id:"zh-cn/Plugins/danmuku",title:"\u5f39\u5e55\u5e93\u63d2\u4ef6",description:"\u6f14\u793a",source:"@site/docs/zh-cn/Plugins/danmuku.md",sourceDirName:"zh-cn/Plugins",slug:"/zh-cn/Plugins/danmuku",permalink:"/document/zh-cn/Plugins/danmuku",tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"\u5f39\u5e55\u5e93\u63d2\u4ef6",sidebar_position:1},sidebar:"zh-cn",previous:{title:"\u7b2c\u4e09\u65b9\u5e93",permalink:"/document/zh-cn/libraries"},next:{title:"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u5217\u8868",permalink:"/document/zh-cn/Questions/Create selector in the controls"}},s={},m=[{value:"\u6f14\u793a",id:"\u6f14\u793a",level:2},{value:"\u5b89\u88c5",id:"\u5b89\u88c5",level:2},{value:"\u901a\u8fc7 <code>npm</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-npm-\u5b89\u88c5",level:3},{value:"\u901a\u8fc7 <code>yarn</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-yarn-\u5b89\u88c5",level:3},{value:"\u901a\u8fc7 <code>script</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-script-\u5b89\u88c5",level:3},{value:"\u4f7f\u7528",id:"\u4f7f\u7528",level:2},{value:"\u4f7f\u7528\u5f39\u5e55\u6570\u7ec4",id:"\u4f7f\u7528\u5f39\u5e55\u6570\u7ec4",level:3},{value:"\u4f7f\u7528\u5f39\u5e55 XML",id:"\u4f7f\u7528\u5f39\u5e55-xml",level:3},{value:"\u4f7f\u7528\u5f02\u6b65\u8c03\u7528",id:"\u4f7f\u7528\u5f02\u6b65\u8c03\u7528",level:3},{value:"\u63a5\u53e3",id:"\u63a5\u53e3",level:2},{value:"hide/show",id:"hideshow",level:3},{value:"isHide",id:"ishide",level:3},{value:"emit",id:"emit",level:3},{value:"config",id:"config",level:3}],c={toc:m};function d(n){var e=n.components,t=(0,r.Z)(n,i);return(0,l.kt)("wrapper",(0,a.Z)({},c,t,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"\u6f14\u793a"},"\u6f14\u793a"),(0,l.kt)("p",null,"\ud83d\udc49 ",(0,l.kt)("a",{parentName:"p",href:"https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku"},"\u67e5\u770b\u5b8c\u6574\u6f14\u793a")),(0,l.kt)("h2",{id:"\u5b89\u88c5"},"\u5b89\u88c5"),(0,l.kt)("h3",{id:"\u901a\u8fc7-npm-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"h3"},"npm")," \u5b89\u88c5\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"$ npm install artplayer-plugin-danmuku\n")),(0,l.kt)("h3",{id:"\u901a\u8fc7-yarn-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"h3"},"yarn")," \u5b89\u88c5\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"$ yarn add artplayer-plugin-danmuku\n")),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"import artplayerPluginDanmuku from 'artplayer-plugin-danmuku';\n")),(0,l.kt)("h3",{id:"\u901a\u8fc7-script-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"h3"},"script")," \u5b89\u88c5\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'<script src="path/to/artplayer-plugin-danmuku.js"><\/script>\n')),(0,l.kt)("p",null,"\u7136\u540e\u4f60\u53ef\u4ee5\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"p"},"window.artplayerPluginDanmuku")," \u8bbf\u95ee\u5230\u63d2\u4ef6\u51fd\u6570"),(0,l.kt)("h2",{id:"\u4f7f\u7528"},"\u4f7f\u7528"),(0,l.kt)("h3",{id:"\u4f7f\u7528\u5f39\u5e55\u6570\u7ec4"},"\u4f7f\u7528\u5f39\u5e55\u6570\u7ec4"),(0,l.kt)("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku.js"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n    autoSize: true,\n    setting: true,\n    playbackRate: true,\n    fullscreenWeb: true,\n    plugins: [\n        artplayerPluginDanmuku({\n            // \u5f39\u5e55\u6570\u7ec4\n            danmuku: [\n                {\n                    text: '111', // \u5f39\u5e55\u6587\u672c\n                    time: 1, // \u53d1\u9001\u65f6\u95f4\uff0c\u5355\u4f4d\u79d2\n                    color: '#fff', // \u5f39\u5e55\u5c40\u90e8\u989c\u8272\n                    border: false, // \u662f\u5426\u663e\u793a\u63cf\u8fb9\n                    mode: 0, // \u5f39\u5e55\u6a21\u5f0f: 0\u8868\u793a\u6eda\u52a8\u30011\u9759\u6b62\n                },\n                {\n                    text: '222',\n                    time: 2,\n                    color: 'red',\n                    border: true,\n                    mode: 0,\n                },\n                {\n                    text: '333',\n                    time: 3,\n                    color: 'green',\n                    border: false,\n                    mode: 1,\n                },\n            ],\n            speed: 5, // \u5168\u5c40\u6301\u7eed\u65f6\u95f4\n            opacity: 1, // \u5168\u5c40\u900f\u660e\u5ea6\n            color: '#fff', // \u5168\u5c40\u5b57\u4f53\u989c\u8272\n            size: 25, // \u5168\u5c40\u5b57\u4f53\u5927\u5c0f\n            maxlength: 50, // \u5168\u5c40\u6700\u5927\u957f\u5ea6\n            margin: [10, 20], // \u8ddd\u79bb\u9876\u90e8\u548c\u8ddd\u79bb\u5e95\u90e8\u7684\u9ad8\u5ea6\u503c\n            synchronousPlayback: false, // \u662f\u5426\u540c\u6b65\u5230\u64ad\u653e\u901f\u5ea6\n        }),\n    ],\n});\n")),(0,l.kt)("h3",{id:"\u4f7f\u7528\u5f39\u5e55-xml"},"\u4f7f\u7528\u5f39\u5e55 XML"),(0,l.kt)("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku.js"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n    plugins: [\n        artplayerPluginDanmuku({\n            // \u5f39\u5e55 XML \u6587\u4ef6\uff0c\u548c Bilibili \u7f51\u7ad9\u7684\u5f39\u5e55\u683c\u5f0f\u4e00\u81f4\n            danmuku: '/assets/sample/danmuku.xml',\n        }),\n    ],\n});\n")),(0,l.kt)("h3",{id:"\u4f7f\u7528\u5f02\u6b65\u8c03\u7528"},"\u4f7f\u7528\u5f02\u6b65\u8c03\u7528"),(0,l.kt)("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku.js"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n    plugins: [\n        artplayerPluginDanmuku({\n            // \u4f7f\u7528 Promise \u5f02\u6b65\u8fd4\u56de\n            danmuku: function () {\n                return new Promise((resovle) => {\n                    return resovle([\n                        {\n                            text: '111',\n                            time: 1,\n                        },\n                        {\n                            text: '222',\n                            time: 2,\n                        },\n                        {\n                            text: '333',\n                            time: 3,\n                        },\n                    ]);\n                });\n            },\n        }),\n    ],\n});\n")),(0,l.kt)("h2",{id:"\u63a5\u53e3"},"\u63a5\u53e3"),(0,l.kt)("h3",{id:"hideshow"},"hide/show"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function"))),(0,l.kt)("p",null,"\u901a\u8fc7\u65b9\u6cd5 ",(0,l.kt)("inlineCode",{parentName:"p"},"hide")," \u548c ",(0,l.kt)("inlineCode",{parentName:"p"},"show")," \u8fdb\u884c\u9690\u85cf\u6216\u8005\u663e\u793a\u5f39\u5e55"),(0,l.kt)("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku.js"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n    plugins: [\n        artplayerPluginDanmuku({\n            danmuku: '/assets/sample/danmuku.xml',\n        }),\n    ],\n    controls: [\n        {\n            position: 'right',\n            html: '\u9690\u85cf\u5f39\u5e55',\n            click: function () {\n                art.plugins.artplayerPluginDanmuku.hide();\n            },\n        },\n        {\n            position: 'right',\n            html: '\u663e\u793a\u5f39\u5e55',\n            click: function () {\n                art.plugins.artplayerPluginDanmuku.show();\n            },\n        },\n    ],\n});\n")),(0,l.kt)("h3",{id:"ishide"},"isHide"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,l.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,l.kt)("p",null,"\u901a\u8fc7\u5c5e\u6027 ",(0,l.kt)("inlineCode",{parentName:"p"},"isHide")," \u5224\u65ad\u5f53\u524d\u5f39\u5e55\u662f\u9690\u85cf\u6216\u8005\u663e\u793a"),(0,l.kt)("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku.js"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n    plugins: [\n        artplayerPluginDanmuku({\n            danmuku: '/assets/sample/danmuku.xml',\n        }),\n    ],\n    controls: [\n        {\n            position: 'right',\n            html: '\u9690\u85cf\u5f39\u5e55',\n            click: function (_, event) {\n                if (art.plugins.artplayerPluginDanmuku.isHide) {\n                    art.plugins.artplayerPluginDanmuku.show();\n                    event.target.innerText = '\u9690\u85cf\u5f39\u5e55';\n                } else {\n                    art.plugins.artplayerPluginDanmuku.hide();\n                    event.target.innerText = '\u663e\u793a\u5f39\u5e55';\n                }\n            },\n        },\n    ],\n});\n")),(0,l.kt)("h3",{id:"emit"},"emit"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function"))),(0,l.kt)("p",null,"\u901a\u8fc7\u65b9\u6cd5 ",(0,l.kt)("inlineCode",{parentName:"p"},"emit")," \u53d1\u9001\u4e00\u6761\u5b9e\u65f6\u5f39\u5e55"),(0,l.kt)("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku.js"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n    plugins: [\n        artplayerPluginDanmuku({\n            danmuku: '/assets/sample/danmuku.xml',\n        }),\n    ],\n    controls: [\n        {\n            position: 'right',\n            html: '\u53d1\u9001\u5f39\u5e55',\n            click: function () {\n                var text = prompt('\u8bf7\u8f93\u5165\u5f39\u5e55\u6587\u672c', '\u5f39\u5e55\u6d4b\u8bd5\u6587\u672c');\n                if (!text || !text.trim()) return;\n                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);\n                art.plugins.artplayerPluginDanmuku.emit({\n                    text: text,\n                    color: color,\n                    border: true,\n                });\n            },\n        },\n    ],\n});\n")),(0,l.kt)("h3",{id:"config"},"config"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function"))),(0,l.kt)("p",null,"\u901a\u8fc7\u65b9\u6cd5 ",(0,l.kt)("inlineCode",{parentName:"p"},"config")," \u5b9e\u65f6\u6539\u53d8\u5f39\u5e55\u914d\u7f6e\uff0c\u652f\u6301\u5c5e\u6027\u6709\uff1a",(0,l.kt)("inlineCode",{parentName:"p"},"speed"),"\u3001",(0,l.kt)("inlineCode",{parentName:"p"},"maxlength"),"\u3001",(0,l.kt)("inlineCode",{parentName:"p"},"margin"),"\u3001",(0,l.kt)("inlineCode",{parentName:"p"},"opacity"),"\u3001",(0,l.kt)("inlineCode",{parentName:"p"},"fontSize"),"\u3001",(0,l.kt)("inlineCode",{parentName:"p"},"synchronousPlayback")),(0,l.kt)("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku.js"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n    plugins: [\n        artplayerPluginDanmuku({\n            danmuku: '/assets/sample/danmuku.xml',\n        }),\n    ],\n    controls: [\n        {\n            position: 'right',\n            html: '\u5f39\u5e55\u5927\u5c0f\uff1a<input type=\"range\" min=\"12\" max=\"50\" step=\"1\" value=\"25\">',\n            style: {\n                display: 'flex',\n                alignItems: 'center',\n            },\n            mounted: function ($setting) {\n                const $range = $setting.querySelector('input[type=range]');\n                $range.addEventListener('change', () => {\n                    art.plugins.artplayerPluginDanmuku.config({\n                        fontSize: Number($range.value),\n                    });\n                });\n            },\n        },\n    ],\n});\n")))}d.isMDXComponent=!0}}]);