plyr - Plyr.io 上未显示带有 HLS 视频音频的音频组切换器

Question

我正在使用最新版本的 Hls.js 和 plyr.io 。
HLS 有两种音频语言，但 plyr.io 播放器中未显示音频切换器。

大师.m3u8：

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",LANGUAGE="es",NAME="lang Spanish",AUTOSELECT=YES, DEFAULT=YES,URI="a0_es/list.m3u8"
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",LANGUAGE="en",NAME="lang English",AUTOSELECT=NO,  DEFAULT=NO,URI="a0_en/list.m3u8"
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=10000,RESOLUTION=426x240,AUDIO="audio"
v0_240p/list.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=420000,RESOLUTION=640x360,AUDIO="audio"
v0_360p/list.m3u8

页面中的脚本：

document.addEventListener('DOMContentLoaded', () => {
    const source = 'https://example.com/1500-x-xd12c26417dbf0a4523762ee558c221be/master.m3u8';
    const video = document.querySelector('video');
    
    // For more options see: https://github.com/sampotts/plyr/#options
    // captions.update is required for captions to work with hls.js
    const player = new Plyr(video, {captions: {active: true, update: true, language: 'en'}});
    
    if (!Hls.isSupported()) {
        video.src = source;
    } else {
        // For more Hls.js options, see https://github.com/dailymotion/hls.js
        const hls = new Hls();
        hls.loadSource(source);
        hls.attachMedia(video);
        window.hls = hls;
        
        // Handle changing captions
        player.on('languagechange', () => {
            // Caption support is still flaky. See: https://github.com/sampotts/plyr/issues/994
            setTimeout(() => hls.subtitleTrack = player.currentTrack, 50);
        });
    }
    
    // Expose player so it can be used from the console
    window.player = player;
});

JavaScript 库：

https://cdn.polyfill.io/v2/polyfill.min.js
dist/plyr.min.js
https://cdn.jsdelivr.net/npm/hls.js@latest

注意：音频组可以毫无问题地显示在 video.js 中。

标签： plyrhls.js