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.
Related
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
Hello :)
I need to be able to display any popular video format (MKV, FLV, MP4,...) inside a browser WHILE converting. To do this I've turned to FFMPEG to convert any video to .ovg and spent hours on Google, forums and in documentation but I can't find a way to play the converted video real-time.
Does anyone know how you can play a video in HTML while FFMPEG is still converting it?
You can't use a single format, especially if you want your videos played on iOS. HLS is a good compromise but you'll need a player on desktop browsers. You can find HTML5/Media Source Extension (MSE) solutions like hls.js
With ffmpeg you can generate a HLS EVENT playlist which is something like a combination of live and VOD: media segments are appended to the playlist as they get converted and when the input ends it remains available as VOD. It can be served via HTTP with any web server.
ffmpeg -i <input> [...] -f hls -hls_playlist_type event /path/to/html/dir/playlist.m3u8
ffmpeg supports multiple outputs and you can convert the video to other formats at the same time if you want:
ffmpeg -i <input> [...] -f hls -hls_playlist_type event /path/to/html/dir/playlist.m3u8 \
[...] -f <format2> <output2>
An HTML5 video with standard tag such as:
<video>
<source src="video/intro.mp4" type="video/mp4"/>
<source src="video/intro.ogv" type="video/ogg"/>
<source src="video/intro.webm" type="video/webm"/>
</video>
Is reportedly playing really badly for some of our users, mostly in browsers like Firefox and IE. It is really choppy, and out of a full 11 second video at 30fps often shows only a few frames. It is worse when you increase the size of your browser window and therefore the size of the video. For some people it improves on the second load, presumably after it has been cached.
We are not playing the video until at 10 seconds out of 11 have been buffered, so it shouldn't be a buffering issue. The file size is about 4mb. I believe it has standard encoding using H.264. The dimensions are 1920x1080.
Is there anything we can do as developers to improve this experience? In all my searching I am only finding suggestions for the end user, such as turning off hardware acceleration. It does seem to be a common problem, with a lot of complaints about quality even on things like Youtube and Vimeo, but it seems crazy to me that there is no code solution?
Thanks!
You will want to ensure that your mp4 file is optimized for best delivery... you'll need to play around with some of the settings but I would recommend making sure the MOOV element is at the start of the file to help the browser get enough metadata quickly. Once you've got a good MP4 experience you can tune the webm/ogv versions the same way
I use ffmpeg to optimize content, usually something along these lines:
./ffmpeg -y -i SourceFile.mp4 -s 1280x720 -c:v libx264 -b 3M -strict -2 -movflags faststart DestFile.mp4
you will want to play with the frame size (-s parameter) and the target bitrate (-b) to get the right balance of size and quality for the speed you need.
have a look at preparing mp4 file for html 5 for a slightly longer answer as well
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.
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!