We are working with a development company to create a program that records videos and then uploads them to a server. Then, on our website, users should be able to view the videos.
Here's the issue. As far as I understand it, .MP4 is the only video file format that can be played in any browser. However, the other development company claims that they will deliver the videos as .MKV video files and then all we have to do on our website is re-wrap the videos or something so they will be playable. I do not understand how that works, and they were being very condescending when I asked for clarification.
The videos have to be able to be played in any browser, and I would rather not have to use any special plugins to convert the videos before playing them.
Please help me understand what they expect me to do.
MP4 and MKV are file formats or wrappers that hold multiple media streams (typically audio and video). The wrapper (MP4 or MKV) tells you very little about the actual audio or video format.
Common combinations are MP4 with AVC video and AAC audio or MKV with VP9 video and Vorbis audio. But you could also do MKV with AVC and AAC.
Rewrapping MKV (AVC/AAC) into MP4 (AVC/AAC) is pretty straight forward and does not require a transcode.
I'd guess that MP4 with AVC video and AAC audio is likely the best cross platform combination at this time.
But delivering video over the internet to a browser with varying available bandwidth - can be tricky and may required multiple different quality levels of the same content.
Related
How to play .avi and .mov video formats in html ?
We are developing the website, where the videos can be uploaded, using html5, videos uploaded are of .ogg, .mp4, .webm. We have native android and ios applicaitons, where the videos can be uploaded of .mov and .avi formats.
Our application should be able to play the videos of .mov and .avi formats.
Request you to please let us know on how to display .mov, .avi formats without any conversion in server side.
.avi files can contain video encoded using any codec but in practice they contain video encoded using the old xvid/divx codecs.
HTML5 supports the x264 and vp8/vp9 codecs.
Flash supports the x264 and the old sorenson codecs.
xvid/divx cannot easily be converted to any of these codecs withouth transocing the hole stream. So there is not quick and easy client-side solution.
As a server side solution for converting .avi to .mp4, avconv and ffmpeg are very popular, widely sued and free. And of course there is a multitude of commercial solutions, too.
For my WebService i need to record my desktop screen (+ audio). For personal use apples build in QuickTimerPlayer record function works totally fine.
Unfortunately it saves the records as .mov files.
Dueto the fact that i need to embadded the video in an HTML document via:
`<video width="" height="" controls>
<source src="videos/test.mp4" type="video/mp4">
</video>`
EDIT:
i tried a software called "Wondershare Video Converter Ultimate". when i convert the .mov file into .mp4 with this software the output file (mp4) is of great quality and the browser notices it as valid .mp4 source. but this software costs 100$ there got to be a way to convert .mov into .mp4 of same quality without spending 100$
I need those screen videos as MP4. I tried some converting software but the mp4 output were of such a bad quality that you could not even read whats written on my screen.
Any clew how i could capture my screen (videos) so that i can use the html5 video source mp4 tags?
mp4 is a superset of mov. Just renaming it will probably work. You MAY need to qt-faststart the file.
i finally found a way to display high quality screen records in html 5.
what i tried:
- convert high quality mov into mp4
problem occured:
- mp4 was of very poor quality
solution now:
- i converter .mov into .ogg
-> the .ogg allowed me to keep the video quality almost 1:1 but convert it to a html5/browser readable format
<source src="videos/test4.ogg" type="video/ogg">
I have had a look at a couple of players like Flow Player, JW Player and a couple more but I can't get it to work exactly in PHP code.
Is there any way to play FLV within HTML Video Tags?
I know MP4 and OGG files will but the thing that I am working on will produce an FLV file.
You should look at video.js from www.videojs.com I have been using it streaming live video feeds. It mimicks the video tag like this:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="480"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="rtmp://localhost/live/test" type="rtmp/flv">
</video>
Works very well for me.
You might consider using some other players that are able to play FLV files; Known browsers (Chrome, Firefox etc...) are not able to run FLV files untill or unless you use some kind of flash player.
If you are using PHP, you might want to use a flash player! Use Adobe Flash Player, don't be shy! YouTube and many other websites use it.
You can also try to stick to the flayers you have already tried.
You can convert videos to MP4 or format of OGG. So that every browser can play the video file using the HTML5 <video></video> tag.
But Remember: Each browser has its own limitaion for playing a video file; you can read browser support here: Mozilla Developer Network
Play it with Flash. I think it is the only way: http://css-tricks.com/forums/topic/how-to-play-flv-in-html5/
You can do it using flv.js or via MediaElement.js (that will use flv.js underneath), although the support is limited to FLVs that contain H.264 video with AAC/MP3 audio.
Use MediaInfo software or your favorite video player to check what codecs are used in your FLVs.
And if you have H.264 + AAC inside, you can also convert it to MP4 losslessly, without reencoding:
ffmpeg -i input.flv -codec copy output.mp4
Technically speaking the HTML5 video specification is codec/protocol agnostic so one could imagine support for flv files could be possible. Problem is: none of the major web browser has implemented it (probably because flv is a proprietary container from Adobe). You will need a flash component to play it back. Either one of the players you mentioned or if you are looking for a standalone free flash player try strobe from Adobe. You can try it here.
If you can produce .f4v files you may have success in renaming them to mp4 and then try and play them in an HTML5 video tag.
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).
i am playing mp3 file in my web with google player :
http://www.google.com/reader/ui/3523697345-audio-player.swf
and i can't playing m4a files with this player too.
there is any way to play m4a files with this player too? or there is another player to play m4a files in my browser?
this is how i am using the player:
<embed type=\"application/x-shockwave-flash\" flashvars=\"audioUrl=songUrl&autoPlay=true\" src=\"http://www.google.com/reader/ui/3523697345-audio-player.swf\" width=\"400\" height=\"27\" quality=\"best\"></embed>
According to this, this is a bit of a complex issue: Flash (the technology your audio player, and most others on the web currently, is based on) is able to play MPEG-4 content, but only when declaring the content video, not audio. Why this is, I have no idea.
You may be able to play M4A sound files if you can find a Flash video player that suits your needs. Alternatively, consider using HTML 5 Audio.
Update: jPlayer, a jQuery/Flash/HTML5-Based audio player, claims to be able to play MPEG-4 Audio content. You should be able to use that.