Blank Screen only
Closed this issue ยท 20 comments
Working fine in chrome but showing blank in OBS plz fix asap
<script> // @ts-check const mediaFolder = /** @type {string} */ ("C:\\Users\\shaik\\Desktop\\video\\"); const initMediaFiles = /** @type {string[]} */ (["Parrot - 21309.mp4", "Titmouse - 30486.mp4", "romantic_-_103946 (Original).mp4", "swans_-_3109 (Original).mp4", "tit_-_32959 (Original).mp4"]); const transitionVideo = /** @type {string} */(""); const playOnlyOne = /** @type {boolean} */ (false); const loopFirstVideo = /** @type {boolean} */ (false); const transitionVideoPath = /** @type {string} */ (`${mediaFolder}${transitionVideo}`);let isTransition = true;
/**
- shuffleArr takes in an array and returns a new array in random order
- @param {any[]} a any array to be shuffled
- @return {any[]} shuffled array
*/
function shuffleArr(a) {
var j, x, i;
for (i = a.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
x = a[i];
a[i] = a[j];
a[j] = x;
}
return a;
}
/**
- prependFolderToFiles simply adds a folder path to a list of files and returns
- the new array
- @param {string} folder folder path, must end with a trailing slash
- @param {string[]} files array of file names
- @returns {string[]} new array with full path to files
*/
function prependFolderToFiles(folder, files) {
return files.map((file) =>${folder}${file}
);
}
/**
- storePlaylistState takes in a playlist and stores it into localstorage
- @param {string[]} state
- @returns {void}
*/
function storePlaylistState(state) {
localStorage.setItem('playlist', JSON.stringify(state));
}
/**
- getNewPlaylist creates a newly randomize list of files and stores it in
- localstorage
- @returns {string[]} a new playlist
*/
function getNewPlaylist() {
const playlist = prependFolderToFiles(
mediaFolder,
shuffleArr(initMediaFiles),
);
storePlaylistState(playlist);
return playlist;
}
/**
- getPlaylist will get the playlist state form localstorage or create a new one
- @returns {string[]} current playlist state
*/
function getPlaylist() {
let playlist = [];
try {
playlist = JSON.parse(localStorage.getItem('playlist'));
} catch {
console.log('playlist empty!');
}
if (!playlist || playlist.length === 0) {
playlist = getNewPlaylist();
}
return playlist;
}
/**
- progressPlaylistState removes the last item from the playlist and stores the
- updated version in localstorage
- @returns {void}
*/
function progressPlaylistState() {
const playlist = getPlaylist();
playlist.pop();
storePlaylistState(playlist);
}
/**
- getNextPlaylistItem returns the next item in the playlist unless it matches
- the last thing played then it moves that item to the end and returns the
- next item after that
- @returns {string} the next item in the playlist
*/
function getNextPlaylistItem() {
const playlist = getPlaylist();
let mediaItem = playlist.pop();
// check if we played this mediaItem last run
console.log({ lastPlayed: localStorage.getItem('lastPlayed'), mediaItem });
if (localStorage.getItem('lastPlayed') === mediaItem) {
// moves the repeated item to the end so its not skipped entirely
storePlaylistState([mediaItem].concat(playlist));
mediaItem = getNextPlaylistItem();
}
return mediaItem;
}
/**
- playNext is the core function of this project and handles the loading and
- playing of the alternating video players
- @param {HTMLMediaElement} player currently playing video player
- @param {HTMLMediaElement} nextPlayer the next video player to be played
- @returns {void}
*/
function playNext(player, nextPlayer) {
const currentMp4Source = player.getElementsByClassName('mp4Source')[0];
const nextMp4Source = nextPlayer.getElementsByClassName('mp4Source')[0];
const currentVideo = currentMp4Source.getAttribute('src');
if (currentVideo !== transitionVideoPath) {
localStorage.setItem('lastPlayed', currentVideo);
}
let video = localStorage.getItem('lastPlayed');
if (!loopFirstVideo && (!transitionVideo || !isTransition)) {
video = getNextPlaylistItem();
console.log(next video: ${video}
);
}
// TODO: we can use this opacity to crossfade between mediaFiles
player.style['z-index'] = 1;
player.style['opacity'] = '1';
nextPlayer.style['z-index'] = 0;
nextPlayer.style['opacity'] = '0';
if (transitionVideo && transitionVideo !== '' && isTransition) {
video = transitionVideoPath;
isTransition = false;
} else {
isTransition = true;
}
nextMp4Source.setAttribute('src', video);
nextPlayer.load();
nextPlayer.pause();
if (playOnlyOne) {
// Remove videos after playing once
player.onended = () => {
currentMp4Source.removeAttribute('src');
nextMp4Source.removeAttribute('src');
player.load();
nextPlayer.load();
};
}
player.play();
}
</script>
<style>
html,
body {
margin: 0;
padding: 0;
}
</style>
const player2 = /** @type {HTMLMediaElement} */ (
document.getElementById('videoPlayer2')
);
player.addEventListener(
'ended',
() => {
if (!loopFirstVideo) {
progressPlaylistState();
}
playNext(player2, player);
},
{
passive: true,
},
);
player2.addEventListener(
'ended',
() => {
if (!loopFirstVideo) {
progressPlaylistState();
}
playNext(player, player2);
},
{
passive: true,
},
);
/***** Initial load *****/
const mp4Source = player.getElementsByClassName('mp4Source')[0];
let video = getNextPlaylistItem();
// have to move the state forward after getting the first video
progressPlaylistState();
mp4Source.setAttribute('src', video);
player.load();
playNext(player, player2);
</script>
Same, guessing obs changed there browser settings,
Also have this problem. Actually must have been the latest update. Didn't work for like 2 to 3 weeks now I think
some changes were made for browser source and chromium was updated https://github.com/obsproject/obs-studio/releases/tag/27.2.3
let's wait for developer update
Yea i just haven't had free time to look at this yet. I'm trying to get to it soon
This issue here: obsproject/obs-studio#5932
Further discussion on this thread: https://obsproject.com/forum/threads/27-2-browser-source-no-longer-html-css-will-no-longer-load-local-images-with-absolute-paths.153581/
Hi there - thanks for the report. I see what's happening - our custom URL handler assumes relative paths, so it prepends the path of the HTML file before inserting the location of the file. I'll see what I can do. Hopefully I'll get a fix together in time for 27.2.1 or 27.2.2.
TL;DR
So sounds like a workaround for everyone in this thread is to edit the HTML file to use relative paths for their videos instead of the absolute paths.
@retroNUC ah nice this is super helpful! I noticed another overlay I made that used a custom font wasn't loading the font. So i was confused as to what OBS had changes that would break something that simple.
Hopefully, it'll get fixed in the next bug fix release of OBS. I'm going to wait until then before I mess with the code here as I don't want to chase a moving target
Hey Jared,
I've read the attached threads and comments, but i'm not quite seeing what the filepath needs to be changed to. Right now for example, the line within my HTML file is:
const mediaFolder = /** @type {string} */ ("C:\\Users\\TerrorVan\\Desktop\\Pop-Up Video\\");
What should it be manually changed to for it to work correctly?
I've read the attached threads and comments, but i'm not quite seeing what the filepath needs to be changed to. Right now for example, the line within my HTML file is:
const mediaFolder = /** @type {string} */ ("C:\\Users\\TerrorVan\\Desktop\\Pop-Up Video\\");
What should it be manually changed to for it to work correctly?
The issue is if you're going to be using relative paths: I don't know. It depends on where your videos are relative to your OBS installation. The easiest thing would be to move the video folder to the same as your OBS and try something like
const mediaFolder = /** @type {string} */ ("./Pop-Up video");
Alternatively, there's a comment in the obs forum post that shows something like this:
const mediaFolder = /** @type {string} */ ("http:\\\\absolute\\C:\\Users\\TerrorVan\\Desktop\\Pop-Up Video\\");
Both of these methods I haven't tested so it might take some playing around with the string value to get it to match up with the folder but the second one is what I might have to update the code to do if OBS doesn't put out a fix
I think this is a dupe of #33 so I'm going to close this.
Try the newest release https://github.com/UpDownLeftDie/obs-random-videos/releases/tag/v3.3.0 and comment back if you're still having issues
Sorry to say but still not working.
OBS 27.2.3 64 Bit
Black Screen Only
Working Fine In Chrome.
Code :
<script> // @ts-check const initMediaFiles = /** @type {string[]} */ (["http:\\\\absolute\\C:\\Users\\shaik\\Desktop\\New folder (4)\\Ave - 26974.mp4", "http:\\\\absolute\\C:\\Users\\shaik\\Desktop\\New folder (4)\\Bird - 44017.mp4", "http:\\\\absolute\\C:\\Users\\shaik\\Desktop\\New folder (4)\\Bullfinch - 2797.mp4", "http:\\\\absolute\\C:\\Users\\shaik\\Desktop\\New folder (4)\\Titmouse - 30486.mp4", "http:\\\\absolute\\C:\\Users\\shaik\\Desktop\\New folder (4)\\bird_-_76779 (Original).mp4", "http:\\\\absolute\\C:\\Users\\shaik\\Desktop\\New folder (4)\\long-tailed_tit_-_21490 (Original).mp4"]); const transitionVideoPath = /** @type {string} */(""); const playOnlyOne = /** @type {boolean} */ (false); const loopFirstVideo = /** @type {boolean} */ (false); let isTransition = true;/**
- shuffleArr takes in an array and returns a new array in random order
- @param {any[]} originalArray any array to be shuffled
- @return {any[]} shuffled array
*/
function shuffleArr(originalArray) {
let a = [...originalArray]
let j, x, i;
for (i = a.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
x = a[i];
a[i] = a[j];
a[j] = x;
}
return a;
}
/**
- storePlaylistState takes in a playlist and stores it into localstorage
- @param {string[]} state
- @returns {void}
*/
function storePlaylistState(state) {
localStorage.setItem('playlist', JSON.stringify(state));
}
/**
- getNewPlaylist creates a newly randomize list of files and stores it in
- localstorage
- @returns {string[]} a new playlist
*/
function getNewPlaylist() {
const playlist = shuffleArr(initMediaFiles);
storePlaylistState(playlist);
return playlist;
}
/**
- getPlaylist will get the playlist state form localstorage or create a new one
- @returns {string[]} current playlist state
*/
function getPlaylist() {
let playlist = [];
try {
playlist = JSON.parse(localStorage.getItem('playlist'));
} catch {
console.log('playlist doesn't exist yet!');
}
if (!playlist || playlist.length === 0 || typeof playlist.pop === 'undefined') {
playlist = getNewPlaylist();
}
return playlist;
}
/**
- progressPlaylistState removes the last item from the playlist and stores the
- updated version in localstorage
- @returns {void}
*/
function progressPlaylistState() {
const playlist = getPlaylist();
playlist.pop();
storePlaylistState(playlist);
}
/**
- getNextPlaylistItem returns the next item in the playlist unless it matches
- the last thing played then it moves that item to the end and returns the
- next item after that
- @returns {string} the next item in the playlist
*/
function getNextPlaylistItem() {
const playlist = getPlaylist();
let mediaItem = playlist.pop();
// check if we played this mediaItem last run
console.log({ lastPlayed: localStorage.getItem('lastPlayed'), mediaItem, wasLastPlayed: localStorage.getItem('lastPlayed') === mediaItem });
if (localStorage.getItem('lastPlayed') === mediaItem) {
// moves the repeated item to the end so its not skipped entirely
storePlaylistState([mediaItem].concat(playlist));
mediaItem = getNextPlaylistItem();
}
return mediaItem;
}
/**
- playNext is the core function of this project and handles the loading and
- playing of the alternating video players
- @param {HTMLMediaElement} player currently playing video player
- @param {HTMLMediaElement} nextPlayer the next video player to be played
- @returns {void}
*/
function playNext(player, nextPlayer) {
const currentMp4Source = player.getElementsByClassName('mp4Source')[0];
const nextMp4Source = nextPlayer.getElementsByClassName('mp4Source')[0];
const currentVideo = currentMp4Source.getAttribute('src');
if (currentVideo !== transitionVideoPath) {
localStorage.setItem('lastPlayed', currentVideo);
}
let video = localStorage.getItem('lastPlayed');
if (!loopFirstVideo && (!transitionVideoPath || !isTransition)) {
video = getNextPlaylistItem();
console.log(next video: ${video}
);
}
// TODO: we can use this opacity to crossfade between mediaFiles
player.style['z-index'] = 1;
player.style['opacity'] = '1';
nextPlayer.style['z-index'] = 0;
nextPlayer.style['opacity'] = '0';
if (transitionVideoPath && transitionVideoPath !== '' && isTransition) {
video = transitionVideoPath;
isTransition = false;
} else {
isTransition = true;
}
nextMp4Source.setAttribute('src', video);
nextPlayer.load();
nextPlayer.pause();
if (playOnlyOne) {
// Remove videos after playing once
player.onended = () => {
currentMp4Source.removeAttribute('src');
nextMp4Source.removeAttribute('src');
player.load();
nextPlayer.load();
};
}
player.play();
}
</script>
<style>
html,
body {
margin: 0;
padding: 0;
}
</style>
const player2 = /** @type {HTMLMediaElement} */ (
document.getElementById('videoPlayer2')
);
player.addEventListener(
'ended',
() => {
if (!loopFirstVideo) {
progressPlaylistState();
}
playNext(player2, player);
},
{
passive: true,
},
);
player2.addEventListener(
'ended',
() => {
if (!loopFirstVideo) {
progressPlaylistState();
}
playNext(player, player2);
},
{
passive: true,
},
);
/***** Initial load *****/
const mp4Source = player.getElementsByClassName('mp4Source')[0];
let video = getNextPlaylistItem();
// have to move the state forward after getting the first video
progressPlaylistState();
mp4Source.setAttribute('src', video);
player.load();
playNext(player, player2);
</script>
@shaikhfaijan you need to zip me you're entire folder cause pasting the code that i wrote doesn't help me
https://drive.google.com/file/d/1GbA1bf8o8cSdt4uaYp2LzrjSzj0tLIpd/view?usp=sharing
Plz, Check the zip file.
OBS 27.2.3
Are you sure your 6 videos are located at:
C:\Users\shaik\Desktop\New folder (4)\
I made a folder on my desktop named New folder (4)
and put the contents of your zip in there, changed shaik
to my username in the file paths and it worked.
If it's still not working then your localstorage state might be stuck and you'll have to open remote debugging and Clear site data
in chrome dev tools
Or wait till I try to get some more fixes out
Yes, I am sure my files are in the same folder.
I have cleared application data for http://localhost:9090/
I am ready to share my TeamViewer or if you want a screen record please tell me.
Thanks
Bro its working fine in my other PC ๐
I follow the same steps and the version is also same.
OMG! its also working on my PC. I have hit 30+ times refresh button now it's working. Let's fix this issue in the next update.
Glad to hear that was the issue. Yea 3.3.1 I plan to try to figure something out so people don't have to mash the refresh lol.
For future reference: I'll respond quicker on Guilded (link on the main page readme)