So I accidentally opened an mkv video file with Chrome, and to my surprise it played it using the native player:
<video src="video.mkv"></video>
It was playing perfectly. HTML5 video supports matroska container?
HTML5 doesn't support any video formats, or rather HTML5 doesn't specify what formats browsers should support. It's up to the browsers to decide which formats they choose to support. Apparently Chrome plays .mkv, but I wouldn't be surprised if other browsers didn't play the same file.
The website has probably set the mimetype of the file to video/webm. Chrome will open this inline rather than forcing a download (because otherwise it doesnt know what to do with it or how to open it).
E.g., in apache this is done by using the AddType directive (can be done in a htaccess):
AddType video/webm .mkv
I'd be surprised if browsers didn't support mkv, as the webm container is just a restricted version of the matroska format. Beyond that you'd have to check the codec of the video inside, and ensure your browser can handle that. If the video format is VP8 or VP9 and the audio is Opus or Vorbis it's webm compliant and might as well be renamed as such. Note that H.264, H.265 and MP3 are not webm compliant and you should avoid using that extension on files that include those formats, the video would still play but it would technically break the webm specification and is frowned upon.
Related
I'm creating my own audio, without controls of the browser.
<audio src="http://50.7.98.194:8081/~dl3/cgi-bin/dl.cgi/bqmu5mltxcqy43mxecgo4gnw743qr7fd7io22q5xj4/gl1mwvp6b326.mp3" id="audio">
</audio>
I have these functions, called when clicked some buttons:
function play()
{
audio.play();
}
function play()
{
audio.pause
}
function stop()
{
audio.pause();
audio.src = audio.src;
}
But for now, I only can reproduce mp3 or ogg files, but not a live stream radio.
I read about some plugins, but I need do it with pure html5.
Could you help me, please?
Thanks very much,
Playing audio from a "live source" seems to be supported by modern browsers. Basically just use the normal HTML 5 audio tags, and input the "live stream" URL as the source, ex:
<audio controls>
<source src="http://audio-mp3.ibiblio.org:8000/wcpe.mp3" type="audio/mpeg">
<source src="http://audio-ogg.ibiblio.org:8000/wcpe.ogg" type="audio/ogg">
</audio>
And the stream "just works" as it were, though attempting to seek with the default controls does nothing. So eventually you may want to replace the controls with "custom" ones, in normal HTML 5 media style. For backward compatibility to non HTML 5 browsers, this project may be useful: https://github.com/etianen/html5media/wiki/Embedding-audio (haven't tested it with live streaming but could/should work). Mp3 codec seems to be supported in major browsers (barring possibly firefox on Linux [?]). Opus might be another nicely cross platform option, I'm not sure codec wise what is the "best" choice as it were.
With some streams (shoutcast I presume) I have had to add a closing ';' to the URL, see https://stackoverflow.com/a/3182814/32453 for notes there, but that's basically just to get the "right" url.
Unfortunately, there is still no single video and audio codec, which is supported by all browsers! The programmers have to ensure that there is fallback provided for use-cases where browser A doesn't support codec B and vice versa.
You can take a look at this compatibility table, for both desktop and mobile browsers.
Desktop:
Internet Explorer (9.0+) support MP3 and AAC codecs
Chrome (6.0+) support Ogg Vorbis, MP3, WAV+
Firefox (3.6+) support Ogg Vorbis, WAV
Safari (5.0+) support MP3, AAC, WAV
Opera (10.0+) support Ogg Vorbis, WAV
Mobile:
Opera Mobile (11.0+) supported codecs are device-dependent
Android (2.3+) supported codecs are device-dependent
Mobile Safari (iDevices with iOS 3.0+) support MP3, AAC
Blackberry (6.0+) support MP3, AAC
Since flash is still widespread enough, it's probably the safest fallback.
Also, I want to note that there's nothing worse to use some library, some of them (e.g. jPlayer) provides very powerful interface and this only can help you to produce better code!
I think you can find everything you want to know in the following article: HTML5 Audio Radio Player by Opera Devs
I am serving a video via the HTML5 video element. I'm finding conflicting information about the appropriate MIME type for m4v video. Most demos set the type attribute to video/mp4 in the source tag in the markup. Some articles I've read indicate video/m4v for the web server Mimetype, while others indicate video/mp4. Which is correct?
See for example, this article indicating video/m4v mimetype: http://html5center.sourceforge.net/make-your-html5-video-play-on-mobile-devices
And this article indicating video/mp4: http://www.coolestguyplanettech.com/use-html-5-video-on-all-browsers/
The standard media type is video/mp4.
The standard mp4 container format is commonly used for both AAC audio, and H.264 video + AAC audio. These have different media types, audio/mp4 and video/mp4, however often you want different applications for audio and video and on some systems it is only possible to associate a default application with a file extension. Therefore it has become popular in some circles to use the extensions .m4a and .m4v for audio and video(+audio), respectively, in an mp4 container. However this does not affect the media type, which already distinguishes these using the audio or video prefix.
A twist, however, is that Apple started using their own media type, video/x-m4v, for videos from their store, which are in an mp4 container and use a .m4v extension. This is set to open the video in iTunes by default. Sometimes that is necessary because the video uses DRM, AC-3 Dolby Digital audio, or other capabilities that are not commonly supported in an mp4 container, but which are supported by iTunes for files with a .m4v extension. If you rely on such capabilities then you may want to use this media type instead of the standard one.
Media types with no x- are standardized in an RFC and tracked by IANA. No media type with the name video/m4v has been standardized. Non-standard media types have a x- prefix.
I only write HTML5 for special projects, but I've had a problem which I was able to solve quite by accident. In my blocks, I was writing the video code like this:
<source src="Videos/myvideo.mp4" type="video/mp4">
<source src="Videos/myvideo.webm" type="video/webm">
Here was my problem: If I put the mp4 line first, Google Chrome would play the video part, but there would be no sound. If I put the webm line first, Google Chrome would play the video and sound correctly, but Apple Safari would not detect the video at all. Even if I added the codec information in the type= statement, it had no effect.
I was about to cave in and try to use Flash, but I happened on the solution, mostly by accident. In the line for mp4, I replaced the type="video/mp4" with type="video/m4v". It cured the problem completely! Note: I did not change the video file extentions from mp4 to m4v -- I only used m4v in the type= statement.
I couldn't find any documentation to tell me to do this, I just got interested in the difference between .mp4 and .m4v file extentions, and started playing around. I use Linux (Xubuntu) and I had created my videos as both webm and H.264 mp4 files, using Openshot Video Editor. Maybe the inner workings of Openshot caused this to be an issue, but anyway -- that's how I solved this problem. My mp4 videos play perfectly. I hope this helps somebody else -- MinnesotaJon
Answering this 8 years later with actual testing in Brave Version 1.22.70 Chromium: 89.0.4389.105 (Offizieller Build) (64-Bit) and Firefox 86.0.1 (64-Bit) on Linux.
<video controls="" controlslist="" preload="metadata">
<source type="video/m4v" src="https://example.com/v.m4v">
</video>
Does NOT work.
But video/x-m4v and video/mp4 both work with the m4v file I am testing with. I guess it's best to use x-m4v based on the accepted answer.
Actually that totally depends on which video container you are using. Most browsers support the webm and/or mp4 file formats. Serving a combination of these two sourcefiles ensures browsers kan view the file. There's also the .ogg format if you wish to include it.
Not so sure about the m4v format, but it sounds like it's not one commonly used on the web. Anyway, I'd say serve m4v with a video/m4v MimeType and mp4 as a video/mp4 MimeType.
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).
How can I play .mp4 videos using HTML5 using the video tag? Does chrome support HTML5 with .mp4 videos?
Safari can play h264 encoded mp4 videos, Chrome nolonger supports them, Firefox never did. If you pick Google's WebM format, it will work in both Chrome and Firefox.
chrome does support MP4 video with H.264 video codec, But it can only play video with "Baseline profile" of H.264.
The state of media currently with browsers is that you will likely not find a format that works with all browsers, so you will need to encode your video/audio in at least 2 or 3 different formats. There is a nice jQuery plugin called jPlayer that I would heartily recommend if you're going to start out with HTML5 media. The documentation is pretty good and it will really help you work with different browsers. http://jplayer.org/.
How can I read a Red5 (RTMFP) stream using HTML5?
Red5 supports different kinds of streaming*, so I don't know which kind of streaming you mean:
Streaming Video (FLV, F4V, MP4)
Streaming Audio (MP3, F4A, M4A)
Recording Client Streams (FLV only)
*source: Red5 on Google Code.
You probably want to use the HTML5 Video Tag and/or the HTML5 Audio Tag to 'play' the stream. Therefor you will need to do some conversion.
Audio streaming
New technique, lot's of browsers and no universal codec support yet.
See browsers + codec's it supports*:
FireFox 3.6+
Ogg Vorbis
Wav
Safari 5+
MP3
WAV
Chrome 6
Ogg Vorbis
MP3
Opera 10.5+
Ogg Vorbis
WAV
Internet Explorer 9 (beta)
MP3
WAV
*source: Native Audio in the browser.
Video streaming
Currently there's a discussion going on about the HTML5 Video Codec, between Ogg Theora and H.264. So make a conversion to one of those formats. I would recommend H.264 because it looks like Red5 will implement H.264 support in the future.
As with audio as with video.. New technique, lot's of browsers and no universal codec support yet. See for list: HTML5 Video on Wikipedia.
After conversion
The easiest way to check for support of the video and audio tags is to dynamically create one or both with scripting and check for the existence of a function:
var hasVideo = !!(document.createElement('video').canPlayType);
This simple code line will dynamically create a video element and check for the existence of the canPlayType() function. By using the !! operator, the result is converted to a Boolean value, which indicates whether or not a video object could be created.
Alternatively
You can serve 2 streams with a Flash Fallback:
<video src="video.ogg">
<object data="videoplayer.swf" type="application/x-shockwave-flash">
<param name="movie" value="video.swf"/>
</object>
</video>
The video tag is used by default, if not supported the browser will use the flashplayer.
Edit:
I now see that Red5 supports H.264 (Live Stream Publishing). Read here how to use the HTML5 video tag with the H.264 codec
You also might wanna have a look at: Adobe's Video Player Widget.
A short answer: you can't. The browsers will not support streams over RTMP (RTMFP), RTP or UDP. Your stream must be sent over HTTP to be accessible (in fact you have to emulate a static file on the server).
Also WebM deserves a few words. In May 2010 Google announced a royalty-free codec for HTML5 viceo purposes. As of now, the latest versions of alternative browsers (Mozilla, Opera, Chrome) has the ability to play it. Only the big ones who have invested good bucks to H.264 resist.
Now days a couple of media servers support WebM. I guess the first was Flumotion to implement it. I also have my own GPL software for live-streaming WebM called stream.m. It is a very early release but if you want to give it a try I'm not stopping anyone. :)
RTMFP and HTML5(WebRTC or Websocket) protocols are supported in WCS4
So you can publish RTMFP stream to the server and play this stream using Chrome(WebRTC), Firefox(WebRTC) or iOS Safari browser(Websocket).
Red5 does not support RTMFP.
RTMFP is a peer-to-peer designed protocol, however server can be used like RTMFP peer, therefore it would be simple client-server connection Flash-Server like RTMP.