"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[509],{3905:function(e,n,t){t.d(n,{Zo:function(){return p},kt:function(){return m}});var r=t(7294);function a(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 r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}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){a(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 s(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var o=r.createContext({}),u=function(e){var n=r.useContext(o),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=u(e.components);return r.createElement(o.Provider,{value:n},e.children)},c={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},d=r.forwardRef((function(e,n){var t=e.components,a=e.mdxType,l=e.originalType,o=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),d=u(t),m=a,f=d["".concat(o,".").concat(m)]||d[m]||c[m]||l;return t?r.createElement(f,i(i({ref:n},p),{},{components:t})):r.createElement(f,i({ref:n},p))}));function m(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var l=t.length,i=new Array(l);i[0]=d;var s={};for(var o in n)hasOwnProperty.call(n,o)&&(s[o]=n[o]);s.originalType=e,s.mdxType="string"==typeof e?e:a,i[1]=s;for(var u=2;u<l;u++)i[u]=t[u];return r.createElement.apply(null,i)}return r.createElement.apply(null,t)}d.displayName="MDXCreateElement"},2126:function(e,n,t){t.r(n),t.d(n,{assets:function(){return p},contentTitle:function(){return o},default:function(){return m},frontMatter:function(){return s},metadata:function(){return u},toc:function(){return c}});var r=t(7462),a=t(3366),l=(t(7294),t(3905)),i=["components"],s={title:"Ads Plugin",sidebar_position:2},o=void 0,u={unversionedId:"en/Plugins/ads",id:"en/Plugins/ads",title:"Ads Plugin",description:"Demo",source:"@site/docs/en/Plugins/ads.mdx",sourceDirName:"en/Plugins",slug:"/en/Plugins/ads",permalink:"/document/en/Plugins/ads",draft:!1,tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"Ads Plugin",sidebar_position:2},sidebar:"en",previous:{title:"Danmuku plugin",permalink:"/document/en/Plugins/danmuku"},next:{title:"Iframe Plugin",permalink:"/document/en/Plugins/iframe"}},p={},c=[{value:"Demo",id:"demo",level:2},{value:"Install",id:"install",level:2},{value:"Install from <code>npm</code>:",id:"install-from-npm",level:3},{value:"Install from <code>yarn</code>:",id:"install-from-yarn",level:3},{value:"Install from <code>script</code>:",id:"install-from-script",level:3},{value:"Use",id:"use",level:2}],d={toc:c};function m(e){var n=e.components,t=(0,a.Z)(e,i);return(0,l.kt)("wrapper",(0,r.Z)({},d,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-ads/index.js&example=ads"},"View Demo")),(0,l.kt)("h2",{id:"install"},"Install"),(0,l.kt)("h3",{id:"install-from-npm"},"Install from ",(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-ads\n")),(0,l.kt)("h3",{id:"install-from-yarn"},"Install from ",(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-ads\n")),(0,l.kt)("h3",{id:"install-from-script"},"Install from ",(0,l.kt)("inlineCode",{parentName:"h3"},"script"),":"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- local --\x3e\n<script src="path/to/artplayer-plugin-ads.js"><\/script>\n\n\x3c!-- jsdelivr --\x3e\n<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js"><\/script>\n\n\x3c!-- unpkg --\x3e\n<script src="https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js"><\/script>\n')),(0,l.kt)("p",null,"Then you can access the plugin function through ",(0,l.kt)("inlineCode",{parentName:"p"},"window.artplayerPluginAds")),(0,l.kt)("h2",{id:"use"},"Use"),(0,l.kt)("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/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    fullscreen: true,\n    fullscreenWeb: true,\n    plugins: [\n        artplayerPluginAds({\n            // html ad, ignore this value if it is a video ad\n            html: '<img src=\"/assets/sample/poster.jpg\">',\n\n            // The address of the video ad\n            video: '/assets/sample/test1.mp4',\n\n            // Ad redirect URL, if empty, no redirect\n            url: 'http://artplayer.org',\n\n            // The length of time that must be watched, the period cannot be skipped, the unit is seconds\n            // When the value is greater than or equal to totalDuration, the ad cannot be closed early\n            // When the value is equal to or less than 0, the ad can be turned off at any time\n            playDuration: 5,\n\n            // The total duration of the ad, in seconds\n            totalDuration: 10,\n\n            // Whether the video ads defaults to silence\n            muted: false,\n\n            // Multilingual support\n            i18n: {\n                close: 'Close Ads',\n                countdown: '%s seconds',\n                detail: 'Check Detail',\n                canBeClosed: 'Ads can be closed after %s seconds',\n            },\n        }),\n    ],\n});\n\nart.on('artplayerPluginAds:click', (ads) => {\n    console.info('ad is clicked', ads);\n});\n\nart.on('artplayerPluginAds:skip', (ads) => {\n    console.info('Ads are skipped', ads);\n});\n")))}m.isMDXComponent=!0}}]);