So I have a huge problem with Chrome.
I have a site that includes several videos with the <video> Tag of HTML 5. In Chrome the entire page doesn't seem to stop loading. The loading spinning circle is always spinning and it doesn't load content. If you click on some videos it will randomly load the rest of the content and the spinning circle will stop and get replaced by the favicon.
The strange thing however is that FireFox and even IE11 do load the page completly and with all the content.
After some investigation I found 2 videos causing this loading loop. If I comment these videos the page will load and everything is fine.
I checked if the videos are corrupt or damaged but they aren't.
So did anyone else have similar issues regarding videos in Chrome and how did you fix them?
So the answer to this question is a strange behaviour that's inconsistent across browsers.
If you don't set a preloadvalue to the video tag Chrome does preload the videos while FireFox doesn't.
Taking some values from this source it's actually quite significant. Chrome preloads 25s of the video while FireFox and even Internet Explorer don't preload anything.
Related
I have a simple webpage with a <video> tag. I tried assigning the src attribute of the video tag with URLs of two different videos, both about 2 and a half seconds long:
The first video has a frame resolution of 3840x2160. JSFiddle: https://jsfiddle.net/u2sgawk7/2/
The second video has a frame resolution of 4096x2160. JSFiddle: https://jsfiddle.net/u2sgawk7/3/
I'm encountering a problem with the second video when loading the webpage from Google Chrome on my mobile device (Galaxy S10). The first JSFiddle works perfectly fine on all devices. The second JSFiddle seems to work fine on desktop browsers, but simply displays a blank white screen when I open it on my mobile device (on Google Chrome for example).
I've tested this functionality using many other video files, and it is clear that the frame resolution is the decisive factor here: the problem occurred with every single video with a resolution of 4096x2160, and only with these videos.
I tried using this website: https://clideo.com/crop-video, to test whether or not it is even possible to display high resolution videos on mobile. I uploaded the second video (the one that was causing a white screen), and it was successfully displayed using a video tag on that website - both on desktop and on mobile!
What am I doing wrong? Any help to resolve this would be appreciated.
Once again just to clarify:
The issue does not happen on desktop browsers at all.
The issue does not happen on FireFox on my Galaxy S10.
The issue happens on every other browser I tried on my Galaxy S10, as well as in Safari on iPhone.
Safari seems to be loading this video when it wants to, sometimes adding "http://" to the start of the url makes a difference, sometimes it doesn't.
It just wont load, or fallback to the img because its loading the video but not displaying it.
I'm honestly out of ideas, it's being super inconsistent.
Any help would be awesome:
video in jumbotron banner.
url in question here:
http://go.mmsg.com.au/authoring_maxxiaplus.html
I have html5 video tags of videos.
On chrome all is good, on firefox the orientation of landscape videos is wrong...
Even tried using video.js, no change.
I read that this is a problem because the videos originated in iOS.
so 2 questions:
1. How can I still overcome this issue. Really there is no solution?
2. (out of curiosity) - how does chrome manage to overcome this?
Example of a URL (scroll down a bit in the chapters to see a vertical video):
http://www.letsfeedme.com/moments/55802f142f2dad3c008b4575-Balsamic-Vinegar-%22Caviar%22
I read that this is a problem because the videos originated in iOS.
All videos recorded using mobile devices will contain rotation metadata including those from iOS and Android devices. It can take 4 values: 0 (tilted left), 90 (portrait), 180 and 270:
On chrome all is good, on firefox the orientation of landscape videos is wrong...
Firefox and IE 10 are the only major browsers not supporting the rotation metadata. Here's Firefox compared with Chrome:
The latest version, Firefox 42 as of today, still does not support it. IE11 and Edge 12,13 do support it.
List of mobile/desktop players that support the rotation info: https://blog.addpipe.com/mp4-rotation-metadata-in-mobile-video-files/
How can I still overcome this issue. Really there is no solution?
See this answer for the solution, basically you need to :
rotate videos using FFmpeg (so Firefox and other browsers that do not support the rotation metadata show the video properly)
remove the rotation metadata (so that other players don't rotate the video since it's already been rotated by FFmepg)
Images courtesy of: https://blog.addpipe.com/mp4-rotation-metadata-in-mobile-video-files/
Since the problem is with some iOS specific encoding options, which many NOT-Apple Players can't read, the easiest solution I can think of is to trancode and rotate the video.
Which was already discussed in oh so many posts on the web and here at SO... e.g.:
Video orientation using video.js
HTML5 mp4 video with firefox resizing video
Chrome HTML5 Video Flipping Portrait Sideways
http://help.videojs.com/discussions/problems/1508-video-orientation-for-iphone-wrong
I am guessing that Chrome is respecting the width="360" and height="640" attributes of your <video> tags, while Firefox is not. If I download one of your videos and play it back in Media Player Classic, again the orientation is incorrect. But just like in web browsers, there are inconsistencies: the same video opened in VLC player plays back with the correct orientation.
I would recommend that, if you can, you re-encode the videos using a (free) program called AVIdemux. I just tried it on one of your videos, and it worked well with minimal effort. As a bonus it shrunk your video down considerably, with only minimal quality loss.
Here are the steps:
Download AVIdemux from http://www.fosshub.com/Avidemux.html
Install and run AVIdemux
Go to File menu and choose Open. Pick the video to re-encode.
Go to Video menu and choose Filters
Choose Transform > Rotate (double-click) > Rotate by 270 degrees (OK)
Click the Preview button to check the output
Click the Close button
In the main window, under Video Output, choose MPEG4-AVC (x264)
Under Output Format, choose MP4 Muxer
Click the Save Video icon, and in the resulting window type a filename and click the Save button.
Then you will need to re-upload your video.
Probably not really a viable solution but adding a CSS rule such as
video {
-moz-transform: rotate(90deg);
}
would at least make the videos play back in the correct orientation in Firefox. Problems with this:
videos that play back in the correct orientation without the rule will play back in the wrong orientation with the rule
the video controls also get rotated
the posters will display in the wrong orientation
I see your site uses video.js. It might be worth looking at https://github.com/xbgmsharp/videojs-rotatezoom ?
I'm working on a site where the client requested a video fill a div as the background. I have it in and working for myself but they keep complaining that they can't scroll. I have no issues on multiple computers scrolling. Is there some sort of common issue other than a slow machine that would cause this? Could it be a CSS issue? The staging site is here if it helps: http://arkroyal.staging.wpengine.com/
UPDATE
I am using a video hosting service and it seems this is only happening when the flash fallback is in there... I have set it to flash be default now and I can not scroll when my mouse is over it. So now I guess this is a flash issue?
I agree with user3285910's answer, however, that's not to say there isn't anything you can do about it.
When I first went I didn't not attempt to scroll, I just let the entire page load. Afterwards I checked the load times for the media, the Winsta MP4 took 27.36 seconds to load. That's in Chrome on a T1 line. I used Chrome because the webkit browsers are known for their laggy video lading.
With that information I would look at changing the preload value for the <video>. Currently it's "none". There are a lot of different approaches to preloading data and you cannot account for everyone's PC speed, bandwidth, etc.
I would recommend letting the browser determine their capabilities for you and adjusting accordingly. Usually 5-7 seconds of preload is enough to get around the jumping behavior. Here is a link to an article that goes into more detail with analysis.
After looking at the staging site, it doesn't seem to be an issue with the site itself, but more the video you are using. The video is high quality and will cause systems to slow down drastically. If this is the video they want as the BG, I would see if you couldn't get the video resolution lowered drastically, as this will cause issues in the rendering on some systems. This will also make users unable to scroll down the page, because their video card is busy trying to render the images that are being produced by the BG video.
I have this annoying problem driving me nuts, IE 8 randomly won't show background images of my divs. One minute it shows, then the next time it won't. Then I have to refresh the page 2-3 times for it to show.
All my pages work fine on firefox, chrome.
Has anyone faced a similar problem? Any solutions?
I had a similar issue but the image would never show in IE8, regardless of how many times I refreshed the page. It worked fine in Chrome and FF (latest versions as of the time of this post).
The image file was created in Adobe Illustrator (CS3) and saved as a JPG. It turned out to be file corruption of the JPG that I resolved by opening the file in Paint.NET, saving as a GIF, opening the GIF and re-saving as a JPG. The issue does have to do with IE8 but Paint.NET had problems with the file as well. I could not save the original JPG as a JPG; I had to switch to another format and then back.
I hope this helps those with the issue I ran in to.