关于和artplayer的交互

[in-out]

感谢alist和artplayer这两个项目

想实现字幕字体大小按照高度可变，参照着
zhw2590582/ArtPlayer#294
#724
试着写了个script，可以粘贴到 全局 》 自定义内容

<script>
    var art;
    function sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time));
    }
    async function wait_loading() {
        art = document.getElementsByClassName('art-video-player')[0];
        while (!art) {
            await sleep(100);
            art = document.getElementsByClassName('art-video-player')[0];
        }
    }
    async function injectScript() {
        await wait_loading();
        art = [...Artplayer.instances][0];
        art.on('ready', resizeFontSize);
        art.on('resize', resizeFontSize);
    }
    function resizeFontSize() {
        console.log('wwwwwww');
        art.subtitle.style({
        	fontSize: `${art.height * 0.05}px`,
        })
    }
    injectScript();
</script>

[bobo4545]

太厲害了，非常感謝

[Gokou-Ruri]

稍微减小了字幕字号尺寸防止太过突兀，但增加了字幕描边（黑色半透明光晕）方便看清字幕：

<script>
    var art;
// 定义一个函数来修改字幕样式
function modifySubtitleStyle() {
    // 获取 ArtPlayer 实例
    const art = [...Artplayer.instances][0];

    // 设置字幕边框样式
    art.subtitle.style({
        // 设置字体边缘颜色为黑色
        textShadow: '1px 1px 5px black,1px 1px 10px black,1px 1px 15px black, 1px 1px 20px black',
        // 其他字幕样式
        fontSize: `${art.height * 0.03}px`,
    });
}

// 定义一个函数来等待 ArtPlayer 加载完成
async function wait_loading() {
    let art = document.getElementsByClassName('art-video-player')[0];
    while (!art) {
        await sleep(100);
        art = document.getElementsByClassName('art-video-player')[0];
    }
}

// 定义一个异步函数来注入脚本并修改字幕样式
async function injectScript() {
    await wait_loading();
    const art = [...Artplayer.instances][0];
    
    // 当 ArtPlayer 准备就绪时调用 modifySubtitleStyle 函数
    art.on('ready', () => {
        modifySubtitleStyle();
    });

    // 当 ArtPlayer 大小改变时再次调用 modifySubtitleStyle 函数
    art.on('resize', () => {
        modifySubtitleStyle();
    });
}

// 定义 sleep 函数
function sleep (time) {
    return new Promise((resolve) => setTimeout(resolve, time));
}

// 调用 injectScript 函数
injectScript();
</script>

原本是想添加字幕区域背景而不是字幕描边的，但后来发现artplayer的字幕背景宽度和播放器宽度相同，太妨碍视频的观看了，就退而求其次使用css的描边效果了。

效果（字体是另外的效果）：