Multiple videos embedded on Firefox 17.0.1 - html

I'm having issues with firefox 17.0.1 on a Windows OS on loading multiple Vimeo videos.
It's a weird bug that I cannot figure out, it only seems to be able to replicated using this operating system and browser.
The problem is there are many videos embedded using Vimeo, and it only seems to load the first two videos, then a little more down the page it loads some black boxes.
Just wondering if anyone else has the same issue, and a possible fix.

AFAIK, Firefox intentionally runs only Flash objects that are visible (and runs other ones when they become visible during scrolling). This is for performance reasons.

Related

Chrome doesn't load my site's images, gets stuck at processing request

I'm building a small site that displays images and sound based on a slider. It loads the images to the carousel (I'm using Slick). But I'm running into an issue with Chrome and only Chrome. Once I move the slider, new images don't load in the carousel unless I scroll with the slider a few times. I've tested it locally, and I uploaded everything to my server to try it. I got a friend to try it out and it didn't work for him, either.
Here's the site. Warning that it's a pretty heavy load, so I wouldn't open it on mobile: http://kschenk.com/whyte-night.
Nothing comes up in the console, and I don't have any plugins installed. The only hint I get that something is broken is that Chrome keeps spinning and "Processing Request." It works in Safari, Firefox, and even Internet Explorer.
I'm open to any help and can provide any info necessary.
Some stuff that might be useful:
each increment in the slider loads a ~5Mb audio file, streamed using html5 audio tags
each increment in the slider removes the images from the carousel and adds 10 new ones at about 1-2Mb each, which are lazy-loaded
I've tried two different sliders now, this one (Slick) and Owl Carousel. The issue was there for both.
Thank you!
Alright, I figured it out! Figured I'll post the answer in case someone else finds this topic in the future (I hate unanswered questions as much as you, future solution seeker).
So Google Chrome allows max 6 connections per server. Apparently most other browsers, do, too, but some of them don't respect it. That's why it worked in Safari and Firefox. I was loading many image and audio files, so it would hang when I tried to stream all my audio. Something would mess up.
I solved it partly by putting my images on a subdomain. But then only 6 of 8 of my audio files loaded. I found out from Googling around that the 6 connections per server also counts subdomains as a separate server. That's why putting my images on one helped. But I still needed to get my audio files!
So I made two new subdomains, "audio" and "audio2". I put 4 of my audio files on each and load them like I did before, just changing the subdomain depending on the file I'm looking for. It works, because now I only have 4 connections open per server.
I guess it works slightly differently with audio streaming through the HTML5 audio tags. Since not a lot of people use audio on their sites, there's not that many topics on this online.
Your Image is Showing Right, if your chrome is not responding, so then reset your chrome browser and check it out...
you might also consider to make the images a bit smaller: if you choose save for web in photoshop you get down from 1.2MB to 360KB... does the image really need to be 1800x1195px? You might choose a smaller image-version based on browser-window-sizes: good for the user and good for your server :-)

Flash banners are not working in Chrome

I have some Flash banners in my website and a few GIFs. Several days ago I noticed that the Flash is not working when browsing with Chrome. When browsing with IE all is ok.
This is the link to my website: http://batgalim.org.il/
This is an image describing the problem. Marked with red Xs are the missing banners
http://batgalim.org.il/banners_problem.jpg
This looks like a recent bug in chrome, per this bug report.
It hasn't been solved, but as I suspected, one user is reporting that a workaround is to use SWF Object to embed Flash on your page. It's really the best route to take anyway, it solves a lot of common problems with embedding Flash... at some point even Adobe made SWF object the default way to embed Flash apps (when using Flash Builder).

Two H.264 mp4 videos: One plays in Chrome, one doesn't

