import{_ as l,o as p,c as h,j as s,a as i,ak as a}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Writing Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1772946913000}'),e={name:"en/advanced/plugin.md"};function k(t,n,E,r,d,g){return p(),h("div",null,n[0]||(n[0]=[s("h1",{id:"writing-plugins",tabindex:"-1"},[i("Writing Plugins "),s("a",{class:"header-anchor",href:"#writing-plugins","aria-label":'Permalink to "Writing Plugins"'},"​")],-1),s("p",null,[i("Once you are familiar with the player's "),s("code",null,"properties"),i(", "),s("code",null,"methods"),i(", and "),s("code",null,"events"),i(", writing a plugin becomes a very straightforward task.")],-1),s("p",null,"You can load a plugin function during instantiation.",-1),s("div",{className:"run-code"},"▶ Run Code",-1),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);
});

You can also load a plugin function after instantiation.

`,2),s("div",{className:"run-code"},"▶ Run Code",-1),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, let's say I want to write a plugin that displays an image ad when the video is paused.

`,2),s("div",{className:"run-code"},"▶ Run Code",-1),a(`
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'
        })
    ],
});
`,1)]))}const b=l(e,[["render",k]]);export{y as __pageData,b as default};