I’ve been doing testing for the last 20 minutes. There definitely seems to be an issue with Firefox. But sadly, after viewing maybe 100 videos, in Chrome I see a message in the status bar: “Waiting for available socket…”
It seems to me that there are processes associated with viewing all of these videos that are not getting turned off/stopped/quit. (In programming, I guess this would be called a “memory leak”?)
When I look in Activity Monitor on my Mac, I see…
Firefox: 49 threads
Chrome: 35 threads
Google Chrome Helper: 84 threads
I have looked everywhere online for a solution but no luck.
Sounds like it is not an uncommon problem, but the only solutions I see is for the user to flush their cookies and cache or hack the browser’s settings.
Is there something I can do programmatically so this doesn’t happen?
(I thought that @Paul_Wilkins help above would fix this issue…)
It sure seems related to me, which is why I asked in my original thread.
That is a tricky one, because it would basically require me posting my whole code base here.
If you Google…
“Waiting for available socket”
“How to fix awaiting for available socket”
“Chrome waiting for available socket”
…then you’ll see this problem is pretty common. Unfortunately the only real solutions I have seen is for the user to go in and clear out cookies and cache or hack Chrome’s settings.
There is a similar issue with Firefox. (Trying to find that error message wording.)
The gist of what I have read is that if you try to load too many videos that it overwhelmes the browser and it locks up. (Which is why I was hoping you Close code would help free up browser resources.)
I think this is a design issue with what Coothead helped me out with…
What I wanted was a way for people to be able to listen to music continuously while viewing photos in a given gallery. My original design was that you go into a gallery, click on a thumbnail, and a new page loaded with an enlarged photo. That worked great for viewing, but it killed the ability to keep listening to a song in the < audio > control in the photo-gallery.php page.
While I think it is really nifty how Coothead showed me how to use CSS to create a photo-gallery.php and photo-details.php page all in one, apparently Firefox and Chrome don’t like that.
I am willing to share code, but I’m afraid this one might require I upload my entire website which is sort of a problem…
Lastly, I did discover last night that when this issue happens - at least in Chrome - if I just did a cmd + R that it would refresh the browser and things would work again, although sometimes you’d lose your place in the gallery, PLUS you can’t expect users to do that as it looks sloppy. (My code doesn’t really work, so when it stops working, please refresh your browser!)
Since the problem occurs after I watch 20-30 separate videos, I’m not sure how to help you recreate that. (Obviously I cannot upload that many videos here?!)
I am willing to try and help you to help me, but this feels like one of those issues that can never be fixed. I know what I have read online so far seems very discouraging…
That is because YouTube is a billion $$$ company with a much more sophisticated website than mine!!
Attached is a stripped down example with a test thumbnail and video from when Coothead was helping me to get videos to also appear on the modal window that he helped me out with…
As mentioned before, based on everything I have read online, it seems the problem is that I am launching numerous videos - using the < video > element - all from the same webpage and that is choking the browser because apparently after you view a video, the “resources” associated with it don’t get dropped. (Classic “memory leak” issue that is a known bug in Chrome and Firefox.
So short of completely re-engineering and re-coding how I have things, I don’t see how to fix this. Of course, maybe other know things that I don’t?!
Since this was supposed to be a “fun” website to share Holiday photos & videos with people I know, and I plan on emailing out a link on Tuesday, I guess “it is what it is”.
At the same time, I think what other here at SitePoint have helped me build is very handy, and I can see lots of places to use this in the future.
So if the architecture of my website is poor, then I am always open to learning new and better ways to do things so can build more scalable sites.
But unless there is some obvious fix, I guess I am at the end of my rope on this photo site…
For a given gallery, there are multiple thumbnails (e.g. 300-400).
The thumbnails are small representations of either a larger detailed photo (e.g. 300-400KB) or a video (e.g. 2-4MB).
Most galleries have thumbnails pointing entirely to photos (i.e. a real “photo” galleries).
A few galleries have thumbnails pointing to a 50/50 mix of photos and videos.
I don’t think I have had any issues in the galleries that point just to photos.
But in a couple of my “heavier” galleries (e.g. 2019-holiday-party) with lots of videos, after viewing maybe 25-30 videos, both Firefox and Chrome lock up.
As mentioned, in Chrome I see a message in the bottom of the browser window which says, “Waiting for available sockets…”
As I recall, Firefox says, “Waiting on localhost…”
The gist of this problem - which is easy to find online - is…
Ultimately this is a bug with Chrome and Firefox not releasing old resources, and it is generally known in programming as a “memory leak”…
The $10,000 question is, “How can I get around these browser quirks and not have my current design break?”
And fwiw, the reason your browser doesn’t break watching a boatload of YouTube videos is because - I’m certain - that YouTube has a much more robust infrastructure and website that somehow spread things out so this issue doesn’t happen.
Lastly, it isn’t practical (or possible) for me to upload 300 videos onto SitePoint, but I hope the above is enough to help out.
A lot of my videos are just 3-4 seconds long and a result of me shooting in the “Live” (?) view that my iPhone has which is used to buffer things and allow you to take action shots without a lag. (Maybe 75%)
Other videos are several minutes long. (25%)
When testing, I just clicked through videos until things broke.
As I went video-by-video through my Holiday gallery, I would say that I let the short videos play out, but for videos that were 2-10 minutes, I’d just let them play for maybe 30-40 seconds to make sure they were working.
