How do I destroy and remake Video Embed with document.getElement & addEventListener?

So I have been trying to think of a way to fix the player not starting issue. Here is the code that I have come up with…

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div id="SamplePlayerDivID"></div>
<script type="text/javascript">
var options = {
width: 854,
height: 480,
channel: "mainchannel",
};
var player = new Twitch.Player("SamplePlayerDivID", options);

player.addEventListener(Twitch.Player.OFFLINE, function () {
player.setChannel('altchannel');
console.log('Switching Channel');

setTimeout(function(){
player.setChannel('mainchannel');
console.log('Return to main channel');

}, 30000);  
    
});
</script>

This script will first load up the main channel and then if the main channel disconnects it will then switch to another channel which resets the player, then after 30 seconds switches back to the main channel which will then start up to play again.

I was told its better to destroy and remake the player instead of switching channels.

They also said you can do this with document.getElementById(‘thing’).textContent = ‘’; sort of a thing, but I dont code javascript, trying to figure out how to make it work and I’m alittle lost. I would assume a javascripter would be able to solve this problem of remaking the player pretty easy. If anyone can lend a hand, would be grateful - Thanks!

Twitch are actively working to fix this issue, so you should wait for them to resolve this rather than try and code around it as if you don’t know what you’re doing it’s possible to have memory leaks if you don’t handle things right, and it could be a poor experience to anyone on your site having embeds keep being removed and created.

From my point of view, embeds have had this issue for a very long time. I can see it in my stats, I go from ReRun to live and all the viewers get dumped which then overtime gets rebuilt back to parity.

Its either the embeds haven’t been restarting correctly, or they have something that doesnt count viewers after a restart or offline to live with out a refresh.

If they fix the problem, then this code will not trigger and thus no issues with possible memory problems.

Depending on how your viewers have the embed open, it could be the browser unloading the player. For example if a player is muted and not a primary tab Chrome will often unload the player (and going from ReRun to live could cause a period where the stream is offline, and so unless the user is actively on your page it could be the browser simply unloads the player until they visit the page).

Twitch don’t disclose how viewers are counted, all we know is that there is some protection against view bots, or viewers watching multiple embeds, not being counted as a viewer to prevent abuse. So depending on your site there’s the possibility of it running into tha, we simply don’t know the specifics of the system but it may be what is impacting viewer count when switching states.

But until then you could be negatively impacting your users. If you still wish to do this then I suggest watching some introductory JS videos, particularly on DOM interaction, so that you can learn about how to do this and the potentially issues associated with this approach.

About 2 years ago, it wasnt like this, it would keep the viewer number from a rerun to live state generally similar. I think when they introduced the streamer offline / disconnect feature it changed it to always resetting and not counting until refresh/reloads happen.