"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[748],{3905:function(n,e,t){t.d(e,{Zo:function(){return p},kt:function(){return c}});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 o=a.createContext({}),s=function(n){var e=a.useContext(o),t=e;return n&&(t="function"==typeof n?n(e):i(i({},e),n)),t},p=function(n){var e=s(n.components);return a.createElement(o.Provider,{value:e},n.children)},m={inlineCode:"code",wrapper:function(n){var e=n.children;return a.createElement(a.Fragment,{},e)}},d=a.forwardRef((function(n,e){var t=n.components,r=n.mdxType,l=n.originalType,o=n.parentName,p=u(n,["components","mdxType","originalType","parentName"]),d=s(t),c=r,k=d["".concat(o,".").concat(c)]||d[c]||m[c]||l;return t?a.createElement(k,i(i({ref:e},p),{},{components:t})):a.createElement(k,i({ref:e},p))}));function c(n,e){var t=arguments,r=e&&e.mdxType;if("string"==typeof n||r){var l=t.length,i=new Array(l);i[0]=d;var u={};for(var o in e)hasOwnProperty.call(e,o)&&(u[o]=e[o]);u.originalType=n,u.mdxType="string"==typeof n?n:r,i[1]=u;for(var s=2;s<l;s++)i[s]=t[s];return a.createElement.apply(null,i)}return a.createElement.apply(null,t)}d.displayName="MDXCreateElement"},9407:function(n,e,t){t.r(e),t.d(e,{frontMatter:function(){return u},contentTitle:function(){return o},metadata:function(){return s},toc:function(){return p},default:function(){return d}});var a=t(7462),r=t(3366),l=(t(7294),t(3905)),i=["components"],u={title:"Danmuku plugin",sidebar_position:1},o=void 0,s={unversionedId:"en/Plugins/danmuku",id:"en/Plugins/danmuku",isDocsHomePage:!1,title:"Danmuku plugin",description:"Demo",source:"@site/docs/en/Plugins/danmuku.md",sourceDirName:"en/Plugins",slug:"/en/Plugins/danmuku",permalink:"/document/en/Plugins/danmuku",tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"Danmuku plugin",sidebar_position:1},sidebar:"en",previous:{title:"Third party librarys",permalink:"/document/libraries"},next:{title:"Add select in the controls",permalink:"/document/en/Questions/Create selector in the controls"}},p=[{value:"Demo",id:"demo",children:[],level:2},{value:"Install",id:"install",children:[{value:"Install by <code>npm</code>:",id:"install-by-npm",children:[],level:3},{value:"Install by <code>yarn</code>:",id:"install-by-yarn",children:[],level:3},{value:"Install by <code>script</code>:",id:"install-by-script",children:[],level:3}],level:2},{value:"Use",id:"use",children:[{value:"Use the damuku array",id:"use-the-damuku-array",children:[],level:3},{value:"Use the XML",id:"use-the-xml",children:[],level:3},{value:"Use asynchronous calls",id:"use-asynchronous-calls",children:[],level:3}],level:2},{value:"Interface",id:"interface",children:[{value:"hide/show",id:"hideshow",children:[],level:3},{value:"isHide",id:"ishide",children:[],level:3},{value:"emit",id:"emit",children:[],level:3},{value:"config",id:"config",children:[],level:3}],level:2}],m={toc:p};function d(n){var e=n.components,t=(0,r.Z)(n,i);return(0,l.kt)("wrapper",(0,a.Z)({},m,t,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"demo"},"Demo"),(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"},"View full demo")),(0,l.kt)("h2",{id:"install"},"Install"),(0,l.kt)("h3",{id:"install-by-npm"},"Install by ",(0,l.kt)("inlineCode",{parentName:"h3"},"npm"),":"),(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:"install-by-yarn"},"Install by ",(0,l.kt)("inlineCode",{parentName:"h3"},"yarn"),":"),(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:"install-by-script"},"Install by ",(0,l.kt)("inlineCode",{parentName:"h3"},"script"),":"),(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,"Then you can access the plugin function via ",(0,l.kt)("inlineCode",{parentName:"p"},"window.artplayerPluginDanmuku")),(0,l.kt)("h2",{id:"use"},"Use"),(0,l.kt)("h3",{id:"use-the-damuku-array"},"Use the damuku array"),(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            // Damuku array\n            danmuku: [\n                {\n                    text: '111', // Danmu text\n                    time: 1, // Video time\n                    color: '#fff', // Danmu color\n                    border: false, // Danmu border\n                    mode: 0, // Danmu mode: 0-scroll or 1-static\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, // Animation time\n            opacity: 1, // Opacity\n            color: '#fff', // Font color\n            size: 25, // Font size\n            maxlength: 50, // The maximum number of words in the danmu\n            margin: [10, 20], // Margin top and margin bottom\n            synchronousPlayback: false, // Synchronous playback speed\n        }),\n    ],\n});\n")),(0,l.kt)("h3",{id:"use-the-xml"},"Use the 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            // Damuku xml\uff0clike the Bilibili danmuku format\n            danmuku: '/assets/sample/danmuku.xml',\n        }),\n    ],\n});\n")),(0,l.kt)("h3",{id:"use-asynchronous-calls"},"Use asynchronous calls"),(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            // Use promise to return asynchronous\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:"interface"},"Interface"),(0,l.kt)("h3",{id:"hideshow"},"hide/show"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function"))),(0,l.kt)("p",null,"Hidden or show the danmuku by methods ",(0,l.kt)("inlineCode",{parentName:"p"},"hide")," and ",(0,l.kt)("inlineCode",{parentName:"p"},"show")),(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: 'Hide',\n            click: function () {\n                art.plugins.artplayerPluginDanmuku.hide();\n            },\n        },\n        {\n            position: 'right',\n            html: 'Show',\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"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,l.kt)("p",null,"By attribute ",(0,l.kt)("inlineCode",{parentName:"p"},"ishide")," judgment the current danmuku is hidden or displayed"),(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: 'Hide',\n            click: function (_, event) {\n                if (art.plugins.artplayerPluginDanmuku.isHide) {\n                    art.plugins.artplayerPluginDanmuku.show();\n                    event.target.innerText = 'Hide';\n                } else {\n                    art.plugins.artplayerPluginDanmuku.hide();\n                    event.target.innerText = 'Show';\n                }\n            },\n        },\n    ],\n});\n")),(0,l.kt)("h3",{id:"emit"},"emit"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function"))),(0,l.kt)("p",null,"Send a real-time danmu by method ",(0,l.kt)("inlineCode",{parentName:"p"},"emit")),(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: 'Send',\n            click: function () {\n                var text = prompt('Input the danmu text', 'danmu text');\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"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function"))),(0,l.kt)("p",null,"Changing the danmu configuration in real time through method ",(0,l.kt)("inlineCode",{parentName:"p"},"config"),", support attributes: ",(0,l.kt)("inlineCode",{parentName:"p"},"speed"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"maxlength"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"margin"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"opacity"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"fontSize"),", ",(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: 'Size\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}}]);