In html 5, I want to embed an mp4 like this:
<video width="640" height="480" controls>
<source src="somefile.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The video runs fine the the browser in my development machine, but the file is 500MB because it was recorded in full HD. How do I down-sample the file so that it is about 50MB, with smaller video but the same sound quality, and still able to play in the browser using the html5 video tag shown above?
I am using Windows. I have been using FlashIntegro, but it converts the files to avi format, which cannot be viewed using the video tags in html 5. I want an mp4 format I can publish using the video tags in html 5. I would like to use free software.
I do not want to use flash or adobe creative cloud, but I am adding those tags to find viewers who might know about free alternatives.
I would suggest something like FFmpeg, though would set expectations on quality if you go from a 500MB file to a 50MB one - though a lot will depend on the amount of optimization already present in the source... I was able to get a 270Mb file down to 29Mb without visible loss of quality using the following:
./ffmpeg -y -i SourceFile.mp4 -s 1280x720 -c:v libx264 -b 3M -strict -2 -movflags fast start DestFile.mp4
The above will give you a 1280x720 output, at 3Mbps using h264 in an mp4 container, and will also do a second pass to move the moov element to the front of the file enabling it to start streaming faster. It will not re-encode the audio so will keep whatever quality you started with
You may want to play around with the frame size and the bitrate to get the filesize to match what you like/need
Related
Having a real issue with displaying video in Chrome and Safari. The video seems to only run after a few page refreshes. Not sure why this is. I think it has something to do with the way Chrome and Safari render video.
In Firefox I have no issues with the video running.
Here is the HTML
<video width="100%" height="100%" preload="auto" loop autoplay style="visibility: visible; width:
1321px; height: 744px; opacity: 1;">
<source src="https://d-
360.nyc3.digitaloceanspaces.com/2018/06/video_2.mp4" type="video/mp4">
</video>
I noticed that it was pretty slow to download, so my guess will be that it's a server performance/caching issue.
You can address some of that by using something like ffmpeg re-encoding with the MOOV atom at the front of the video (will allow it to start playing back sooner) eg:
ffmpeg -i video_2.mp4 -c:a copy -c:v copy -movflags faststart video_2_tweak.mp4
if performance is still poor, then you might want to constrain the bitrate further to help address download speed (current video is around 2.5Mbps) eg:
ffmpeg -i video_2.mp4 -c:a copy -c:v libx264 -preset slow -b 1.5M -movflags faststart video_2_tweak.mp4
(this forces a transcode of the video using a high quality present but constrains bitrate to 1.5Mbps ... you may need to experiment with this value to get a good quality vs performance trade-off)
Depending on the desired output side, if you don't need the full 720p framesize, you can add an additional constrain on the transcode to limit that eg:
ffmpeg -i video_2.mp4 -s 640x360 -c:a copy -c:v libx264 -preset slow -b 1M -movflags faststart video_2_tweak.mp4
You should also ensure that your server is configured to allow caching of content so if the video is being replayed it doesn't always have to come back to your server
Really good answer by Offbeatmammal concerning compression. The video did need to be compressed.
I compressed with ffmpeg using the following command.
ffmpeg -i video_2.mp4 -c:a copy -c:v libx264 -preset slow -b 1.5M -movflags faststart video_2_tweak.mp4
Uploaded the video but still no luck in chrome and safari video hanging on first frame. So it was not a size issue.
Added Muted Attribute - Solution
I took the video markup and ran it outside of my site in a codepen on chrome and the issue was replicated. After looking closely at the attributes I noticed I did not have the muted="" attribute added in the video markup.
Open code pen and look at first video. No muted attribute. .
Once I applied the mute attribute muted="" the video played in chrome and safari.Open code pen and look at second video. Muted attribute added .
<video width="100%" height="100%" preload="auto" loop="" autoplay="" muted="".
IMPORTAINT
This is only a issue with chrome and safari. In firefox the video will play. So if you are going to add html5 video to your site make sure you include the muted="" attribute.
I converted a gif composed of three images to mp4 and also to m4v (for Safari) to play in the html5 video player, however, Safari won't play either the .mp4 nor the .m4v with the following
<video preload="yes" controls="true" >
<source src="./menu.mp4" type="video/mp4" />
<source src="./menu.m4v" type="video/m4v" />
</video>
However, if I use a proper video (i.e. not a converted gif) Safari (9.2) will play it using the above syntax, so I know the html5 video player is working in my browser, just not my converted gif.
Question, for a gif that's converted to a "movie of still" photos, do I have to set a different type i.e. type="gif/m4v" or is there another setting I have to activate?
I used ffmpeg to convert the gif to an mp4 but don't recall the exact command that I ran to do it.
Update
According to this TechCrunch article, Twitter uses mp4s instead of gifs so I'm assuming it should work on all browsers.
the mp4 file can be viewed here
https://www.dropbox.com/s/mvkzo8xe7is4rle/menu.mp4?dl=0
The problem is the video encoding, specifically the H.264 Profile setting, used with video codec.
Your current video is encoded as : High 4:4:4 Predictive # Level 2.2 which seems unusual for a browser video (and possibly won't decode on some mobile devices).
Solution :
In your encoder, choose an H.264 Profile of either Baseline or Main.
This working video uses Main # L3.1
Using FFmpeg you can produce a new video under Main profile (which is suitable for your dimensions width 480 X height 640).
ffmpeg -i input.mp4 -c:v libx264 -pix_fmt yuv420p -profile:v main -level:v 3.1 -an output.mp4
Useful Notes :
You can check here some Apple recommended profiles (see Point.11). It is expected the video is using 4:2:0 sampling, not the problematic 4:4:4 in the not-working video.
Wowza.com explains Profiles and Levels for mobile devices.
A Baseline Profile would guarantee playback on even older devices (eg: iPhone 3 or older).
There is an interesting thing happening! When I try to play a video like :
<div class='vcontainer' id='vc'>
<video id="match" width="700" controls>
<source src='tsk1.mp4' type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
I could only hear it and there is no video. It has a frame height of 576 and frame width of 720. But I am able to play another video (normally), with a frame height of 320 and frame width of 568. What could be the reason for this?
Note:For reference I have also uploaded the video file that is causing an issue
Your video is probably in unsupported codec as said in the comment.
By saying codec, it's not the container format (mp4).
A container format is a format that combines several tracks (audio or video) along with some extra information (such as metadata) into one file or stream.
Currently most browsers support videos with mp4 format using baseline H.264 as image codec and arc/mp3 as audio codec.
Check if your video codec is H.264. Your browser can play sound proves that you got the right codec for audio, but maybe you're using some unsupported video codec.
Even if your video is H.264, you may still encounter problems. AFAIK, Chrome supports only yuv420p pixel format, while safari can also support yuvj420p. The version of H.264 may also cause problem, use baseline will be a good choice.
Your only way to make the video work is to transcode it to browser compatible format (Most video hosting websites will do this for you). You can do this with FFmpeg using the command below.
ffmpeg -i <Your video path here> -c:v libx264 -c:a aac -strict -2 -pix_format yuv420p -profile:v baseline -preset:v fast <Output video path here>
For my WebService i need to record my desktop screen (+ audio). For personal use apples build in QuickTimerPlayer record function works totally fine.
Unfortunately it saves the records as .mov files.
Dueto the fact that i need to embadded the video in an HTML document via:
`<video width="" height="" controls>
<source src="videos/test.mp4" type="video/mp4">
</video>`
EDIT:
i tried a software called "Wondershare Video Converter Ultimate". when i convert the .mov file into .mp4 with this software the output file (mp4) is of great quality and the browser notices it as valid .mp4 source. but this software costs 100$ there got to be a way to convert .mov into .mp4 of same quality without spending 100$
I need those screen videos as MP4. I tried some converting software but the mp4 output were of such a bad quality that you could not even read whats written on my screen.
Any clew how i could capture my screen (videos) so that i can use the html5 video source mp4 tags?
mp4 is a superset of mov. Just renaming it will probably work. You MAY need to qt-faststart the file.
i finally found a way to display high quality screen records in html 5.
what i tried:
- convert high quality mov into mp4
problem occured:
- mp4 was of very poor quality
solution now:
- i converter .mov into .ogg
-> the .ogg allowed me to keep the video quality almost 1:1 but convert it to a html5/browser readable format
<source src="videos/test4.ogg" type="video/ogg">
we're planning to use a fullscreen html5 video on a website. I've read that MPEG-4/H.264 might be the best format at the moment.
I have the video file available as 1080p mp4 … it's 41.2mb in size. Since the video should play in "relative" good quality and stream really fast, how can i optimize the video file.
Any tips, tricks for me? is 1080p needed for a fullscreen video on desktop or is 720p enough?
What should the output size of a fullscreen video for desktop be?
Regards,
matt
a lot will depend on the intended audience and their connectivity. If they've got good connections and a big monitor they may be able to appreciate 1080p, but 720p is probably going to be okay.
It's better to err on the side of reducing quality vs risking buffering IMO (though that will depend on the use-case obviously). My usual approach would be to work with some target users and A:B test some different quality settings (adjusting both framesize and bitrate, clearing their cache each time) to see where the sweet spot is...
Make sure the MOOV atom is at the start so they don't have to wait for the whole thing to load before it starts to play.
You can create some sample versions of your content fairly quickly using ffmpeg to transcode/transmux with various settings
ffmpeg -y -i {source-file} -s 1280x720 -c:v libx264 -b 3M -strict -2 -movflags faststart {target-file}
-s defines the target output size
-b defines the target bitrate
movflags faststart will run a second pass to ensure the moov atom is where you want it
Also, depending on your mobile target you may be better off with a fragmented MPEG format that allows for adaptive bitrates (eg HLS) so the browser can decide which bitrate/framesize it can best display for the request
I've been spending a lot of time with HTML5 video lately and just came across this thread-- Miro is a nice, simple (and free) option that can output in the major formats, i.e. mp4, webm & ogg theora.
720p would be enough, especially if you can add a semi-transparent film over the top to hide any artifacts. You really don't want it to be slow and jerky.
Format wise you can use as many as you like in the <video> tag (for whatever browsers you need to support). E.g.
<video poster="path/to/screenshot.jpg">
<source src="path/to/video.webm" type="video/webm">
<source src="path/to/video.ogg" type="video/ogg">
<source src="path/to/video.mp4" type="video/mp4">
</video>
You can even add a flash fallback. Anything inside the video tag other than <source> attributes is ignored by browsers that support html5 video. Therefore:
<video poster="path/to/screenshot.jpg">
<source src="path/to/video.webm" type="video/webm">
<source src="path/to/video.ogg" type="video/ogg">
<source src="path/to/video.mp4" type="video/mp4">
<!-- Flash fallback -->
<object data="flvplayer.swf" type="application/x-shockwave-flash">
<param value="flvplayer.swf" name="movie"/>
</object>
</video>
I work with HTML5 video a fair bit and built a free (for under 20MB files) converter that takes any video file and outputs webm, ogg and mp4 files along with your <video> tag: http://html5backgroundvideos.com/converter/