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>
Related
I am trying to use the html tag to play a short clip on my intranet site which runs on the SharePoint Online platform. Here is the code I have tried:
<video width="100%" loop="loop" autoplay="autoplay" src="/sites/pathtosite/SiteAssets/videos/clip.mp4" type="video/mp4"></video>
and:
<video width="100%" loop="loop" autoplay="autoplay">
<source src="/sites/pathtosite/SiteAssets/videos/clip.mp4" type="video/mp4"></source>
</video>
Both versions of these snippets work in chrome and firefox, but no video is shown in IE (v11). When I use the dev tools (press F12) in IE and record network traffic while the page is loading, I see that i get an http response of 206 for the video. It only loads ~12 KB of the file (~5MB total). The initiator column for the request is blank which i thought was weird too.
I understand the 206 is a partial content response, and the browser is supposed to retrieve the file in chunks. It works properly in the other browsers, but IE doesn't request the rest of the file for some reason.
Does anyone have any ideas?
Regarding :
"#VC.One : The video you posted does work on our intranet site! What does this mean for my mp4 file? It was converted from .mov to .mp4 (H.264) using VLC (file->convert)."
You did not provide any details about the input file, but likely it means your video has an incompatible H264 profile. Encoding with a setting of profile Baseline # level 3.0 is best for successful playback on all systems.
Solutions :
(1) Within Internet Explorer options, try enabling option (tick) : "Use software rendering". This should be the simplest way to get video playback. If still problematic, try my other solutions...
(2) Try using a <video> tag setup like this :
<video width="100%" controls loop="true" autoplay="true">
<source src="myVideo.mp4" type="video/mp4" codecs="avc1.4D401E, mp4a.40.2" />
</video>
(3) Re-encode the MP4 video with acceptable [to Internet Exlorer] settings for H.264/MP4.
I don't convert with VLC but for best results :
Make sure the input .mov contains...
video of H.264 codec (and AAC/MP3 audio, if has sound).
H.264 is encoded with Baseline profile.
If input is not H.264 then un-tick option "Keep original video track" (it must be un-selected).
"#VC.One: I re-encoded the file using HandBrake and it works! Thank you very much for your help."
You're welcome and I'm glad you got a useful suggestion.
PS: +1 for actively trying to solve issue by yourself too.
You used the HandBrake solution, but for FFmpeg users (like me) we can try :
ffmpeg -i input.mov -c:v libx264 -profile:v baseline -level:v 3.0 -color_primaries 1 -color_trc 1 -colorspace 1 -refs:v 1 -strict -2 output.mp4
Finally...
If still any getting issues, then share a (temporary) online link to the input .mov file for analysis.
Maybe the loop and autoplay values should be a boolean (i.e true or false) value....
<video width="100%" loop="true" autoplay="true">
I don't think you need to care about IE because it has only 4% of share in whole. You can see here https://www.w3schools.com/Browsers/default.asp
But if you want to work it on IE then you need to check video tag support in IE browser.
You can see it has no support but in IE 11 https://caniuse.com/#search=video
I don't this is properly supported so you can use modernizer for this purpose.
Hopefully, it will help. s
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).
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
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).