Question / Help JavaScript not working in Browser Source

[Vaesive]

Hey all,

I have a JS that loads up a YouTube Playlist and plays the clips in a random order. Works fine in a browser and used to work in OBS but stopped in a recent-ish update (I cannot recall the number but the script worked fine a couple months ago). I was thinking something just got broken in OBS and would be resolved in an update or two but it doesn't seem to be the case.

Any ideas would be greatly appreciated. Tried toggling Hardware Acceleration but no luck.

Code below:

<div id="player"></div>
<script>
    var playlistId = "PL0q93Rkkmx_voo4xXagb8SCU_IHdK7Uih";
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";

    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '360',
            width: '640',
            playerVars: {
                autoplay: 1,
                modestbranding:0,
                controls:0,
                iv_load_policy: 3,
                enablejsapi: 1,
                showinfo: 0,
                disablekb: 1
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    var playlistArray;
    var playListArrayLength;
    var maxNumber;

    var oldNumber = 0;
    var NewNumber = 0;

    function newRandomNumber() {
        oldNumber = NewNumber;
        NewNumber = Math.floor(Math.random() * maxNumber);
        if (NewNumber == oldNumber) {
            newRandomNumber();
        } else {
            return NewNumber;
        }
    }

function onPlayerReady(event) {
    player.setPlaybackQuality('large');
    player.loadPlaylist({
        'listType': 'playlist',
        'list': playlistId
    });
}

var firstLoad = true;
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        player.playVideoAt(newRandomNumber());
    } else {
        if (firstLoad && event.data == YT.PlayerState.PLAYING) {
            firstLoad = false;
            playlistArray = player.getPlaylist();
            playListArrayLength = playlistArray.length;
            maxNumber = playListArrayLength;
            NewNumber = newRandomNumber();
            player.playVideoAt(newRandomNumber());
        }
    }
}  
 
</script>

 

[WizardCM]

Are you loading this as a "Local file" or in a hosted webpage (even locally it's recommended).

To expose Chrome Dev Tools for your browser sources, add --remote-debugging-port=1234 to your OBS Studio shortcut (where 1234 is your preferred port number) and navigate to http://localhost:1234/ in Chrome to connect to the session

 

[Vaesive]

Are you loading this as a "Local file" or in a hosted webpage (even locally it's recommended).

To expose Chrome Dev Tools for your browser sources, add --remote-debugging-port=1234 to your OBS Studio shortcut (where 1234 is your preferred port number) and navigate to http://localhost:1234/ in Chrome to connect to the session

I'm loading it as a local file with a direct path to the path on my PC. I'll give this a shot once I get home.

 

[Vaesive]

Doesn't seem to do anything. It works occasionally but 9/10 it just spins in the source. File works fine running locally in a browser.