ArtPlayer icon indicating copy to clipboard operation
ArtPlayer copied to clipboard

Chrome 104 之後,HLS.js 無法顯示字幕

Open amowu opened this issue 1 year ago • 4 comments

Expected behaviour

customType 使用 hls.js 時,播放 *.m3u8 應該要能正常顯示 subtitle.url 字幕

Actual behaviour

Chrome 104 之後,*.m3u8 無法顯示 subtitle.url 字幕,但是 *.mp4 可以正常顯示字幕

Steps to reproduce

  1. 使用官方 hls.js 範例+字幕:
var art = new Artplayer({
    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    customType: {
        m3u8: function (video, url) {
            if (Hls.isSupported()) {
                const hls = new Hls();
                hls.loadSource(url);
                hls.attachMedia(video);
            } else {
                const canPlay = video.canPlayType('application/vnd.apple.mpegurl');
                if (canPlay === 'probably' || canPlay == 'maybe') {
                    video.src = url;
                } else {
                    art.notice.show = '不支持播放格式:m3u8';
                }
            }
        },
    },
    subtitle: {
        url: "https://artplayer.org/assets/sample/subtitle.srt",
        type: "srt",
        style: {
            color: "#fe9200",
            fontSize: "20px"
        },
        encoding: "utf-8"
    },
});
  1. 播放影片,發現沒有字幕,但是 url 換成 *.mp4、或是 Chrome 版本降回 103,可以正常播放字幕

Environment

  • Browser: Chrome
  • Version: 104
  • Operating System: macOS
  • Version: Monterey

Console errors (if any)

Link to where the bug is happening

https://codesandbox.io/s/sad-sanne-vqt7xo

amowu avatar Aug 10 '22 08:08 amowu

似乎不知道哪里出问题了,在 codesandbox 上确实不显示字幕,但我在官网上测试确实正常的:demo

zhw2590582 avatar Aug 10 '22 10:08 zhw2590582

似乎不知道哪里出问题了,在 codesandbox 上确实不显示字幕,但我在官网上测试确实正常的:demo

找到原因了,如果 hls.js 用 8.0.0-beta.3 可以成功顯示字幕,可是奇怪的是這個版本只有在 cdnjs 上有,npm 只到 1.2.1-0.canary.8561

amowu avatar Aug 11 '22 01:08 amowu

似乎不知道哪里出问题了,在 codesandbox 上确实不显示字幕,但我在官网上测试确实正常的:demo

找到原因了,如果 hls.js 用 8.0.0-beta.3 可以成功顯示字幕,可是奇怪的是這個版本只有在 cdnjs 上有,npm 只到 1.2.1-0.canary.8561

順便問一下 hls.js https://github.com/video-dev/hls.js/issues/4841

amowu avatar Aug 11 '22 01:08 amowu

似乎不知道哪里出问题了,在 codesandbox 上确实不显示字幕,但我在官网上测试确实正常的:demo

找到原因了,如果 hls.js 用 8.0.0-beta.3 可以成功顯示字幕,可是奇怪的是這個版本只有在 cdnjs 上有,npm 只到 1.2.1-0.canary.8561

順便問一下 hls.js video-dev/hls.js#4841

目前測試下來,[email protected] 是最後可以 work 的版本,再上去 1.0.0 之後都有這問題

amowu avatar Aug 11 '22 08:08 amowu

似乎只和hls.js的版本有关,播放器本身无法修复该问题

zhw2590582 avatar Sep 19 '22 01:09 zhw2590582