I've recently switched my clients site from an FLV video site to an HTML5 MP4 site.
In doing this they had a limited size server so we couldn't do flash fallbacks...
Yet we have the site running well on iOS devices and most laptops but he tells me sometimes that the videos take verrrry long to load on their Macbook... I assume they're on Safari which I am myself using and it works fine.
But what could cause differences in playback start times? I know internet speed does but they tell me they done it on an ipad then straight after did it on a macbook and the macbook failed to load the buffering video in an acceptable time.
Could it be:
Browser versions?
Server Configuration?
Operating System?
Im stumped! But either way, they all work sweet on my iMac, iPhone, Macbook Pro.
Could it possibly be the way the MP4s have been encoded? If the video index is at the end of the file then the browser has to load the entire thing before it can play it.
I wrote about it How to get your HTML5 MP4 video file to play before being fully downloaded and how you can fix it.
I know that it may not fix the problem per say, but it just strikes a chord that it might be related.
Related
So I'm putting together a very video-heavy project with self-hosted videos in HTML5. I've got my videos encoded in both H.264/AAC MP4 and WebM formats, and they work beautifully in Chrome, Firefox, Safari, Mobile Safari etc. All good.
This is the most basic version of my code (in the production site I'm running it with VideoJS on top, however whether it's there or not, this problem occurs so I've removed the code for it from this example):
<video preload="true" width="720" height="406" controls="true">
<source src="/55.mp4" type="video/mp4">
<source src="/55.webm" type="video/webm">
</video>
But Internet Explorer refuses to play ball. When I load up the page in IE 11, I just get a video decoding error:
In Internet Explorer's developer tools, I can see that it's getting a content type of video/mp4, and just to completely eliminate server issues I've tried it on both my local Apache install and my web hosting. If I use the console to get the playback error, I get MEDIA_ERR_DECODE : 3, which, according to the site I just linked to, means
An error has occurred in the decoding of the media resource, after the resource was established to be usable.
This tells me that there's a problem with the video encoding... but I can't see it.
The video files were originally exported as QuickTime videos from Adobe Premier or Final Cut Pro (I'm not sure which the video guy uses), and then run through Miro Video Converter to output MP4 and WebM formats. When I open the MP4 files up in VLC, it shows me the following information about the codecs in use:
I can't see anything wrong there; it looks exactly like every reference I've found online says MP4 video should be for maximum compatibility - H.264/AVC video and AAC audio.
Can anyone see anything wrong with what I'm doing? I'd love to be able to post an example video, however I can't due to privacy reasons. All the same any help would be greatly appreciated.
So this is somewhat embarrassing, but I did eventually figure it out.
The problem wasn't so much with Internet Explorer as it was the VM I was using to run Windows to test in Internet Explorer.
Essentially, I was running Windows 7 inside of a VirtualBox VM. When I (in desperation) sought out an actual physical machine running Windows... lo and behold it played!
I can only assume that the video drivers provided by VirtualBox didn't like decoding MP4 or something. The videos played fine in other browsers, but I'm guessing they decode/render video differently to how IE does.
I had the same issue recently with VirtualBox running Windows7 on MacOS. Solved by enabling 3D acceleration in the "Display" settings for the problematic VM.
The OP is a genius. I was struggling with this same issue for days and could only test on a windows machine today. This led me to change the configuration of my Parallels Desktop v15.
Im running IE 11 on Windows 8.1 and changed in the Graphics > Resolution > Advanced settings > Vertical synchronization should be ticked off.
Maybe this will help other people.
Maybe worth a shot: Rebooting Windows 7 within VMWare Fusion solved it for me.
Over a year ago we added an video page on our site. At the time OGV wasn't very good, and there was no good WebM encoders available, so we decided to use HTML5 and h.264 for webkit browsers (Chrome, Safari, etc.) and then fallback to Flash for other browsers (using the same h.264 source file.)
This has been working great for a while. Recently (month or two maybe, so over multiple Chrome versions - currently Version 24.0.1312.52 m) we discovered Chrome really lagging on the playback. We thought it was a server issue, so we upgraded the server, and it is still behaving the same. I remembered reading that Google wanted to drop h.264 and move everyone to WebM, and thought this performance was part of that. We converted some videos to WebM and tested them with Chrome and they lag just as bad. Same video (WebM) streams beautifully in FireFox, and the MP4 streams great in FireFox via the Flash plug in.
I went to YouTube and turned on the HTML5 video support, and found the videos to lag in Chrome too (when running at HD) while they play fine in Flash mode. (Even when HTML5 is enabled, some videos still play via Flash.)
Tested on both Windows 8 and Mountain Lion.
I've talked to co-workers and they are seeing the same issues. So it isn't just me. So my question is:
Is this an issue with our video encoding?
Is it a bug with Chrome?
Or is it just localized to us?
Is there a way to deal with this besides switching back to Flash?
This is the flag I mean. If the flag is disabled, the browser tries to use hw-accelerated video decoding, which I can grant provokes wrong and slow video renderization in some devices. If enabled, hw-accelerated video decode is never used, but the above mentioned problems disappear. It theorically increases decoding time in devices actually able to use such acceleration, but I've been working around this field for almost a year and I still didn't realize any difference in that matter. Still didn't get to know how to identify if a device will behave properly (the availability of this feature doesn't seem to grant its proper behavior) with such acceleration without testing, though.
I have an h264 mp4 video that is 960x540, 1000kbps and 30 minutes long. This will be playing off of a disc. I noticed only in chrome that when I open the web page it is embedded in, my computer slows way down and the video gets all choppy for a solid 5 seconds every time...almost like it is loading the entire resource.
I tested playing the file in IE9 and Firefox and these seem to play ok when I first open it. I really wish chrome would ditch their version of flash and just use the plugin version that all the other browsers use. I love chrome, but this is unacceptable.
I am looking for a solution to this resource loading problem. Things to note, I am using the OSMF framework and using a simple MediaPlayerSprite to show the video. Not a heavyweight element whatsoever. Thanks.
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.
I'm setting up a website which ultimately displays videos. The video files are all .mpg and requirements prevent me from converting these to another format such as flv. So far I have been playing around with Windows Media Player but have found that it doesn't play nice with non IE browsers. The problem which arises is that although the video will play, it doesn't shrink itself to fit in the WMP container and so only the top corner is visible. This problem goes away if I download the np-mswmp plugin for Firefox however it is a manual install and I'd rather not leave it to the user. Once the Firefox plugin is installed, Chrome also plays the files correctly but I doubt that the average user would ever think to do this.
Is there a better way to embed .mpg files into a web page, an alternative player which doesn't require file conversion? I have had a play with Quicktime but it only ever shows a Q with a question mark imposed over it, even when I associate Quicktime with .mpeg files. Any advice would be appreciated!
Thanks,
James
I'm sorry to say there isn't a good way to do cross-browser video without being able to force your users to install something. That is why every video site uses flash, since it's the nearest thing to a standard - but of course flash has some gaps in coverage, the most significant being iPhones.
Windows Media Player has only about 70% penetration and Internet Explorer somewhat less. By going this route you will end up with 1 in 3 users unable to view your videos.
Either bite the bullet and move to Flash as a video player or just give your users a download link. A download link is a very easy way to support almost every user, if you can do that.