For days I have been struggeling with ffmpeg (PHP).
I have a website where users can upload video's. Obviously people use .mov, .mp4 and .mpeg created by various devices such as cameras, mobile telephones, tablets and many more devices. The problem I have is that those movies either work on Firefox or Chrome, but almost never on both. No clue why, I guess it has to do with codecs and browser support.
I am using FFMpeg to turn them into webm files. This works 95% of the time. In all browsers I have a working video and the sound works too. But sometimes there is no sound at all.
When I open the movie in a other browser (or Windows media player for example) I do hear sound. It is so random to in what browser or software it works or does not work.
Does anyone know of a way to make sure that your movies work in every browsers i.e. Chrome, FireFox and Safari with both video and audio? and if so, how can I transform them and into what format (codecs?)
I dont mind converting a movie into three different formats, as long as both video and audio works.
I hope someone can give me some advice. I have tried many ways but none work cross-browser so far.
An example of the code that I use:
$video->save(new FFMpeg\Format\Video\WebM(), 'export-webm.webm');
Does anyone know how I can make it work on every browser?
What I already tried is (amongst others):
using an original mp3 or mov and convert it into webm with this code:
ffmpeg -i origin.mov -c:a libvorbis -strict -2 -c:v libvpx-vp9 output.webm
Unfortunately in FireFox i have visual and audio but in Chrome I have nothing, just a blank screen.
H.264 video with AAC audio in the MP4 container is probably your best bet.
ffmpeg -i input.mov -c:v libx264 -c:a aac output.mp4
Related
Because I dislike Youtube and Vimeo is too expensive, I chose to upload my videos directly to the server at my web host and embed the videos on my site using the HTML5 tag (see photos for the code). The videos play fine on all browsers except for Firefox and I can't figure out why. https://memoriaelinguagrumentina.org/english/saponareseCuisine.html
I've seen several other posts on here asking about very similar problems; however, nearly all are at least 8 years old. I've gone through them as part of my troubleshooting process, but without any luck.
I've seen it recommended here to use multiple video formats (.mp4 AND .ogv) because there is no universal format supported by all browsers. Firefox did not always support mp4, but I believe it does now. So I don't believe this is the root of the problem.
I checked with my web host to see if they have the correct MIME types (see photo).
I cleared the cache on my browser, set the privacy settings to normal, and checked hardware acceleration.
What am I missing?
*note: To save disk space, I'd like to not have to upload duplicate videos in different video formats to the server, ideally. Since Firefox now claims to support mp4, I was hoping to get away with using only mp4.
Firefox doesn't support all video files. They generally support MP3, WebM, Ogg, and Wave containers, and if you are using an MP4 container then it usually depends on the platform decoders for AAC and H.264 audio and video streams. The video encoder format that you are using isn't supported by firefox. You should use supported encoders for your video.
You can find more information here:
https://support.mozilla.org/en-US/kb/html5-audio-and-video-firefox
Your MP4 videos are using H.265 video codec.
You need to have them encoded as H.264 to work in most browsers.
Solution: This means you must re-save your videos as a new format.
The problem is not just Firefox, even Windows Chrome does not play H.265 encoded video.
Things to fix:
Re-encode as H.264 (use High or Main profile for better compression-vs-quality output).
Re-size your videos (when doing re-encode). 720p should be okay for demos/intros. You don't need a large 3840 x 2160 pixels video showing inside a small 672 x 398 pixels box.
Your file size is not good. 286 mb is too much data loading for just a mere 6 minute video.
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 have created a new website for a friend of mine and now the video we have on the welcome screen is not working in Safari, in all other browsers it works fine.
Website: http://www.mangohoian.com
Does anyone have an idea how I can solve this?
Your video is .webm, which seems not to be supported by Safari.
I transcoded to mp4 and seems to work okay in Safari. You'll need to change your HTML to either offer the alternatives in the <video> tag, or make use of the canPlayType function to determine which source to present.
Transcoding parameters: ./ffmpeg -y -i Mango3_CLIPCHAMP_keep.webm -c:v libx264 -c:a aac -movflags faststart Mango3_CLIPCHAMP_keep.mp4
I also uploaded the version here if you want to grab it (file will expire in 30 days)
Check your browser version, its supported from Safari 10 and above.
Hope this helps
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
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!