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">
Related
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.
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/
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.
I'm pulling my hair here trying to figure out why Safari (v6) won't play .mov files.
This is my setup, simplified -
<video width="800" height="450" controls="controls" preload="none">
<source src="example.mov" type="video/mp4" />
Your browser can't play this video.
</video>
What I'm trying to achieve is uploading movie clips to a WordPress blog from an iPhone. iPhone saves video in .mov with h264 encoding (correct?). It would be too much of a hassle for the client to render other formats as well when uploading, and we decided to settle with this format.
In Chrome, I can see this video but in Safari it won't play, even when accessing the file directly. The player simply displays its UI bar with a loading statement. I get no errors.I've also made sure to set the .htaccess file to include AddType for .mov / quicktime.What could I possibly be missing?
Could you please put this example online? Be good to examine this example.mov with ffprobe.
IOS Safari seems very sensitive how MP4s are encoded. Only thing I've found that works for me is the libx264-ipod640.ffpreset with ffmpeg. See https://github.com/kaihendry/recordmydesktop2.0 for more.
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).