I am trying to find the magic options that make mp4 work in Chrome. I think my videos were working, but don't seem to any more after Chrome updated.
Chrome, Version 41.0.2272.101 (Windows)
I tried some other machines and found some of the videos worked on older versions, and my Mac seems to still work on the latest Chrome.
I am using the ffmpeg options to convert from png series,
ffmpeg -framerate 10 -i dance%02d.png -r 10 -pix_fmt yuv420p dance.mp4
Some videos work, some don't, some work some of the time, or stop half way through.
I tried various other options like,
ffmpeg -start_number 16 -framerate 10 -i dance%02d.png -r 10 -an -s hd720 \
-vcodec libx264 -pix_fmt yuv420p -preset slow -profile:v baseline \
-movflags faststart -y dance.mp4
but this just seemed to make things worse.
here is one of the videos,
http://www.botlibre.com/media/a786625.mp4
and another one,
http://www.botlibre.com/media/a812450.mp4
Firefox seems to work no problem, on any version, grey background though.
IE works fine, white background.
Safari works, grey background.
Another thing, they videos used to have white background on older Chrome version, but now are grey, except on Mac still white.
and one more thing. Webm format works, but anyone know the option to remove transparency? I'm using,
ffmpeg -i dance%02d.png -r 10 -c:v libvpx -crf 10 -b:v 512k -c:a libvorbis dance.webm
just want a solid white background.
The video provided works fine with Chrome v. 44 (although, now both links are down). As you state you think the videos worked before you upgraded to v. 41, it indicates a bug in Chrome in the version 41 to (possibly) 43.
As to the background. PNGs are often transparent and the encoded MP4 stream seem to be encoded as 32-bit stream (24-bit colors, 8-bit alpha). Only webm truly supports alpha in the browser (and currently only with Chrome and Opera).
Chrome uses FFmpeg to decode mp4 video and Firefox uses whatever the host system provides. The different background colors is to indicate transparency as the video isn't actually shown with the alpha channel available.
The recommended way is to render out your frames without the alpha channel (if you are not gonna use it for anything), or to convert the PNG-sequence into a non-alpha channel PNG before decoding them into a video. This is both for mp4 and webm.
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
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
I used the sample code at https://codepen.io/ollieRogers/pen/lfeLc to show frames of a (background) video as the user scrolls the page.
The webm video used in the sample plays very smoothly with my code, but my video stutters quite a bit, so I'm assuming the problem is with the video itself.
I've used ffprobe to see if I can tell the difference between the two videos with no luck. Both have similar bit rates and lengths, and they're both 30fps.
Is there a recommended way to create html5 video files that will "scroll" smoothly, i.e, that will respond quickly to the window.requestAnimationFrame() call? An ffmpeg command to encode correctly would be even better!
window.requestAnimationFrame(scrollPlay);
Thanks!
For anyone else who needs html5 videos that responds to window.requestAnimationFrame() quickly, the key is making there are plenty of keyframes which will make "random access" much faster. (I got some help over at videohelp.com forums.)
Here's a sample ffmpeg command to encode a .mp4 video with keyframes every 1/2 second for a 30fps video. (See https://trac.ffmpeg.org/wiki/Encode/H.264.)
ffmpeg -i inputVideo -c:v libx264 -preset slow -crf 22 -x264-params keyint=15 outputVideo.mp4
Here's a sample ffmpeg command to encode a VP8 .webm video with keyframes every 1/2 second for a 30fps video. (See https://trac.ffmpeg.org/wiki/Encode/VP8.)
ffmpeg -i inputVideo -c:v libvpx -crf 4 -b:v 1200K -keyint_min 15 -g 15 -f webm -dash 0 outputVideo.webm
Note: You can't simply "insert" keyframes into an existing video. The video has to be re-encoded.
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
File is from a Nikon D3s (mov) converted with ffmpeg to mp4.
Working without problems with all other files (avi, flv, mp4 etc)
Please see file: http://shootitlive.s3.amazonaws.com/output.mp4
(Same non working result in Chrome when served from diffrent hosts, and always works in Safari and with flash in Firefox, Chromium)
/usr/local/bin/ffmpeg -i nonworking.MOV -acodec libfaac -ab 128k -vcodec libx264 -preset slow -crf 30 -threads 0 -s 768x576 -aspect 1.33333333333 -ar 48000 output.mp4
Cant find anything strange with (but dont really know what to look for):
ffmpeg -v 5 -i filename -f null - 2>error.log`
Any ideas?
I think your problem is the pixel format.
From your Chrome bug report, the working video (working.mp4) has pix_fmt=yuv420p. The non-working video (qt_output.mp4) has pix_fmt=yuvj420p. In my testing, converting the problematic video to yuv makes it play. Converting the working video to yuvj makes it not play.
I'm not sure why my analysis of the pixel format differs from Alek's on the Chrome bug report, but that made the difference for me.
Try adding -pix_fmt yuv420p to your ffmpeg command.
Please read chromium bug #117368, in which a developer explains that yuvj420p will not be supported soon:
Indeed, chromium doesn't support yuvj420p.
Generally we don't support video formats (or codecs) that aren't very widely used, because the support burden (maintaining code quality, fixing bugs, security reviews, etc) is out of proportion with user benefit (relative to everything else we can spend our time/energy on).
Closing as WorkingAsIntended. If the format becomes more widely popular we can reconsider including support for it.
If there's another issue here that I'm missing, please reopen.
There's nothing that can be done here, it's a browser issue you're linking to a raw file.
You really need to use an HTML5/FLASH/JS or other video player inside of an HTML document.
This will work in all HTML5-capable browsers
:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
</head>
<body>
<video height="250" width="320">
<source src="http://shootitlive.s3.amazonaws.com/output.mp4" type="video/mp4" />
</video>
</body>