my issue is subtitle doesn't display in google chrome

[amirdks]

Environment

• oplayer/core: //1.2.31
• oplayer/ui: // 1.2.31
• oplayer/hls: // 1.2.24.beta.0
• platform: // ubuntu 22.04.4 LTS
• browser: // firefox 122.0.1

problem with subtitle

I'm using hls player everything works well in Firefox browser but when i try to watch video in google chrome subtitle doesn't show at all.
i tried several ways to solve it but i can't,
please help me to fix.

[shiyiya]

More information required. Reproducible address/video and subtitles/full code

[amirdks]

This is my full code for oplayer :

`let playerEl = document.querySelector('#player')
if (elementExists(playerEl)) {
let watermarkUrl = playerEl.getAttribute('watermark-url');
let subtitleUrl = playerEl.getAttribute('subtitle-url');
let videoPoster = playerEl.getAttribute('video-poster');
let videoHls = playerEl.getAttribute('hls-url');
let videoTitle = playerEl.getAttribute('video-title');
let subtitleObj = {}
if (subtitleUrl !== "None") {
subtitleObj = {
name: 'فارسی',
default: true,
src: subtitleUrl
}
}

const player = OPlayer.make(playerEl, {
    // isLive: true,
    lang: 'zh-CN',
    source: {
        src: videoHls,
        poster: videoPoster,
        title: videoTitle
    },
    videoAttr: {
        // crossOrigin: "anonymous"
    }
})
    .use([
        OUI(
            {
                fullscreen: true,
                coverButton: true,
                miniProgressBar: true,
                autoFocus: true,
                forceLandscapeOnFullscreen: true,
                screenshot: false,
                pictureInPicture: false,
                showControls: 'always', // 'played'
                keyboard: {focused: true, global: false},
                settings: [],
                speeds: ['2.0', '1.75', '1.25', '1.0', '0.75', '0.5'],
                // slideToSeek: 'none', // 'always' | 'long-touch'
                topSetting: false, //show setting icon on appbar
                subtitle: {
                    color: '#ffffff',
                    fontSize: 17,
                    fontFamily: 'IRANSans',
                    background: true,
                    source: [
                        subtitleObj,
                    ]
                },
                theme: {
                    primaryColor: '#03b97c',
                    watermark: {
                        src: watermarkUrl,
                        style: {
                            position: "absolute",
                            top: '15px',
                            right: '15px',
                            width: '35px',
                            height: 'auto'
                        },
                        attrs: {
                            class: 'oplayer-custom-watermark',
                            crossOrigin: "anonymous"
                        }
                    }
                },
                controlBar: {back: "always"},
                icons: {
                    // https://lucide.dev/icons/gauge
                    play: `<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>`,
                    pause: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pause"><rect width="4" height="16" x="6" y="4"/><rect width="4" height="16" x="14" y="4"/></svg>`,
                    volume: [
                        `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-volume-2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg>`,
                        `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-volume-x"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="22" x2="16" y1="9" y2="15"/><line x1="16" x2="22" y1="9" y2="15"/></svg>`
                    ],
                    // setting: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>`,
                    fullscreen: [
                        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>`,
                        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minimize"><path d="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/><path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/></svg>`
                    ],
                }
            }),
        OHls({
            forceHLS: true,
            withBitrate: true,
            active(instance, lib) {
                // console.log("hls active");
                instance.on(lib.Events.MANIFEST_PARSED, (...payload) => {
                    // console.log(payload);
                });
            }
        }),
    ])
    .create();

player.on("loaderchange", (e) => {
    // console.log(e);
});

let forward = document.createElement("button");
forward.className = "forward";
forward.innerHTML =
    '<svg viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.444 3.685A10 10 0 0 1 18 4h-2v2h4a1 1 0 0 0 1-1V1h-2v1.253A12 12 0 1 0 24 12h-2A10 10 0 1 1 6.444 3.685ZM22 4v3h-3v2h4a1 1 0 0 0 1-1V4h-2Zm-9.398 11.576c.437.283.945.424 1.523.424s1.083-.141 1.513-.424c.437-.29.774-.694 1.009-1.215.235-.527.353-1.148.353-1.861 0-.707-.118-1.324-.353-1.851-.235-.527-.572-.932-1.009-1.215-.43-.29-.935-.434-1.513-.434-.578 0-1.086.145-1.523.434-.43.283-.764.688-.999 1.215-.235.527-.353 1.144-.353 1.851 0 .713.118 1.334.353 1.86.236.522.568.927.999 1.216Zm2.441-1.485c-.222.373-.528.56-.918.56s-.696-.187-.918-.56c-.222-.38-.333-.91-.333-1.591 0-.681.111-1.208.333-1.581.222-.38.528-.57.918-.57s.696.19.918.57c.222.373.333.9.333 1.581 0 .681-.111 1.212-.333 1.59Zm-6.439-3.375v5.14h1.594V9.018L7 9.82v1.321l1.604-.424Z" fill="currentColor"></path></svg>';
