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
Related
On a website we have developed, we are using react player and have come across a strange issue.
Videos which are 4K quality at 50 Frames a second do not play on Chrome on Desktop/Laptop or mobiles. The videos do play on Chromium edge and Safari, albeit do take a while to buffer.
We have tried to use alternates to react player, but are not able to find a solution here, the issue is clearly something that Chrome is not liking but obviously we cannot ask all our clients to make individual changes to their browsers.
The only error we see on the Laravel backend is ERR_CACHE_OPERATION_NOT_SUPPORTED, but not sure if this is related.
Has anyone got any ideas and any possible solution?
Thanks
Jit
Thanks to the comment by VC.One, a solution to this is identify the codec type using some Javascript like this example code, then run a conversion using free tool ffmpeg to h.264, parameters we used to convert was:
-i <input_video> -vcodec libx264 -preset slow -crf 22 -movflags +faststart <output_video>
There is no apparent drop off in quality to the naked eye, so this solution works for until Chrome will support h.265
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.
I have an Apache server set up and have made a simple web page,with a video on it.
The video plays, but if i try to skip ahead or behind it freezes up. If i click the pause/play button it will usually go back to the beginning of the video. The video is MP4 format.It might be worth noting that the video is a rather large file as the video I'm trying to play is a hour long. I've tried smaller files and they seem to play fine and i can seek as much as i want. Also if open the web page locally it works, so I'm thinking it has something to do with downloading/buffering the video i just don't know where to start to try and fix it.
If it's working with smaller files but not larger ones I would check where the meta data element (MOOV atom) in your mp4 is. By default it's at the end, which means accurating seeking won't be able to happen until the web browser has read the entire file.
You can address this using FFmpeg to relocate the MOOV atom to the front so the browser is able to request the correct parts of the file (assuming your server is configured to support byte range requests):
./ffmpeg -y -i SourceFile.mp4 -c:v copy -c:a copy -movflags faststart DestFile.mp4
this will simply re-position the MOOV atom, and copy the audio and video (no reprocessing) - so once the basics are working you might want to look at other optimizations you can do to improve the experience.
I am using Savedeo APIs to get to youtube audio files and trying to play the audio on a browser.
When I try to play an audio only file (.m4a) on regular browser, everything works fine. But, when I test it on a mobile browser on my iphone (safari and chrome), the audio file's duration is doubled. Basically after the end of the audio, there is a padding added.
Why is this happening? Is there any work around for this. If you need more info, will be happy to provide.
Thanks
I ran into this issue with a MP3 with a sample rate of 44100 Hz and a 128kb bitrate. The solution is to change the sample rate with ffmpeg:
ffmpeg -i your.mp3 -ar 22050 your_fixed.mp3
You can retrieve critical information about an MP3 by using ffprobe:
ffprobe your.mp3
iTunes also reports the wrong duration when calculating the duration with the actual MP3 file. That's embarrassing since you would expect iTunes to get something like that correct. This indicates a bug exists in some library that Apple uses for MP3 duration calculations.
HTML5 video takes quite awhile to begin playing from Chrome/Safari (latest and Chrome Canary). It appears that the entire video file needs to download before playback begins.
In Firefox 18.0.2 (HTML5) and IE 8,9,10 (Flash), the playback is almost instant.
In Chrome, I've seen the issue while using:
chrome native player
VideoJS http://videojs.com/
MediaElementJS http://mediaelementjs.com/
I find that even opening a local mp4 (h264) file in Chrome takes quite awhile to load: the developer network tools show that the video is loading/pending which takes 10-15 seconds on a large file.
For reference, here is a video:
http://mediaelementjs.com/
The full video file (5MB) is downloaded before playback begins. Not so bad with this small video, but quite a pain with a large file.
I have two questions:
Does Webkit support progressive download/playback?
If not, is there a known workaround?
Thanks
As Foaster said, the metadata block needs to be early in the video so that the video doesn't have to load up to it (which may entail loading in the entire video if it's placed at the end).
But you don't need some black-box .exe file from a product website to move the metadata block. Here's how to do it with just good old ffmpeg:
ffmpeg \
-i input.mp4 \
-codec copy \
-movflags faststart \
-f mp4 output.mp4
This will:
-i input.mp4: Take input.mp4 as input.
-codec copy: Copy the stream as-is (with no encode/decode step).
-movflags faststart: Move the metadata block to the start.
-f mp4 output.mp4: Format as an MP4 file and output with the name output.mp4.
Link to full ffmpeg documentation here. Installation instructions for various platforms here (a simple brew install ffmpeg is sufficient for Mac users).
The problem is neither the codec nor the browser...
The problem is the meta-block in your video-file!
Most browsers can only play the video when they have downloaded the metadata. Some encoding-tools put this meta-block at the end of the output-file, thus the browser has to load the whole file to "see" the metadata.
Solution:
http://rndware.info/products/metadata-mover.html (dead site) → Archived copy here
Get this little tool, open your video and let the MetaData Mover do its magic.
Doesn't take that long and your file is ready to stream!