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).
Related
I receive mp4 videos where the video stream codec is H.265 HEVC. The newer iOS devices record in this format and only Safari and mobile Safari can play it back right now, however the majority of the world does not have Apple devices, even in the bubble of the US. So I re-encode these videos into the (now) widely accepted H.264 so I can serve them for Firefox, Chrome and other non Apple browsers.
However since I already have the HEVC version, which does provide a better compression/quality than H.264, I'd want to serve that together with the H.264 so the viewer device can choose which one it gonna pick. This is kind of like the srcset for img.
The good news is that there is way to do that: instead of
<video controls src="h264.mp4"></video>
I can have
<video controls>
<source src="h264.mp4" type="video/mp4; codecs=avc1">
<source src="hevc.mp4" type="video/mp4; codecs=hevc">
</video>
The bad news is that this works with Linux Chromium stable and beta, Windows Chromium, Edge. But Firefox trips both on Linux and Windows. How can I fix this? I must include codec information because both files are mp4.
With trial and error I figured out that Firefox accepts the codec string if I not only specify avc1 but I also fully specify the profile and the level with a specific 6 digit hexadecimal code, for example:
type="video/mp4; codecs=avc1.64001E"
It's another question how someone can come across that hexadecimal code, for details look at How can I (or is it possible to) convert the AVC codec profile and level to the MIME codec definition? and https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter#AVC_profiles
I am using
video/mp4
format and using in 'video js', this is working fine in chrome but having issue with Firefox. Getting following error in console:
Specified "type" attribute of "video/mp4" is not supported. Load of media resource # failed.
Is there any single video codec supported by all major browsers like Chrome, Firefix, IE and Safari.
Thanks in advance.
MP4 is a container format so it's also important what codecs you put inside it.
Firefox supports MP4 with H.264 for video and AAC or MP3 for audio and only if you have a third-party decoder available. If you're looking for a single format to rule them all you're out of luck since there's currently none.
The way you handle this is transcoding the same content file to multiple formats and use a fallback mechanism in your player.
See the Media Formats page on Mozilla to get an idea of what is supported and where. For eg. WebM with VP9/VP8, Vorbis/Opus works on Firefox.
In general, the fallback works by specifying all the different versions of the same file as sources for your <video> tag. The browser will choose the first that it can play.
Example from HTML5 Rocks:
<video controls>
<source src="devstories.webm" type='video/webm;codecs="vp8, vorbis"'/>
<source src="devstories.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>
If the browser cannot play WebM it will fall back to MP4.
In my non-exhaustive tests I found that h264 video with aac audio in an mp4 container (transcoded with ffmpeg) works at least for the following browsers:
Chrome 80 on Android and Windows 10
Safari on iPadOS and iOS 13.4, and on MacOS 10.15
Internet Explorer 11 on Windows 10
Firefox 74 on Android and Windows 10
Edge 80 on Windows 10
I encoded a video file from a digital camcorder with the following ffmpeg parameters on Ubuntu 18.04:
ffmpeg -i before.mov -y -loglevel 31 -filter:v fps=fps=30 -movflags +faststart \
-f mp4 -vcodec libx264 -vf scale=1280:-1 -acodec aac -b:a 128k \
-b :v 1000k -preset faster 'after.mp4'
Edit
I found out that, strangely, an mp3-audio file plays back in Safari/MacOS in the audio-tag. But a video with an mp3 audio-track does not playback the audio.
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>
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/
It's strange, some MP4 files will play in HTML5, but others won't. Here is a test page http://psdtucss.com/test/test2.html, open it in Chrome 19.0.1084.46 m. The first MP4 plays, but the other one won't. What's the reason. The code is very simple:
<h3>the first mp4 file can play</h3>
<p><video width="640" height="264" controls="controls"><source src="1.mp4" type="video/mp4" />Your browser does not support the video tag.</video></p>
<h3>but the other can't play</h3>
<p><video width="640" height="264" controls="controls"><source src="2.mp4" type="video/mp4" />Your browser does not support the video tag.</video></p>
How can I fix this?
I tried videojs, but still some MP4 files won't play. Test page is here:
http://psdtucss.com/test/test.html
mp4 is only the container format. It may contain video and audio in a number of different codecs. Players (including those in a browser) need to support the container format and all of the used codecs in order to play a video properly.
Using VideoJS is definitely a good idea, it handles a lot of browser-specific workarounds for you.
However it does not solve one problem: There is no single video codec supported in all browsers. (See also Wikipedia: HTML5 video: Browser_support)
The practical solution probably is to provide two versions: h264 in a mp4 container and what is usually called webm (VP8 video and vorbis audio in a specific Matroska container). With those two you cover all major browsers.
For video conversion/recoding there are some tools and services available. I have no idea about your operating system or requirements. So just as a wild guess:
Something I used to help a friend publish a few videos on his little blog is this shell script using ffmpeg for conversion. It still leaves a lot of potential for improvement (in all of video quality, performance and coding) but should be good enough to get started.
The first video uses h264 encoding which is supported by everything except Firefox and Opera. The second video uses the MPEG-4 video codec which is not supported by browsers. The only widely supported video codecs are Theora, H.264 and VP8.
MPEG-4 Part 2 video codec is different from the MPEG-4 Part 14 container format
Your video 1.mp4 is encoded using h.264 but video 2.mp4 is not.
get MediaInfo to check about it.
MP4 supports multiple codecs. Some players don't support all codecs (some codes require licensing, or some codecs were released after the browser was written).