I'm trying to include a HTML5 video player on a site.
I've got the following code:
<video id="player" controls="controls" width="100%">
<source src="http://trailers.apple.com/movies/paramount/captainamerica/captainamerica-tlr1_h.480.mov">
</video>
This works in Safari, but not in Chrome and Firefox, is the .mov encoded in a weird way that doesn't allow them to be used like this? trailers.apple.com which uses the same URLs work fine in their player.
The probability that on apple's site they have multiple links to different encoded movie files. They do this because there is no current movie format that works across all major browsers.
Also just because the URL is the same doesn't mean that the same video is being served up on apples website... They could be doing some URL mapping magic to get a correct video format.
look at this link for a good current table of support per codec
http://diveintohtml5.info/video.html#what-works
Apple only serves up their videos in the MOV format. This means that only Safari can watch the videos since it is the only browser that uses Quicktime in its HTML5 video implementation. If you try opening the file directly in Chrome you should either see it download or the Quicktime plugin kick off.
I personally don't have Quicktime so when I go to the Apple trailers site, I get a link to download Quicktime and can't proceed any further without doing so.
captainamerica-tlr1_h.480.mov is just a .mov file that redirects to captainamerica-tlr1_h480.mov But it still won't work in browsers that doesn't use Quicktime for <video>. You have to set User-Agent to "Quicktime" for trailers.apple.com.
other browsers doesn't understand .mov, quicktime does. you need to serve up separate files for safari. you can generate needed files with nero or in-browse via media.io.
Related
I need to play MPEG-1 files dynamically from a browser. Uploading them to YouTube or converting the videos is not an option.
How can I do this?
I've seen this, but the answers do not apply to MPEG-1. Is there a way to play mpeg videos in HTML5?
The video tag is not working for the file with Chrome:
<video class="fullscreen" autoplay>
<source src="video/test2.mpeg">
</video>
It just displays a black box and stuttering noise/sound. I can verify that the video is not corrupt because I can play it with VLC. I only need this to work on one specific browser (it does not have to be cross-compatible). Plugins are OK too, as long as I do not have to convert the video. Though I'd rather avoid them.
Some browsers don't support older formats in <video> on purpose, to limit number of crappy, legacy, and potentially insecurely implemented video formats on the web.
The only combination that has a decent chance of working is H.264 (MP4) and WebM (or Ogg Theora), so you must convert the video and for good browser support you will have to generate at least these two formats.
The good news is that modern codecs are much more efficient than MPEG-1, so you'll get much smaller files.
Other options may be:
Give users a direct link to the video so they can download it and play in an external player like VLC.
Embed video using oldschool <object> element, and hope some browsers still have legacy plugins that can play videos (but e.g. Chrome has recently removed support for all plugins except a couple written specifically for Chrome's own API).
Use Emscripten (asm.js) to compile an MPEG-1 decoder to JavaScript and decode the video yourself to <canvas>. JS these days is fast enough to pull that off (although it will quickly drain battery of mobile devices, and a poor video codec combined with an extra download of a JS decoder will be a massive waste of bandwidth).
You can play MPEG-1 videos using JSMPEG: https://jsmpeg.com/
Sample code here: https://github.com/phoboslab/jsmpeg/blob/master/view-stream.html
I have some trouble getting my .mp4-videofiles working. I have edited my .htaccess with the necesserary addTypes, right html5-video-tags ect, but still some of them WON'T show!
I have now tried converting them from .mp4 to .mp4 wich made some of them work live on web.
But heres the real issue that i really can't figure out why it is so:
All my videoes works very well in both MediaPlayer and VLC, BUT, when i lay them on my website, the videoes won't work. I have tried access them via a direct link and the "corrupted" ones won't work while the working ones works.
What it tells me is that i have the wrong MIME-types (No video source found with the supporting MIME-type) - correct translated? ;)
All videos have the same video-html-settings:
<video width="300px" height="168px" preload controls>
<source src="path-to-video/video.mp4" type="video/mp4">
</video>
What is wrong?! :S I'm have no experience at all in videoes and Google comes up with nothing, than i can use some weird looking "ConvertThisToMP4" or "LetMeFixYourMP4"-programs...
Hope you guys will help me or lead me on the right way :)
Sorry for my bad english...
mp4 for web and mp4 for playback in VLC are different things. You'll get different mp4 video support depending on your web browser, though most modern browsers will handle mp4 in some way.
mp4 is a 'container' format, and as such can contain video compressed with many different video and audio codecs. For an mp4 video file to work in a web browser it needs to be encoded with the h264 video codec and AAC audio codec. Some browsers are even more specific and require videos to be encoded with 'baseline' h264 which uses a simple/fast to decompress version of h264 (this is generally for mobile browsers).
You should have a look at your video files using a media inspector to check what the codecs are for the videos. in VLC you can do this from tools->media information then choosing the 'codec' tab.
You can use handbrake ( http://handbrake.fr ) or mpegstreamclip ( http://www.squared5.com ) to recompress the videos to h264/aac/
As an aside, In your HTML you don't need the px values in the width and height tags, inside HTML all size values are assumed to be px, it's only in CSS you need to define the unit.
I need to play .m4a files (recorded on iPhone) in IE(9+) and Safari (iPad, iPhone). I am facing problem with setting correct MIME Type. For playing in IE10 I need to set audio/mp4 but for Safari audio/aac.
With audio/mp4 I am getting Cannot play audio file on iPad.
With audio/aac I am getting Error: Unsupported audio type or invalid file path in IE
Is there a type I can set for both?
<audio controls="controls" autoplay="autoplay">
<source src="play.aspx?filename=sound.m4a" type="audio/mp4" />
</audio>
Notes
Using an alternative player is not a solution for me.
I serve the files thorough .aspx page so I can control HTTP headers.
From observing the page HTML 5 Audio Across All Browsers using m4a, oga, mp3 and Flash it seems that possible solution is to give type="audio/mp4" and NO conten-type header. However removing HTTP header in aspx is rather too complex for problem I am trying to solve(see Removing/Hiding/Disabling excessive HTTP response headers in Azure/IIS7 without UrlScan).
Audio is still in working draft, so browser experience will vary.
Having said that, the mime type that's most prevalent is audio/x-m4a. Some sites show audio/m4a-latm as a valid mime type for m4a audio but as of this writing, even Chrome doesn't recognize that mime type.
You can try this snippet in different browsers to see if it works - I verified it in IE11, Chrome (v37) and IE9 (emulated via Dev Tools).
Audio Tag sample
I've also found (personal observation) that audio recorded on iPhone doesn't play most of the time on web. Almost all browsers say the file is invalid and if you download the recorded file, it doesn't even play in media players (e.g Windows Media Player). I suspect iOS core audio is to blame here but haven't found anything conclusive yet. Audio recorded from Android works fine though.
At this point, having a flash fallback seems like the best option (won't help on iHateFlash devices though).
I want to add a link(wmv file) to my page that would work across all the browsers. Currently, the link is embedded automatically on the page in IE8. I could add an object tag with object type="video/x-ms-wmv" but that would work only in windows not on mac.
My video
wmv is a proprietary media format that is only supported by certain plugins. You will not get universal support for it.
If you want to embed video with good browser support then you need to use a mixture of codecs and container formats.
You can use HTML 5 video with webm for most, falling back to HTML 5 video with h.264 for a couple of browsers, and then Flash for everything else.
I am planning on video upload capability on a public website.
I am not going with Flash instead going with HTML5 using MediaElement.js
My goal is to make sure that processed videos play on browser and all smart devices
I used to convert uploaded videos to flv file to play using flash.
I will use FFMPEG to convert uploaded videos to the target format.
My question is how many different format do I need to process\convert the uploaded files?
You will need at least 2 for the HTML5 video element. You need to supply a H264 and either Ogg or WebM. See Wikipedia for the supported codexs.
I have never used MediaElement.js but it look like they can work with either of the two formats in browsers that don't support the element.
if you want to play everything via HTML5 then YES, you do need 2 video-files for each video, as explained by Maurice.
BUT: You could use the Flash-fallback and only use mp4 videos (MEJS will take care of Flash). That way it plays on iOS, many Android devices and chrome, safari and IE9 via HTML5 - Firefox and Opera users will see the Flash-player.