[Bug]: video component source change hls media can not play

[mrsleepman]

[Bug]: video component source change hls media can not play

[mrsleepman]

I tried this code, changed the playback source, and it works fine.

document.addEventListener('DOMContentLoaded', () => {
const sources = [
    'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
    'https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/hls/BigBuckBunny.m3u8'
];
let currentSourceIndex = 0;
const video = document.querySelector('video');

const player = new Plyr(video, {captions: {active: true, update: true, language: 'en'}});

function loadSource() {
    if (!Hls.isSupported()) {
        video.src = sources[currentSourceIndex];
    } else {
        const hls = new Hls();
        hls.loadSource(sources[currentSourceIndex]);
        hls.attachMedia(video);
        window.hls = hls;
    }
}

loadSource();

document.querySelector('#switch-source').addEventListener('click', () => {
    currentSourceIndex = (currentSourceIndex + 1) % sources.length;
    loadSource();
});

window.player = player;
});

So I tried the same code instance.hls = createHls(element, sourceUrl, null);

However, the expected effect was not achieved, and the playback source could not be changed for playback. In fact, html rendering did not work properly.

So ultimately my temporary solution was to always re-render the component for an HLS type of playback source. That worked fine.

Due to my own technical limitations, I did not conduct more in-depth debugging. I hope this preliminary debugging information is helpful.

[stsrki]

Thank you for the extra information. We will hopefully start working on it soon.