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
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've a very strange problem. The background video on this site is playing in Safari but not in Chrome or Firefox.
Adding the attribute "controls" via the dev tools I see the correct video duration. But it seems that the video is transparent at all.
The same problem appears when you open the video link directly:
neomotionstudio-reel-2019.mp4
Thank you for taking a look!
This is a video format problem. Not every browser knows how to decode every video format, you can read this page on MDN to learn more.
An easy solution is re-encoding your video. Here is an example using ffmpeg:
ffmpeg -i http://www.neomotion.studio/wp-content/uploads/2019/03/neomotionstudio-reel-2019.mp4 video.mp4
It should give you a file working in Chrome and Firefox.
Problem solved: The motion designer has exported the video in HEVC/H.265 instead of H.264 video format which isn't supported by Firefox and Chrome.
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!
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>