"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[667],{3905:function(e,n,t){t.d(n,{Zo:function(){return p},kt:function(){return c}});var a=t(7294);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function l(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?l(Object(t),!0).forEach((function(n){r(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function u(e,n){if(null==e)return{};var t,a,r=function(e,n){if(null==e)return{};var t,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)t=l[a],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)t=l[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var o=a.createContext({}),s=function(e){var n=a.useContext(o),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=s(e.components);return a.createElement(o.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return a.createElement(a.Fragment,{},n)}},m=a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,l=e.originalType,o=e.parentName,p=u(e,["components","mdxType","originalType","parentName"]),m=s(t),c=r,k=m["".concat(o,".").concat(c)]||m[c]||d[c]||l;return t?a.createElement(k,i(i({ref:n},p),{},{components:t})):a.createElement(k,i({ref:n},p))}));function c(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var l=t.length,i=new Array(l);i[0]=m;var u={};for(var o in n)hasOwnProperty.call(n,o)&&(u[o]=n[o]);u.originalType=e,u.mdxType="string"==typeof e?e: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)}m.displayName="MDXCreateElement"},1856:function(e,n,t){t.r(n),t.d(n,{assets:function(){return p},contentTitle:function(){return o},default:function(){return c},frontMatter:function(){return u},metadata:function(){return s},toc: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",title:"Danmuku plugin",description:"Demo",source:"@site/docs/en/Plugins/danmuku.mdx",sourceDirName:"en/Plugins",slug:"/en/Plugins/danmuku",permalink:"/document/en/Plugins/danmuku",draft:!1,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={},d=[{value:"Demo",id:"demo",level:2},{value:"Install",id:"install",level:2},{value:"Install by <code>npm</code>:",id:"install-by-npm",level:3},{value:"Install by <code>yarn</code>:",id:"install-by-yarn",level:3},{value:"Install by <code>script</code>:",id:"install-by-script",level:3},{value:"Use",id:"use",level:2},{value:"Use the damuku array",id:"use-the-damuku-array",level:3},{value:"Use the XML",id:"use-the-xml",level:3},{value:"Use asynchronous calls",id:"use-asynchronous-calls",level:3},{value:"Interface",id:"interface",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}],m={toc:d};function c(e){var n=e.components,t=(0,r.Z)(e,i);return(0,l.kt)("wrapper",(0,a.Z)({},m,t,{components:n,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=./uncompiled/artplayer-plugin-danmuku/index.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/index.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, // The duration of the barrage, in seconds, in the range [1 ~ 10]\n            opacity: 1, // Barrage transparency, the range is [0 ~ 1]\n            fontSize: 25, // Font size, supports numbers and percentages\n            color: '#FFFFFF', // Default font color\n            mode: 0, // Default mode, 0-scroll, 1-still\n            margin: ['2%', 60], // Barrage top and bottom margins, supports numbers and percentages\n            antiOverlap: true, // Whether to prevent overlapping\n            useWorker: true, // whether to use web workers\n            synchronousPlayback: false, // Whether to sync to playback speed\n            filter: (danmu) => danmu.text.length < 50, // Barrage filter function\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/index.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/index.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/index.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/index.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/index.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"},"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)("inlineCode",{parentName:"p"},"filter")),(0,l.kt)("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.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")))}c.isMDXComponent=!0}}]);