forward.onclick = function () {
    player.seek(player.currentTime + 10);
};

let backward = document.createElement("button");
backward.className = "backward";
backward.innerHTML =
    '<svg viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.02 2.048A10 10 0 1 1 2 12H0a12 12 0 1 0 5-9.747V1H3v4a1 1 0 0 0 1 1h4V4H6a10 10 0 0 1 5.02-1.952ZM2 4v3h3v2H1a1 1 0 0 1-1-1V4h2Zm12.125 12c-.578 0-1.086-.141-1.523-.424-.43-.29-.764-.694-.999-1.215-.235-.527-.353-1.148-.353-1.861 0-.707.118-1.324.353-1.851.236-.527.568-.932.999-1.215.437-.29.945-.434 1.523-.434s1.083.145 1.513.434c.437.283.774.688 1.009 1.215.235.527.353 1.144.353 1.851 0 .713-.118 1.334-.353 1.86-.235.522-.572.927-1.009 1.216-.43.283-.935.424-1.513.424Zm0-1.35c.39 0 .696-.186.918-.56.222-.378.333-.909.333-1.59s-.111-1.208-.333-1.581c-.222-.38-.528-.57-.918-.57s-.696.19-.918.57c-.222.373-.333.9-.333 1.581 0 .681.111 1.212.333 1.59.222.374.528.56.918.56Zm-5.521 1.205v-5.139L7 11.141V9.82l3.198-.8v6.835H8.604Z" fill="currentColor"></path></svg>';
backward.onclick = function () {
    player.seek(player.currentTime - 10);
};

player.$root.appendChild(backward);
player.$root.appendChild(forward);

}`

Video plays without problem but my subtitle just display in desktop and ios, in android phones there is no subtitle. In requests i got 200 status code for subtitle file url response.
Can anyone help me fix this issue?

[shiyiya]

what's ur subtitle url

[amirdks]

what's ur subtitle url

It's the subtitle

subtitle_link

[shiyiya]

work fine. // mac chrome

[amirdks]

work fine. // mac chrome

I tried with other browsers i found out that subtitle won't play in chrome mobile but in Firefox it's play fine. I checked inspect of Chrome mobile and the subtitle section doesn't generate any element for subtitle.
Can you send me your configa for subtitle? Thanks.

[shiyiya]

I tried with other browsers i found out that subtitle won't play in chrome mobile but in Firefox it's play fine. I checked inspect of Chrome mobile and the subtitle section doesn't generate any element for subtitle. Can you send me your configa for subtitle? Thanks.

https://ohplayer.netlify.app/playground/

[amirdks]

I tried with other browsers i found out that subtitle won't play in chrome mobile but in Firefox it's play fine. I checked inspect of Chrome mobile and the subtitle section doesn't generate any element for subtitle. Can you send me your configa for subtitle? Thanks.

https://ohplayer.netlify.app/playground/

it's works with mp4 video playing but in hls mode it's not even play the video and subtitle doesn't display. it's my configs in playground please test these configs for your self.

[shiyiya]

try disable hls subtitle controll and forceHls

[amirdks]

try disable hls subtitle controll and forceHls

i find the problem. The problem is that when we set a subtitle as default, it is not displayed in google chrome, but if we disable the default and select it manually, it will be displayed correctly.
I wanted to know if there is a way to activate the desired subtitle by default and display it without any problem ?

[amirdks]

I fixed this temporarily with the following code.
player.on("loaderchange", (e) => { let persianSubEls = document.querySelectorAll('div[role="menuitemradio"][aria-checked="false"][data-index="1"]') persianSubEls.forEach(element => { if (element.textContent.trim() === 'فارسی') { element.click() } }) });

[shiyiya]

Fixed @amirdks

pnpm add @oplayer/core@1.2.32