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>
I tried the following code below:
<audio src="http://XXX.XXX.XXX.XXX:XXXX/;" controls autoplay></audio>
I'm using Mac and this code worked fine with Safari but not with Chrome or Firefox.
Is there any solution using only HTML5? If not, can I make a fallback with some Flash open source library? How?
There might be some third party audio player for aac but I will share some links on my vast search I did
1 - HE AAC support
As per this post and also wiki pedia HEAAC
It says chrome supports HE-AAC
and here is a stack overflow post that will I guess help you to move formward.
SO AAC support
And here is another link saying chrome supports
**The MP4 container format with the H.264 video codec and either the AAC audio codec or the MP3 audio codec is natively supported by Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. Firefox will soon support the format, but only when a third-party decoder is available.
The MPEG media formats are covered by patents, which are not freely licensed. All the necessary licenses can be bought from MPEG LA. Since H.264 is currently not a royalty free format, it is unfit for the open web platform, according to Mozilla [1, 2], Google [1, 2] and Opera. However, since royalty free formats are not supported by Internet Explorer and Safari, Mozilla has decided to support the format anwyay, and Google never fulfilled their promise to remove support for it in Chrome.**
LINK : AAC Support
Please let me know if any of the link is help ful
No AAC is only supported by Safari and Internet Explorer. Here is a list for audio file support.
IE - MP3, AAC
Chrome - OGG, MP3, WAV
Firefox - OGG, WAV
Safari - MP3, AAC, WAV
Opera - OGG, WAV
I assume that listeners are using the latest versions of each browser.
You can create a WAV and a AAC stream and provide the AAC if listener is using IE with html if-else hacks. But this solution is costly.
I've had the same issue. With Chrome, try using a video tag instead of an audio one:
<video controls="controls" width="100%" height="60px">
<source src="xxxxxxxxxxx"/>
Your browser does not support video.
</video>
The only issue is that the Play/Stop controls hides automatically.
<video id="live" autoplay controls>
<source src="http://[WOWZA-IP]:1935/Live/mp4:[LIVESTREAMNAME]/playlist.m3u8" type="video/mp4" />
</video>
I am trying to play h264 encoded live stream using html5 video tag. Live stream is broadcasted by wowza media server and when visiting src link I get a valid playlist file. When trying to play the stream on android chrome browser, player does nothing and shows black screen.
Is this html5 video tag related issue or maybe broadcaster?
These are the formats you can play using html5 source tags.
Think of a video format as a zip file which contains the encoded video stream and audio stream. The three formats you should care about for the web are (webm, mp4 and ogv):
.mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis
There is actually a good range of solutions for this. One solution would be to detect if HLS can be played:
document.createElement('video').canPlayType('application/vnd.apple.mpegURL') !== ''
However, this would not allow you to play HLS content on devices which do not support playback. At this moment, playback is only supported on Microsoft Edge, iOS Safari, OS X Safari and Android (however, I strongly advise against using HLS on Android due to limitations)
An other solution to play HLS across all platforms in HTML5 is to use an HTML5 HLS player such as THEOplayer. They managed to allow HLS to be played on all popular platforms and devices, including those without Media Source Extension support. Currently, the list of supported browsers and platforms includes: Internet Explorer, Edge, Firefox, Chrome, Opera and Safari on Windows, Linux, Mac OS X, Android, iOS and Windows Phone.
On Browsers supporting Media Source Extension you can use https://github.com/dailymotion/hls.js
For workarounds using flash, you can use FlasHLS chromeless player.
Try FlowPlayer. It provides a full HLS support with the least effort in server side!
I have an mp4 video that I want to play in IE9 using HTML5 <video> tag. I added the MIME type to IIS 7 so if I browse http://localhost/video.mp4 it plays in both Chrome and IE9 but not in HTML5, Chrome plays the video in HTML though. Here's the code:
<html>
<body>
<video src="video.mp4" width="400" height="300" preload controls>
</video>
</body>
</html>
Any ideas?
Thanks
UPDATE:
Tried the same file in Firefox 5.0 and it didn't work either, only Chrome is able to play the mp4 video.
for IE9 I found that a meta tag was required to set the mode
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<video width="400" height="300" preload controls>
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag
</video>
Ended up using http://videojs.com/ to support all browsers.
But to get the video working in IE9 and Chrome I just added html5 doc type and used mp4:
<!DOCTYPE html>
<html>
<body>
<video src="video.mp4" width="400" height="300" preload controls>
</video>
</body>
</html>
If it's still not working here's what may certainly be a solution: encode the mp4 with compression format H.264. If you encode it with format mpeg4 or divx or else it will not work on IE9 and may as well crash Google Chrome. To do that, I use Any Video Converter freeware. But it could be done with any good video tool out there.
I've been trying all solutions listed here and tried other workaround for days but the problem lied in the way I created my mp4. IE9 does not decode other format than H.264.
Hope this helps,
Jimmy
Dan has one of the best answers up there and I'd suggest you use html5test.com on your target browsers to see the video formats that are supported.
As stated above, no single format works and what I use is MP4 encoded to H.264, WebM, and a flash fallback. This let's me show video on the following:
Win 7 - IE9, Chrome, Firefox, Safari, Opera
Win XP - IE7, IE8, Chrome, Firefox, Safari, Opera
MacBook OS X - Chrome, Firefox, Safari, Opera
iPad 2, iPad 3
Linux - Android 2.3, Android 3
<video width="980" height="540" controls>
<source src="images/placeholdername.mp4" type="video/mp4" />
<source src="images/placeholdername.webm" type="video/webm" />
<embed src="images/placeholdername.mp4" type="application/x-shockwave-flash" width="980" height="570" allowscriptaccess="always" allowfullscreen="true" autoplay="false"></embed> <!--IE 8 - add 25-30 pixels to vid height to allow QT player controls-->
</video>
Note:
The .mp4 video should be coded in h264 basic profile, so that it plays on all mobile devices.
Update: added autoplay="false" to the Flash fallback. This prevents the MP4 from starting to play right away when the page loads on IE8, it will start to play once the play button is pushed.
Internet Explorer 9 support MPEG4 using H.264 codec. But it also required that the file can start to play as soon as it starts downloading.
Here are the very basic steps on how to make a MPEG file that works in IE9 (using avconv on Ubuntu). I spent many hours to figure that out, so I hope that it can help someone else.
Convert the video to MPEG4 using H.264 codec. You don't need anything fancy, just let avconv do the job for you:
avconv -i video.mp4 -vcodec libx264 pre_out.mp4
This video will works on all browsers that support MPEG4, except IE9. To add support for IE9, you have to move the file info to the file header, so the browser can start playing it as soon as it starts to download it. THIS IS THE KEY FOR IE9!!!
qt-faststart pre_out.mp4 out.mp4
qt-faststart is a Quicktime utilities that also support H.264/ACC file format. It is part of libav-tools package.
From what I've heard, video support is minimal at best.
From http://diveintohtml5.ep.io/video.html#what-works:
As of this writing, this is the landscape of HTML5 video:
Mozilla Firefox (3.5 and later) supports Theora video and Vorbis audio in an Ogg container. Firefox 4 also supports WebM.
Opera (10.5 and later) supports Theora video and Vorbis audio in an Ogg container. Opera 10.60 also supports WebM.
Google Chrome (3.0 and later) supports Theora video and Vorbis audio in an Ogg container. Google Chrome 6.0 also supports WebM.
Safari on Macs and Windows PCs (3.0 and later) will support anything that QuickTime supports. In theory, you could require your users to install third-party QuickTime plugins. In practice, few users are going to do that. So you’re left with the formats that QuickTime supports “out of the box.” This is a long list, but it does not include WebM, Theora, Vorbis, or the Ogg container. However, QuickTime does ship with support for H.264 video (main profile) and AAC audio in an MP4 container.
Mobile phones like Apple’s iPhone and Google Android phones support H.264 video (baseline profile) and AAC audio (“low complexity” profile) in an MP4 container.
Adobe Flash (9.0.60.184 and later) supports H.264 video (all profiles) and AAC audio (all profiles) in an MP4 container.
Internet Explorer 9 supports all profiles of H.264 video and either AAC or MP3 audio in an MP4 container. It will also play WebM video if you install a third-party codec, which is not installed by default on any version of Windows. IE9 does not support other third-party codecs (unlike Safari, which will play anything QuickTime can play).
Internet Explorer 8 has no HTML5 video support at all, but virtually all Internet Explorer users will have the Adobe Flash plugin. Later in this chapter, I’ll show you how you can use HTML5 video but gracefully fall back to Flash.
As well, you should note this section just below on the same page:
There is no single combination of containers and codecs that works in all HTML5 browsers.
This is not likely to change in the near future.
To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once.
I have a base profile .mp4 video which plays on one server,
and does not on another.
The only difference is:
one gives a header "Content-Length: ..."
the other "Trasfer-Encoding: chunked".
I found out that Content-Length is not needed,
it is only important, that there should be NO chunked header.
This can be done by turning off compression (deflate or gzip) for .mp4 files.
How this can be done is another issue and another topic:
How to disable Apache gzip compression for some media files in .htaccess file?
There can be another server issue:
it has to give "Content-Type: video/mp4"
and NOT "Content-Type: text/plain"
use both format it works fine in all browser:
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="unbelievable.mp4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="movie.ogg" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
</video>
Internet Explorer and Edge do not support some MP4 formats that Chrome does. You can use ffprobe to see the exact MP4 format. In my case I have these two videos:
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'a.mp4':
Metadata:
major_brand : isom
minor_version : 512
compatible_brands: isomiso2avc1mp41
encoder : Lavf56.40.101
Duration: 00:00:12.10, start: 0.000000, bitrate: 287 kb/s
Stream #0:0(und): Video: h264 (High 4:4:4 Predictive) (avc1 / 0x31637661), yuv444p, 1000x1000 [SAR 1:1 DAR 1:1], 281 kb/s, 60 fps, 60 tbr, 15360 tbn, 120 tbc (default)
Metadata:
handler_name : VideoHandler
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'b.mp4':
Metadata:
major_brand : isom
minor_version : 512
compatible_brands: isomiso2avc1mp41
encoder : Lavf57.66.102
Duration: 00:00:33.83, start: 0.000000, bitrate: 505 kb/s
Stream #0:0(und): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yuv420p, 1280x680, 504 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)
Metadata:
handler_name : VideoHandler
Both play fine in Chrome, but the first one fails in IE and Edge. The problem is that IE and Edge don't support yuv444. You can convert to a shittier colourspace like this:
ffmpeg -i input.mp4 -pix_fmt yuv420p output.mp4
If any of these answers above don't work, and you're on an apache server, adding the following to your .htaccess file:
//most of the common formats, add any that apply
AddType video/mp4 .mp4
AddType audio/mp4 .m4a
AddType video/mp4 .m4v
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/webm .webm
I had a similar problem and adding this solved all my playback issues.
Try the following and see if it works:
<video width="400" height="300" preload controls>
<source src="video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
I had to install IIS Media Services 4.1 from the Windows Web App Gallery.
http://www.microsoft.com/web/gallery/install.aspx?appsxml=http://www.microsoft.com/web/webpi/3.0/MediaProductList.xml&appid=MediaServices
Whithout JavaScript, the only way I could play without errors:
<!--[if lte IE 9]>
<!-- PUT HERE A FLASH PLAYER WITH video.flv -->
<![endif]-->
<!--[if gt IE 9]><!-->
<video controls class="video">
<source src="video.mp4" type="video/mp4">
<!-- REPEAT FLASH PLAYER CODE HERE -->
</video>
<!--<![endif]-->