I am trying to figure out why my autoplay video takes so long to begin playing on mobile browsers. I have tried everything even going so far as to reduce it from 30mb to 3mb. I am aware of the mp4 'fast start' and 'web optimized' options that move the moov atom to the front of the file but I've encoded it with both Adobe and Handbrake and it still lags. My phone's internet speed is showing a test of 37mbps but a 3mb video is taking almost 10 secs (!) to start playing on both chrome and safari and no matter what I do. Any ideas?
It's because my hosting plan doesn't allow for video, I was unaware. I moved the videos to dropbox and changed the src and now they load faster.
Related
Today I've met an unpleasant issue. There is a website with a custom HTML5 audio player. After the page loads, I try to echo document.getElementById("myAudioId").duration, it is needed in order to make navigation possible. In every other browser it works just fine, the duration is showed, but IE11 works differently - it shows that duration equals Infinity. But as I noticed, when the song is buffered to the end, the duration magically appers and the navigation works. In other browsers everything works from the start. The content-length headers are set up. What could it be?
UPD: Other sites with HTML5 audio let me see the duration from the very start. The duration, I guess, is part of metadata and could be loaded even without preloading the audio file using preload="metadata", but it also doesn't work.
UPD2: I've also tried playing around with jsfiddle and created the same audio tag there with same MP3 audio - there was the same situation. But then I've inserted link to another MP3 there, from another site - and it worked!. More than that, I've uploaded this second song to the first problematic website and after that the song that worked perfectly couldn't also show me its duration and stuff. So now I think it's something on server side. But don't know what it is.
UPD3: Finally, I've been told that files are converted using FFMPEG to MP3 128bit, then they stop being OK. Now I need to find how should I convert MP3s so they are OK.
It works for me locally, but when uploaded to server, it does not.
It seems that player.duration do not work in IE 11:
https://msdn.microsoft.com/en-us/library/dn254962(v=vs.85).aspx
Im wondering why my mp4 html5 video is not "streaming" and instead waits till it is fully downloaded before it starts playing in safari.
www.pija.se
I have tried QTIndexSwapper but it says the index is in the right position.
Any help appreciated.
looks like the MOOV atom isn't at the beginning of the file.
I used ffmpeg to just relocate that (no other encoding) and then a binary compare (using HexFiend) and a quick test seemed to show that Safari was playing the video sooner
./ffmpeg -i top.mp4 -codec copy -movflags faststart top-fs.mp4
(caveat being that even though I cleared browser cache I didn't do things like bounce my test server or time things too accurately)
FWIW I find ffmpeg to be a good solution, and especially for background video you'll want to play around with parameters to optimize for your use-case
I'm working on a webiste for a client that, when finished, will have about 20 videos in the gallery section. I've already converted the videos tp mp4, ogg, and webm video types but I was wondering what is a reasonable file size for these different formats. I checked out this question "What is a reasonable file size for a 4 minute video on the web?" but I'm still not satisfied.
To convert I had .mov files. I opened them up in Windows Movie Maker, cut, mute, and took a snapshot of them. I then saved them all as .mp4s. Then I used Miro Video Converter to convert them all again to .mp4 which brought down the size a bit. I then converted the new mp4s to .ogg and webm.
Now, I ended up with final cuts like this:
mp4 files range from about 3MB to 30MB
ogg files are a little more sporadic. most of them range 10MB-30MB but then i have several that are around 70MB for some reason
webm files give me some concern. they came out to be about 2MB-10MB with some great quality. I almost feel like it's too good to be true...
Should I be worried about these file sizes? I did some calclations based on my internet speed which is 40Mbps. at that rate it should take about 11.6s to load a 70MB videos which is my largest video. Is this too long? I kinda feel like it is. Will the user be able to start playing the video before it loads. I'm going to be using HTML5 video tag with flash fallback by the way.
Oh, I forgot to mention. None of these videos are longer than 45 seconds. That's another thing. are the file sizes too big for how long the videos are?
To me the sizes you have mentioned seem ok, but you do have a lot of videos on the one page. You could inform the browser that you don't want the videos to be downloaded unless the user actually chooses to play them by using setting the preload attribute to "none" on the video tag.
If the videos are in a certain order, e.g. the most popular are at the beginning, then you could set preload="meta" on those ones, which tells that browser that you would like them to download the metadata only, so they might start to play quicker.
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'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.