I have two different videos, both (as far as I know) generally captured in the same manner, that I'm trying to play using an HTML5 video tag in Chrome. Both videos open and play perfectly in VLC, so I don't think there's any issue with a corrupted file, and both are mp4's with an H.264 format, using YUV color space. However, when I try to play one in Chrome (Version 21.0.1180.89) it gives me a grayed-out play button, while the other works perfectly. For reference, my OS is Ubuntu 10.10, although I've seen the same problem in newer versions of the OS. This is whether I'm loading the video into the HTML5 tag, or navigating directly to the URL where the video is being stored. I'm somewhat at a loss here, does anyone know what direction I should go to find what the significant differences are between the two videos?
Edit:
This one works: https://dl.dropbox.com/u/100841270/1_G101_20120914_0139PM_Course_101.mp4
This one does not: https://dl.dropbox.com/u/100841270/1_G101_20120914_1156AM_Course_101.mp4
Update:
It appears to have nothing to do with OS, since I've seen the same problem in both Windows and Linux. Chrome 22 beta in Ubuntu didn't seem to work either.
We had this problem and found that encoding the files in accordance with iPhone's webview's standards created files that played fine in Chrome. Chrome and iPhone webview share the same render engine, and it appears they have similar HTML5 video requirements.
Not all H.264 encoded Mp4 files are supported by Chrome and slight differences in the encoding process can produce videos that do not work. Even if the EXACT same encoding settings were used, H.264 is a variable bit-rate encoder, so different videos may exceed bitrate limits.
The encoding settings that were successful for us were:
Only use the H.264 Baseline Profile Level 3.0
Resolution below 640 x 480 and framerate up to 30 fps
B frames are not supported in the Baseline profile.
bitrate limit of 900kb.
Here is the reference we used to arrive at those settings. Likely not all of these are required for Chrome, but we stuck to these rules and found that all videos worked on both platforms. Further research could likely determine the exact setting that is/was causing Chrome to not play the video.
I am running Windows XP, and chrome doesn't like the second one either.
My best guess of the cause is that, the working one is only 6.4 MB, but the other one is about 21.7 MB. Chrome might just be refusing to directly play a video that big. Have you tried having YouTube host it, and embedding their player into your site? That may solve the problem. (If you are worried about random strangers watching the videos, why did you post them here? Why would anybody even want to watch them? Though, you can make videos private on YouTube, in case these are just two videos that demonstrate the same problem you are facing with the real videos.)
That may also be compounded by a different problem that exists with both videos, manifested when I try to use Windows' built-in player. Both videos appear distorted when I use my computer's video player, stretched like 300% horizontally.
Are there other videos you have that fail in exactly the same way? Since these are only test videos for the real thing, if this is the only video with that problem, I would not say that it really is a problem unless it recurs. The dysfunctional video may have just run into that one-in-a-million chance that it has just the right contents for it to not work.

Chrome HTML5 Videos stop working if too many tabs are open - Memory issue?

I'm using jQuery to dynamically write <video> objects, and running videojs to init them. After I play a video, SOMETIMES when I try to play it again, it just won't play, and from that point on, even after refreshing the page, no videos will play. Each time, the <video> object renders, but the video just doesn't play. Nothing is written to the console. There don't appear to be any errors. Restarting Chrome resolves the issue, but only momentarily. After playing a few videos, the issue comes back again.
I found that closing other tabs in Chrome does indeed fix the problem, so it appears to be some kind of memory issue.
I'm running Chrome 19.0.1084.46
Exactly how many video tags to you have? What do they look like? Do they include preload='none' attribute? Are the source videos all on the server?
I ask because if you have more than six video tags on a single page pointing to the same source server then you could be experiencing "connection starvation":
Chrome allows only six open connections to a single server (based on DNS name in the URL)
the html5 video tag's preload attribute default value is 'auto'
Chrome's auto behavior is to preload some data and leave the connection open ready to pull more data for the video
So, with more than six video tags on a single page pointing to a single server, the videos will not play. To resolve this particular problem, set the preload attribute to 'none'
Stu is correct. But sometimes, in my experience, Chrome ignores the preload="none" attribute and goes ahead and opens a connection anyway. I've had much problem with this when developing a site which had many smaller videos on it. The connections blocked the rest of the content (images, custom fonts (and when custom fonts are delayed, the text does not even render)) My solution was to build an own preloader which loads the images. This made sure I could control at least when the images (which was the most crucial aspect from a design point of view) was loaded.
That solved the problem with images not showing but the problem still remained. So the best solution is to set up subdomains pointing to the same server, like: v1.server.com, v2.server.com, and so on. This means you won't have to move your files and you get the benefit from enabling browsers to have more open connections. Watch out for increased dns lookup time though.
There is a known bug with Chrome. It will not play the same video in multiple tabs at the same time. This is probably what you are running into if you are a developer and happen to have your page open in two tabs at the same time.
The bug has been known for almost 5 years as of this writing. Feel free to visit the Chromium bug report and star the issue. Hopefully it will increase in priority for the Chrome devs.
In the meanwhile, a workaround is to use a random query parameter in your video src. For example, instead of <video src="vid.mp4">, use <video src="vid.mp4?_u=1253412">. This will break Chrome's caching mechanism and allow the same video to be streamed to two different tabs at the same time.
I had a similar but related issue which I can expand on slightly here.
I had 14 different small videos on a page but only 2 were available at a time. Setting preload = 'none' didn't fix the issue so I also used a data attribute to store the src, and remove the src for all videos that aren't currently being viewed.

Keeping Chrome from freezing when playing HTML5 video

I have a website with HTML5 video. When viewing the page with Google Chrome, Chrome freezes the tab with an "Aw, Snap!" error intermittently. The page stops rendering and then times out about 15 seconds later. This happens about once every five times the page is loaded. It happens much more often when there are multiple videos on the page (about once out of every two times), so it seems like the problem is perhaps occurring on a per-video basis. How can I start debugging this problem? Chrome doesn't give any obvious JavaScript errors. I am using the Video For Everybody video playing code.
Thanks.
This may be related. http://code.google.com/p/chromium/issues/detail?id=72985
Although the bug is for a page with many videos, I've found the same behavior with Chrome 9 on a page with one video. Chrome 10 beta does not exhibit the behavior and removing the preload attribute seems to fix the issue as well.