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
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 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
I'm curious to what the best practice is in regards to embedding youtube videos on a site? Ideally I will want to auto-play a default video with it muted while having other videos available as thumbnails.
Any recommended plugins? Should I use an iframe or an object?
Thank you in advance!
Your question is very broad: it's hard to know how to help you. If you're using WordPress, for instance, you'll have some plugins to help you do this, but otherwise it depends on whether you intend to dynamically generate the videos or manually create a page with the main video and thumbnails chosen by you in advance.
If you intend to program your page, you'll want to use the YouTube Data API (version 3 preferably, which uses JSON to keep payload sizes down).
If you're manually laying the page out, look at the watch page for a YouTube video, and you can get the embed code there. Click 'Share -> Embed' and then you'll see an iframe tag from which you can fiddle with to alter the size parameters to suit your needs.
One thing to note though: if you make a video autoplay on a page, as far as I know you forfeit the opportunity to have the viewcount increase for that video. So if you want to promote one of your own and intend the viewcount to go up each time, you have to allow users to start the video.
The title pretty much says it all. I have a spot on a webpage that currently plays a video. I'd like to update the page such that I can add a line of code with a reference to a couple files located in a folder with the source, and the page will play the first video, then the second, etc. until it reaches the final video, and then play the first video again, looping indefinitely. It's extremely preferable that this line of code would be able to play video files, .swf files, pictures (for a pre-determined length of time), etc.
Currently, I'm just using a very rudimentary
<video width="100%" height="100%">
<embed loop="true" showcontrols="0" align="left" src="New Site Folder\DemoVid_sound_mods.avi"/>
</video>
The problem with this, though, is that it only plays one video, and if I want to add more parts to it, I have to edit the video itself, rather than just popping a new file in the folder.
I saw another question answered that mentioned doing this with javascript, but the whole point of this project is to make it exceptionally easy and quick to update. The main thing I'm looking for here is for us to be able to update the page by opening a file in notepad, adding a line of code, saving, and running it.
Any thoughts? Even just a pointer on what commands might be useful here would be helpful. Thanks in advance!
As far as I know you won't be able to do this with the inbuilt html5 video players native to the browser, It's just not the principle on which they are built.
What you are looking for is more of a media playlist style set of features.
You will have to use one of the javascript based html5 video players to get some of these features but even then I'm not sure of the support for swf and image files I've seen a few which do various videos and audio files but nothing HTML5 which also does swfs also as again, the premise of these players is usually to eradicate flash.
My best suggestion for doing all of these in one single embed is to use flash via the longtail/jw player or flowplayer which handles playlists etc or perhaps slideshowpro which I know does both images, video and I think audio too.
Finally.. harking back a decade or so. theres a Language which is pretty underused and suffers varied support called SMIL which supports all of these elements you mentioned however it's uptake sort of fell apart with the introduction of video in flash. I remember that Realplayer and Quicktime could serve SMIL files but I'd be pretty cautious to do anything in SMIL these days.
Hope that helps.
A
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.