I am working on a site that needs to convert videos from their original format into mp4 and ogv so I can use the HTML5 video tags. I do the conversion with ffmpeg and upload the videos to Amazon S3. I then have a Cloud Front setup to stream from my S3 bucket.
I have been able to get the videos to play in HTML5 but they are very choppy. When I have the video on my computer it plays smoothly.
What can I do to make sure my videos play smoothly?
You can see the choppy video at http://tendermercyclub.com/video.html.
The video is also choppy when downloaded to my hard drive, which leads me to believe it's a problem with the encoding. The framerate of the video is set at 20 and the bitrate is 64kb/s. This is pretty low for that size of video. I'd use 24 framerate at least, as per standard, but mainly I'd boost the bitrate to about at least 250kb/s, and see what difference it makes.
Related
Because I dislike Youtube and Vimeo is too expensive, I chose to upload my videos directly to the server at my web host and embed the videos on my site using the HTML5 tag (see photos for the code). The videos play fine on all browsers except for Firefox and I can't figure out why. https://memoriaelinguagrumentina.org/english/saponareseCuisine.html
I've seen several other posts on here asking about very similar problems; however, nearly all are at least 8 years old. I've gone through them as part of my troubleshooting process, but without any luck.
I've seen it recommended here to use multiple video formats (.mp4 AND .ogv) because there is no universal format supported by all browsers. Firefox did not always support mp4, but I believe it does now. So I don't believe this is the root of the problem.
I checked with my web host to see if they have the correct MIME types (see photo).
I cleared the cache on my browser, set the privacy settings to normal, and checked hardware acceleration.
What am I missing?
*note: To save disk space, I'd like to not have to upload duplicate videos in different video formats to the server, ideally. Since Firefox now claims to support mp4, I was hoping to get away with using only mp4.
Firefox doesn't support all video files. They generally support MP3, WebM, Ogg, and Wave containers, and if you are using an MP4 container then it usually depends on the platform decoders for AAC and H.264 audio and video streams. The video encoder format that you are using isn't supported by firefox. You should use supported encoders for your video.
You can find more information here:
https://support.mozilla.org/en-US/kb/html5-audio-and-video-firefox
Your MP4 videos are using H.265 video codec.
You need to have them encoded as H.264 to work in most browsers.
Solution: This means you must re-save your videos as a new format.
The problem is not just Firefox, even Windows Chrome does not play H.265 encoded video.
Things to fix:
Re-encode as H.264 (use High or Main profile for better compression-vs-quality output).
Re-size your videos (when doing re-encode). 720p should be okay for demos/intros. You don't need a large 3840 x 2160 pixels video showing inside a small 672 x 398 pixels box.
Your file size is not good. 286 mb is too much data loading for just a mere 6 minute video.
I have an MP4 video that is variable bitrate, so the average bitrate doesn't necessarily stay consistent throughout the entire file. Because my video is a capture of a computer screen, some parts of the video are very low bitrate because nothing is happening, and other parts are a much higher bitrate because there's a lot of activity on the screen.
How does Chrome decide how much video to buffer for progressive download HTTP(S) videos? I'm running into a problem where Chrome tends to buffer too little, so playback stutters.
If there's no way of convincing Chrome to download a certain time of video (and I don't want to just preload the entire thing), can I author the MP4 some special way to solve the problem? I'm using FFmpeg and MP4Box. Maybe it's up to the HTTP server?
If you want more control over the playback of the video, you should definitely check out MediaSourceExtensions. They define a whole model for video playback, defining sourceBuffers where you can put video data, etc.
Beware it is not a simple to use API still, and the information on how to use it is very fragmented.
In your case, if you go the MSE route, you can either keep using h264 (which is probably the codec your mp4 is wrapping) or switch to webm.
In case of going the MP4, h264 route, you'll need to generate a fragmented MP4 (fMP4) and write some JavaScript to control the way you work with the MP4 fragments (segments in MSE parlance).
MP4Box has support for the -dash protocol, which will segment an MP4 in a way that is suitable for consumption via MSE. FFmpeg also has support for generating fragmented MP4.
I have a a little bit complex website mechanism for loading video,
and I have tested it in several ways,
First I have these 2 videos
the first one is a very light video with only 20seconds duration and is not HD I think and it is even less than 1MB
the second one is a video clip that runs like 4 minutes and I think it is HD and the memories are like 90MB,
Both are in mp4 format
I have both of the videos in the server,
I tried to run those videos both in IE11 and Google Chrome by streaming them from the server with "video" tag in HTML5 and both of them runs very smooth (one video at a time)
Next, I tried to save the video in a client-side storage using IndexedDB so that in the future, the browser does not have to stream it anymore,
those videos are saved as blob and then stored inside the IndexedDB (except in the Google Chrome I have to save those videos or any files as ArrayBuffer as Chrome does not support the blob inside the indexedDB just yet),
When I load the video from the indexedDB, I convert the blob to an objectURL using createObjectURL() and play them in the video source, (for Google Chrome I have to load the arrayBuffer and then convert them first to blob)
While in IE11 both videos are running fine as usual,
but in Chrome I can only play the first video (the light one), as for the second video, it never played on Chrome! I have no idea how can this happen as the 2nd video plays well if it is streamed.
Here is the properties of both videos:
On the left is video with 89MB and the right is 300KB
Can anyone tell me what I am doing wrong here? or is it just not supported in Chrome for HD?
I'm working on a webiste for a client that, when finished, will have about 20 videos in the gallery section. I've already converted the videos tp mp4, ogg, and webm video types but I was wondering what is a reasonable file size for these different formats. I checked out this question "What is a reasonable file size for a 4 minute video on the web?" but I'm still not satisfied.
To convert I had .mov files. I opened them up in Windows Movie Maker, cut, mute, and took a snapshot of them. I then saved them all as .mp4s. Then I used Miro Video Converter to convert them all again to .mp4 which brought down the size a bit. I then converted the new mp4s to .ogg and webm.
Now, I ended up with final cuts like this:
mp4 files range from about 3MB to 30MB
ogg files are a little more sporadic. most of them range 10MB-30MB but then i have several that are around 70MB for some reason
webm files give me some concern. they came out to be about 2MB-10MB with some great quality. I almost feel like it's too good to be true...
Should I be worried about these file sizes? I did some calclations based on my internet speed which is 40Mbps. at that rate it should take about 11.6s to load a 70MB videos which is my largest video. Is this too long? I kinda feel like it is. Will the user be able to start playing the video before it loads. I'm going to be using HTML5 video tag with flash fallback by the way.
Oh, I forgot to mention. None of these videos are longer than 45 seconds. That's another thing. are the file sizes too big for how long the videos are?
To me the sizes you have mentioned seem ok, but you do have a lot of videos on the one page. You could inform the browser that you don't want the videos to be downloaded unless the user actually chooses to play them by using setting the preload attribute to "none" on the video tag.
If the videos are in a certain order, e.g. the most popular are at the beginning, then you could set preload="meta" on those ones, which tells that browser that you would like them to download the metadata only, so they might start to play quicker.
In my website there is video uploading facility. When User uploads video , My code convert the video format from (mp4,wmv,3gp,avi) to .flv format after compressing video size.
on desktop format, everything is working fine. But on mobile browser I haven't get an good player for playing .flv files in all browsers. Can somebody will help me to find a free .flv player support all mobile browser. I hjave searched on google and doesn't find any thing useful . I have tried with html5 player, but it doesn't work for .flv files. I also tried with object player, which is not running in mobile browser.
Another one thing, downloadig .flv video wll be played in mobile or not?
A mobile device will want to play an MP4 file. It won't know how to play a FLV file (unless the FLV file is really an MP4 file in disguise, which happens sometimes). The solution is for your website to transcode to MP4, not to FLV. If you have a desktop website solution that already plays FLV files, it's probably Flash-based, and it should be able to play MP4 files just as well.