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!
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 (I tried this but it didn't really help) | do I need to use a cdn?
How can I solve this?
Thanks!
My understanding is that the preload='metadata' attribute in your video element is supposed to prevent the video from loading.
You could try preload='none' to test. I know that works.
As always, a good place to check is MDN web docs:
mdn web docs : The Video Embed element
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?_.
I have videos on my website with duration of almost 2h (=> large file size).
I have managed to convert them to h265 to reduce server load. To further reduce server load I also want the video to only load e.g. the next 10min from the point the user currently is at in the video (and not the entire video). Youtube is doing it this way.
The HTML preload attribute does not have this option. Is there such a feature in ffmpeg (or anywhere else)?
Thanks for a hint
You need to work with "Dynamic Adaptive Streaming over HTTP". It could be implemented via javascript.
I suggest looking into Dash.js github page
Using the same video twice in the same page seems to force an unnecessary media reload.
Compare loading a video to loading an image:
<img src="image.png"/>
<img src="image.png"/>
<video src="video.webm"></video>
<video src="video.webm"></video>
According to the Firefox 5 web console, this loads the image once, but the video twice.
I understand from http://www.w3.org/TR/html5/video.html#dom-media-mediagroup that the spec's authors expected a single reload in both cases ("Multiple media elements referencing the same media resource will share a single network request"), but that is not happening to me.
I have tried to play around with server cache parameters (I'm using vanilla web.py), to no avail, and I suspect that's barking at the wrong tree. Is there anything specific I should be looking at? HTML meta elements?
Note that this is the opposite of common issues with having multiple sources for the same video. Here I am concerned with having multiple video elements with the same source playing side by side (e.g. at different points in time).
I think people are misreading the spec here.
If you look at the example in the spec, they specifically talk about a single resource (file) that contains multiple tracks. The two video elements contain a reference to the same file, but different tracks within that file. The two tracks are then played back in sync by means of a media group.
If you have two video tags that reference the same file with the same track, I would not expect them to play in sync by default. I could imagine that by specifying them in the same media group this might achieve that, and therefore allow both elements to use a single connection with a single stream of requests.
If the two videos are not going to be playing in sync, it is unreasonable to expect the browser to load the two videos across a single request set. Note that this is a request set, a video may generate many requests to a server as a video or media session (think stop, pause and restart) may be significantly longer than a server or client is willing to hold open a single connection.
Imagine if the two elements had different controls. You pause the first video and leave the second video playing. 30 minutes go by, and you restart the first video. The browser is simply not going to have cached what might amount to over a hundred megabytes of content from the server to allow it to play the first video without making a new request to the server.
If you expect two discrete pieces of streaming content to be sent over a single connection using HTTP, then I don't believe that is possible (well, currently implemented). That would be multiplexing, and last I checked, HTTP servers don't have any support for multiplexing. Note that this is different from a keep alive connection where multiple pieces of content are served serially, what multiplexing is describing is multiple pieces of content being served in parallel. The usual way to achieve this is simply to have two sockets open, which is a lot simpler for both client and server to deal with than trying to demux a single stream.
If you check the size of the downloaded video, are they both downloading the full video?
In my tests, most browsers download a small chunk (enough to display the thumb) and then the full video when needed - so I'm wondering if you are counting that as two full downloads, when it is actually only one full download and one partial.
I did some tests in June with the help of Bruce Lawson and we discovered that some browsers perform even more loads than the two I've described above.
HTML 5 Video In Real Life (Tests)
If you are using Html 5, then better you can go with Canvas. It will Load the video once.
This work:
<video id="video" class="videohtml5" width="720" height="500" controls="controls" preload="auto" poster="">
<source src="path(1)" />
<source src="path(2)" />
<source src="path(3)" />
</video>
You could of course put the videos in thumbnails and have them load when someone clicks on them, it might help if you can't find something else.
Sounds like this is a bug in the browser you're using, since it's apparently not adhering to the W3C HTML 5 specification. I would recommend you file a bug report for that browser's devs and test to see how this behavior compares with other browsers.
I think it's because you not enabled webm or mp4 resource caching in your server, can check your request header to see if the cache-control exist.
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.