An HTML5 video with standard tag such as:
<video>
<source src="video/intro.mp4" type="video/mp4"/>
<source src="video/intro.ogv" type="video/ogg"/>
<source src="video/intro.webm" type="video/webm"/>
</video>
Is reportedly playing really badly for some of our users, mostly in browsers like Firefox and IE. It is really choppy, and out of a full 11 second video at 30fps often shows only a few frames. It is worse when you increase the size of your browser window and therefore the size of the video. For some people it improves on the second load, presumably after it has been cached.
We are not playing the video until at 10 seconds out of 11 have been buffered, so it shouldn't be a buffering issue. The file size is about 4mb. I believe it has standard encoding using H.264. The dimensions are 1920x1080.
Is there anything we can do as developers to improve this experience? In all my searching I am only finding suggestions for the end user, such as turning off hardware acceleration. It does seem to be a common problem, with a lot of complaints about quality even on things like Youtube and Vimeo, but it seems crazy to me that there is no code solution?
Thanks!
You will want to ensure that your mp4 file is optimized for best delivery... you'll need to play around with some of the settings but I would recommend making sure the MOOV element is at the start of the file to help the browser get enough metadata quickly. Once you've got a good MP4 experience you can tune the webm/ogv versions the same way
I use ffmpeg to optimize content, usually something along these lines:
./ffmpeg -y -i SourceFile.mp4 -s 1280x720 -c:v libx264 -b 3M -strict -2 -movflags faststart DestFile.mp4
you will want to play with the frame size (-s parameter) and the target bitrate (-b) to get the right balance of size and quality for the speed you need.
have a look at preparing mp4 file for html 5 for a slightly longer answer as well
Related
Folks,
Strange border left 1px (black) on <video> in HTML:
I don't use any CSS border or outline. How to remove border left black?
HTML:
<video id="bgvid" playsinline="" autoplay="" muted="" loop="">
<source src="https://www.glasseson.lt/wp-content/themes/glasseson/videos/cover.mp4" type="video/mp4">
</video>
URL: https://www.glasseson.lt/en/
The line is in the video itself.
Also, please don't have a 26 second video being 70MB in size. That's ridiculous, especially for a cover video. The bitrate was too high for my internet connection (which can play reasonably compressed 1440p video just fine - YouTube, Vimeo etc.) and it will drive your bandwidth through the roof. Aim for 13MB (500KB/second) at most, although less still would be a good idea. It's a fairly simple animation so you may be able to recreate it in HTML5/JavaScript (although the noise might pose an issue).
Note that on mobile the video won't autoplay, regardless of browser or operating system, so you may have to look for an alternative graphic as currently it's just a white space. It's also worth noting that websites should never play sound automatically as it's just unwanted and is generally deemed as some sort of sin.
One last thing - if you didn't select an option when exporting the video to optimise it for the web by placing the moov atom at the start of the file, do so! If I recall correctly, this does away with a couple HTTP requests. It looks like you haven't done that, but I'm not 100% sure. If you can't find such an option in your software, you can use ffmpeg to do so without having to re-encode your video. You can look up how to install it yourself if you like - here's the command (add .exe if using Windows):
ffmpeg -i INPUT.mp4 -movflags faststart -c copy OUTPUT.mp4
Hopefully this answer has been of some help and sorry if I made you feel a bit silly that it was part of the video all along.
If for some reason you are unable to fix the 1px line in the video, you could put the video in a container and work some magic to effectively crop it, although that wouldn't be the best way of going about this.
Currently i'm having a background video for my website. The file is a .mp4 (1920x1080) format which is 25 seconds long (not a big file to be honest).
Here comes the tricky part.. the video runs all well, until I visit the website on a different computer (for example mac, using safari). Suddenly the video gets slown down and pixels can be count.
Effects are used inside of my video and may causes a higher bitrate. But whenever I watch the video on YouTube or whatever, it isn't lagging at all.
Does anyone know what could cause this?
P.S: I tested this on 2 different computers (a MAC book, which is pretty fast) and a slower computer.
Try to insert your video like that with the codec defined :
<video autoplay="true" loop="true"><source src="video/test4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></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.
Im wondering why my mp4 html5 video is not "streaming" and instead waits till it is fully downloaded before it starts playing in safari.
www.pija.se
I have tried QTIndexSwapper but it says the index is in the right position.
Any help appreciated.
looks like the MOOV atom isn't at the beginning of the file.
I used ffmpeg to just relocate that (no other encoding) and then a binary compare (using HexFiend) and a quick test seemed to show that Safari was playing the video sooner
./ffmpeg -i top.mp4 -codec copy -movflags faststart top-fs.mp4
(caveat being that even though I cleared browser cache I didn't do things like bounce my test server or time things too accurately)
FWIW I find ffmpeg to be a good solution, and especially for background video you'll want to play around with parameters to optimize for your use-case
I have the following HTML5 video tag:
<video id="vid" controls="controls" preload="metadata">
<source src="/testvid.m4v" type="video/mp4" />
Your browser does not support the video tag.
</video>
As soon as the video is clicked, Safari begins downloading the entire video file and does not stop until it gets to the end. The video file is 400 MB, so this is a problem due to the cost of the bandwidth.
It does not seem to be a problem with the location of the index in the file, as the app at http://renaun.com/blog/code/qtindexswapper/ says the index is already at the start, and the start of the video is playable immediately even though the rest is still being downloaded.
The source file is in Amazon S3, and so the server supports range requests.
Is there anything I can do? Ideally I would like some sort of sensible buffer, e.g. 20 MB of content ahead of the playhead, or 1 minute, or something like that.
The normal behaviour is that a small portion of the video is downloaded when the page loads (just enough for the browser to display a frame and to get the file headers). When you play the video, the whole video is downloaded while it plays.
In some older versions of browsers, the video downloads again if you use the seek bar.
There is no setting or attribute you can use to change this behaviour.
Source: http://www.stevefenton.co.uk/Content/Blog/Date/201106/Blog/HTML-5-Video-In-Real-Life/
I agree with Sohnee. To lower your bandwith you have two options:
compress your video to a lower quality, or what's your videosize/bitrate ( f.e. h264 with 427x240 800kbps i end up with approx. 5-6mb/min)
think about a playlist (guess southpark.de is doing it like that), cut your movies into several parts and if video is on end, load next one into player. disadvantage: if you use custom controls, they only show infos of current video and not the whole (could be solved if you build your custom controls with special magic).
don't know if it helps, but this would be my two solutions in this case. best K