import{_ as l,c as p,o,z as s,a as n,V as a}from"./chunks/framework.5c8808ab.js";const _=JSON.parse('{"title":"Writing Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1700976201000}'),e={name:"en/advanced/plugin.md"},r=s("h1",{id:"writing-plugins",tabindex:"-1"},[n("Writing Plugins "),s("a",{class:"header-anchor",href:"#writing-plugins","aria-label":'Permalink to "Writing Plugins"'},"​")],-1),c=s("p",null,[n("Once you know the player's "),s("code",null,"properties"),n(", "),s("code",null,"methods"),n(", and "),s("code",null,"events"),n(", writing plugins is very simple.")],-1),t=s("p",null,"You can load the plugin functions when instantiated.",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a(`
js
function myPlugin(art) {
    console.info(art);
    return {
        name: 'myPlugin',
        something: 'something',
        doSomething: function () {
            console.info('doSomething');
        },
    };
}

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    plugins: [myPlugin],
});

art.on('ready', () => {
    console.info(art.plugins.myPlugin);
});

Here's the translation of the provided text into English while preserving the Markdown formatting:

A function that allows loading plugins after instantiation

`,3),y=s("div",{className:"run-code"},"▶ Run Code",-1),i=a(`
js
function myPlugin(art) {
    console.info(art);
    return {
        name: 'myPlugin',
        something: 'something',
        doSomething: function () {
            console.info('doSomething');
        },
    };
}

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.plugins.add(myPlugin);

art.on('ready', () => {
    console.info(art.plugins.myPlugin);
});

For example, I want to write a plugin that displays an image advertisement after the video is paused.

js
function adsPlugin(option) {
    return (art) => {
        art.layers.add({
            name: 'ads',
            html: \`<img style="width: 100px" src="\${option.url}">\`,
            style: {
                display: 'none',
                position: 'absolute',
                top: '20px',
                right: '20px',
            },
        });

        function show() {
            art.layers.ads.style.display = 'block';
        }

        function hide() {
            art.layers.ads.style.display = 'none';
        }

        art.controls.add({
            name: 'hide-ads',
            position: 'right',
            html: 'Hide Ads',
            tooltip: 'Hide Ads',
            click: hide,
            style: {
                marginRight: '20px'
            }
        });

        art.controls.add({
            name: 'show-ads',
            position: 'right',
            html: 'Show Ads',
            tooltip: 'Show Ads',
            click: show,
        });

        art.on('play', hide);
        art.on('pause', show);

        return {
            name: 'adsPlugin',
            show,
            hide
        };
    }
}

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    plugins: [
        adsPlugin({
            url: '/assets/sample/layer.png'
        })
    ],
});
`,3),A=[r,c,t,F,D,y,i];function C(b,u,m,d,h,g){return o(),p("div",null,A)}const f=l(e,[["render",C]]);export{_ as __pageData,f as default};