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>
Related
I am trying to capture html5 video with js/css effects on it programmatically. I tried a couple of methods;
First I find this great blog post and implemented it. Everything was perfect till I found that phantomjs is not supporting html5 video tag so can not capture the video.
Second option was to use headless chrome to take continuous screenshots and feed these screenshots into ffmpeg to create the video. Although it worked to some level headless chromes screenshots was taking some time.. I couldn't create a smooth video..
On my third try I gave a chance to chrome's Page.startScreencast api. It could get video capture but frame rates was really problematic. The reason is that..
Now I am working on xvfb + chrome/firefox + ffmpeg combination for capturing video as mentioned on that comment. Theoretically it is promising but I couldn't managed to capture a video. Instead I have black screen..
My setup is below:
light-http server having a simple video (web) within html5 video tag; on localhost
start xvfb with Firefox and navigate to localhost/index.html ( video is there )
xvfb-run --listen-tcp --server-num 44 --auth-file /tmp/xvfb.auth -s "-ac -screen 0 1440x685x24" firefox --headless http://localhost
start ffmpeg with x11grab parameter to grab frames from xvfb
ffmpeg -f x11grab -video_size 1440x685 -i :44 -codec:v libx264 -r 12 ./output.mp4
the result is black video :)
what should be the problem, how can I debug the problem?
ps: there is one more possible solution which I didn't tried yet. As phantomjs has capability to capture canvas; it may be possible to
put video into canvas
then capture the canvas
It seems like a dirty workaround that is why not tried yet..
UPDATE-1
Tried to get screenshot with xwd -root -silent -display :44 -out screen.xwdand than convert to jpeg convert screen.xwd shot.jpg the result is black jpg..
If you don't need the "live video output" I would suggest capturing video frame by frame. Here is the speech about some existing application https://vimeo.com/342829825
Otherwise, if life stream is required, you may go with the way that obs-linuxbrowser is doing. So cef + ffmpeg.
I am stuck on one issue from last 1 day. I am using Adobe flex video display to play video for my site.
There is some converted video from MKV to MP4 using ffmpeg.
ffmpeg -i Test.mkv -vcodec copy -acodec copy Test.mp4
Now, i am trying to play that video from local it's working fine. But when i upload that video on server and trying to play video. Then it will not work with flex VideoDisplay same will work in browser and HTML videoplayer and also works with JWPlayer.
Other mp4 video which are not converted works very fine. Only converted Videos are not working in only flex VideoDisplay.
I am Just playing using.
<s:VideoDisplay id="videoDisp" autoPlay="false" autoDisplayFirstFrame="true" />
And give path to videoDisplay like:
videoDisp.source = Video_path;
My video file Video and Audio codec is as shown in below image:
Any help will be appreciate,
Thanks.
For my first tests, I saw an #2032 error, which is a stream error, and I think it's caused by the size of your video, because Flash player is trying to download the whole video before starting playing it, and I think there is a timeout or something like that which fire that error. So to avoid that, you can use qt-faststart to move metadata and offset information to the front of the file which will help to play it more quickly.
You can download that tool from here or if you are a fun of python you can try it from here. I will also upload a copy here for Win64.
Hope that can help.
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!
I'm not building the next YouTube or iTunes, but I do need to give my users the ability to upload their videos and audios -- then present it on the web at the highest possible quality with the lowest possible file size.
Questions:
FOR INPUT: What video and audio formats should I support? I'm guessing I should try to support the most common formats, but I'm not entirely sure what they are. Also, I'm not sure if I should support the most common formats. Maybe there is a reason not to support a certain format.
FOR OUTPUT: What video and audio output formats should I generate? I'd like to use HTML5's and tags, but know I should consider supporting non-HTML5 browsers. Should I do OGG, MP4 and FLV for videos? What about audios?
Given an unknown video and audio file uploaded by the user, what command should I use to generate the desired output formats. I'd like one command to convert to particular outputs -- and hopefully not have to do anything different to the commands depending on the input (it'll be a pain for me to know what the MIME type is of the file, etc. and can't really do an "if input is a WMV, then run this command" logic).
Suggestion FFMPEG experts?
Support what you actually support. Build FFmpeg with support for as many formats as feasible, and then instead of giving users a list of supported formats just report if FFmpeg choked on their file. Users can (barely) tell what the container format is, and that's not enough information for you to know if you can transcode it correctly.
Use h264 video in an mp4 container, and aac audio in an m4a container. Since the videos are going to be played online, there's no reason to support many formats if one will do. HTML5 and Flash can both play those formats, so don't give yourself extra problems by having numerous output formats apart from the myriad input formats you'll get.
ffmpeg -i <input video file> -c:v libx264 -c:a libfaac output.mp4. Of course that's just a start, and you might well want to adjust the quality (-qscale), bitrate (-b), etc. You'll have to tune the parameters somewhat to fit your needs, sadly there is no single configuration for "highest possible quality with the lowest possible file size."
I have converted the flv files into mp4 using the mencoder by using the following command
mencoder input.flv -o outout.mp4 -of lavf -oac mp3lame -lameopts abr:br=56 -ovc lavc -lavcopts
vbitrate=800:mbd=2:mv0:trell:v4mv:cbp:last_pred=3 -srate 22050 -ofps
24 -vf harddup
It is converting the videos. But if i am using these videos in the html5 video tags. It is not playing. Please give me the suggestions.
lavf is pretty broken, is better for you to compress audio and video separately and then mux them with mp4box.
You can look how my scripts work:
http://teknoraver.net/software/mp4tools/
You will need to upload an open source video file format. ogg is, I believe, the current standard.
Here are some helpful links:
Stack Overflow topic
w3schools.com help with html5 video
Have you tried using ffmpeg?
ffmpeg -i input.flv -c copy -copyts output.mp4