I have multiple HTML5 videos on a webpage I am creating. They autoplay and loop like gifs.
However, the page barely loads with the 6 or so 15 sec videos. Is there a way to optimize these videos so that the page loads them and itself faster?
EDIT:
Most Buzzfeed pages have dozens of video "gifs" on one page and they load fine. I'm wondering how I can do this? Currently the browser becomes overloaded.
Most devices have optimised hardware and software to play videos, to reduce CPU and preserve battery life for example.
Once you ask the device to play multiple videos at the same time you start to overload any optimal paths and playback may fall back to software to do all the heavy lifting.
One way round this, if your particular application will work with the approach, is to combine the videos on the server side into a single video.
You can still make this look like separate videos, by hiding the main controls and adding overlays with individual buttons over the relevant area.
If this does not work for you, then making the videos as low bandwidth and as short as possible will help. If you can avoid autoplaying this will obviously make a big difference also.
As a note, Buzzfeed does have multiple videos on a page but they do not auto play when I look at their pages, which means all they have to download and display is the thumbnail (maybe we are looking at different pages - if you have an example page that autoplays multiple videos, can you give a link?_.
Related
I have videos on my website that are taking very long to load.
I don't think it is my webhost since it also happens on localhost.
Each time there is only 1 video shown to the user, depending which category they chose. (So it is not loading each video always).
The videos that take longer to load are the bigger ones (the biggest one is about 351MB video file)
This is my html code for the video:
<div class='video'><h2>$vidTitle</h2><video width='640' height='360' controls preload='metadata'><source src='$viddir' type='video/mp4'></video></div>
I've also read that it could be that the video indexing could be at the end, could this be the case?
What can I do about this, do I need to use another player thann the default html5 player | do I need to use a cdn?
How can I solve this?
Thanks!
I want to add a gif of an app that I'm working on to the app's website. Previously, I used quicktime to screen record my computer and then used EZGIF to convert the video into a gif. Unfortunetly, in order to get the gif to a reasonable size to embed on my website (~5MB), the quality goes completely down the drain (you can see the bad quality gif on the website now.
To show off enough functionality of the app to make it worth going on the hompepage, the original video that I'm recording is ~45 seconds.
Are there other, better methods for recording / compressing gifs for websites?
A while ago I stumbled across an example of an HTML5 video player with support video in video. In an example use case, the following was demonstrated: a powerpoint presentation video, with an explainer video to accompany it. Unfortunately I can't remember which video player it was.
To illustrate; something like this
The beauty of the player is that it's able to serve multiple sources of video in one view and toggle between different view points (like split screen and switched view).
Like I have illustrated here:
Split screen video
Switched video view
Could anyone help me find out which HTML5 video player it may have been, or maybe how this could be achieved in something like VideoJS?
It looks from your requirements that these are completely separate videos.
If this is the case then one simple approach is to just have two video players.
You can then use your web page layout to place them wherever you need them to start up, and add some simple Javascript scripts, linked to buttons on the page for example, to change the layout to however you want it for that particular button (e.g. one button might be for split screen).
I'd like to know how YouTube plays long-form videos so quickly, with seeking, on mobile.
This is an example video: https://www.youtube.com/watch?v=eyU3bRy2x44
I can load it just fine on mobile within 5-15 seconds and I can even seek through it.
Are they using HLS? Or are they using any other streaming technology? Are they using MP4 with highly optimized MOOV Atoms placed at the front of the files?
I'd like to know because I want to serve up long-form videos on one of my websites, and they take forever to load even if served from a CDN.
Thank you in advance!
Your videos should not really take a long time to load even with 'normal' HTTP streaming if the CDN is doing its job properly.
One possible problem might be the quality/bit rate of your videos - if they are only available in high quality or high bit rate then this will definitely cause a delay in initial playback.
Many (most?) YouTube videos now will support multiple bit rates, which allows the client device select the bit rate that is most appropriate for the current network conditions. This technique is called adaptive bit rate streaming, as you likely are aware given the reference to HLS above.
MPEG DASH, as Aquary mentions, is an adaptive bit rate streaming format. It is designed to be an open standard - Apple's HLS, Microsofts's Smooth streaming and Adobe Dynamic Streaming are the other main adaptive bit rate formats.
For videos that support adaptive bit rate streaming the client will usually start up at a low or medium bit rate to ensure quick start up and then 'step up' to the highest bit rate the network will support once the video is playing. This helps fast startup. When you jump to the middle of a video the same approach is used to 'start' again from the point you have selected.
You can quite often see this if you look closely at a video when it starts up - the playback quality will improve after a short while as the video steps up through the bit rates to higher quality streams.
YouTube uses MPEG-DASH in HTML5 on the devices that are capable of that. This allows seeking through the media and start from the moment which you select.
Traditional progressive download (AKA pseudo-streaming) is not a good option in case of long videos because by default, media players try to download entire video even though you may stop the playback. Seeking is also supported in PD but your video should be prepared for that and your media server needs to be able to process seek requests properly.
If I embed a video demonstrating my application in my home page, will it slow down the page to a considerable amount?
I tried, and checked that it takes almost 1 sec, to load the preview of the video.
And as the video stream will not be downloaded until, the video is clicked, the total video do not have to get downloaded.
Is it recommended to embed a video in the home page? Or should I just keep it in a different page and put a link in the home page.
If you are embedding a flash flv video then yes, it could slow the page load down. This is because the page will need to load the flash plugin in order to get the content size, etc and render the initial frame etc.
Doesn't mean it's a bad thing though. It won't be an extreme slowdown (flash is pretty highly optimised nowadays), so instead evaluate on how it looks rather than performance unless you are trying to eke out every dreg of performance on your page load :)
Here one way you can have your cake and eat it too:
Don't put the flash player on the page that you will load by default....
Put in an image that looks like the player instead (it should be much lighter) .
If / when your user clicks on the player image, load in the flash player and play.
Every object you add to a page can slow down the page's loading time. In general don't include anything if the load time isn't worth the added benefit of having that item.
That being said, you can optimize the page by doing some tricks so that the page renders and THEN the flash video loads. You could pre-generate a thumbnail of the flash player/video and put it on the page in the same place as the video, then on page load use javascript (jquery: $(document).ready()) to create the flash object. This may improve the perceived performance. Even better, you could defer loading the video until the user clicks a button or something.
Everything you embed will slow down the page's initial load.
You have several options: (A) embed the video in its native format (mpeg, avi, etc) or (B) convert it into Flash. A good thing about flash is that it's near universal and highly optimized, so loading the flash plugin takes little time.
The whole video needn't load for the page to finish loading (only the player), so if we're just talking about 1 video, it would make sense to embed it in the page so as to provide a better user experience.
Have a look at both of Mr. Shiny and New's points. They're valid as well.