I have a webpage with multiple tags, such as:
<audio controls="controls" preload="metadata">
<source type="audio/mpeg" src="file1.mp3"></source>
</audio>
Each tag plays a different file, and each mp3 file is fairly long (i.e. they take up to a minute to be fully downloaded).
If I have more than 4 tags, only the first 4 will be displayed in IE9. The other ones will be displayed one by one, each time one of the first 4 audio players has finished loading its audio file.
In fact, clicking on any hyperlink in the page doesn't load the appropriate HTTP resource until one of the audio players stops loading. It seems as though the audio tags set a hard limit on the number of simultaneous HTTP connections. IE9 usually has a much higher limit, so this seems strange.
Other things to note:
the audio files load and play fine by themselves
I don't need to files to be played simultaneously, I just want to have a page that shows multiple audio players for different files
I tried using different values (none | metadata | auto) for the preload attribute. 'none' hides the audio players completely in IE9,
and metadata and auto show the same problem.
this answer mentions that up to 40 players in IE9 should be okay, but I can't get beyond 4?
Any thoughts are appreciated, thanks.
Indeed there are some glitches with IE9 when the preload attribute of audio tag is set to "metadata".
Possible workaround for more responsive behavior will be:
Setting preload = "none"
Wrapping <audio> tag with an image or div with a background image
Attach "click" event to the image/div which will trigger: document.getElementById('audio1').play()
Hope it suits your needs.
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
Normally, if you have two or more HTML5 videos with autoplay set to true, none of them will play automatically. This is so that you don't get a bunch of soundtracks blaring at the same time.
However, if you just use some small, mute looping videos as backgrounds or otherwise decorative elements, this limitation is useless.
Is there a way to force them to play automatically? I really don't want to resort to GIFs. Thank you.
Is it possible to play video online that's made of two or more video files?
Since my original post wasn't clear enough, here's expanded explanation and question.
My site is hosted on Linux/Apache/PHP server. I have video files in FLV/F4V format. I can also convert them to other available formats if necessary. All videos have same aspect ratio and other parameters.
What I want is to build (or use if exist) online video player that plays video composed of multiple video files concatenated together in real-time, i.e. when user clicks to see a video.
For example, visitor comes to my site and sees video titled "Welcome" available to play. When he/she clicks to play that video, I take video files "Opening.f4v", "Welcome.f4v" and "Ending.f4v" and join/merge/concatenate them one after another to create one continuous video on the fly.
Resulting video looks like one video, with no visual clues, lags or even smallest observable delay between video parts. Basically what is done is some form of on-the-fly editing or pre-editing, and user sees the result. This resulting video is not saved on the server, it's just composed and played that way real-time.
Also, if possible, user shouldn't be made to wait for this merging to be over before he/she sees resulting video, but to be able to get first part of the video playing immediately, while merging is done simultaneously.
Is this possible with flash/actionscript, ffmpeg, html5 or some other online technology? I don't need explanation how it's possible, just a nod that it's possible and some links to further investigate.
Also, if one option is to use flash, what are alternatives for making this work when site is visited from iphone/ipad?
An approach that will work on some browsers currently, and on most browsers going forwards is to use the HTML5 Video Media Source Extension mechanism.
This essentially allows you replace a static 'src' file for a video in your HTML5 page, with a dynamic src buffer which you can then fill any way you want using your own Javascript code.
So you can write code to pre-buffer the second video when you get towards the end of the first video and then immediately start adding packets from the second video to the src right after the last packet for the first video.
In very high level terms this looks like:
Your HTML to insert the video where you want it in your page:
.
.
.
<div>
<video id="yourVideo1" controls="" autoplay="" width="320" height="240"></video>
</div>
.
.
.
Your Javascript to provide the source for your video:
//Get the video element
var videoElement = document.getElementById('yourVideo1');
//Create a 'MediaSource' and associate it with this video
var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
//Add a listener to the MediaSource object to check for
//the video been opened. In this function you can add your
//code to get the get your videos from the servers and add
//'chunks' to the media source buffer
mediaSource.addEventListener('sourceopen', function(e) {
//Set the format of the source video
var mediaSourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
//Get your video from the web
while (not the end of your video playlist) {
...
//Stream video from server
...
//Add packets received to the media source bufer
mediaSourceBuffer.appendBuffer(receivedVideoPackets);
//If near end of video start fetching next video to
//avoid buffering delay
...
//If end of video go to next video in playlist
...
}
}, false);
Look at the HTML5 Rocks demo below to see this in action (for a slightly different usecase).
Given how tricky video manipulation is and the multitude of formats etc, it would be much easier for you if one of the established video players provided the functionality out of the box so I would still try their forums as mentioned in the comment, but at least you know it is technically possible.
The MSE spec is available here:
http://w3c.github.io/media-source/
And a good intro blog and demo is here (make sure your browser supports MSE - latest version of Chrome does):
http://updates.html5rocks.com/2011/11/Stream-video-using-the-MediaSource-API
You can find latest browser support here:
http://www.jwplayer.com/html5/mediasource/
Use two video elements, first visible and second display:none for buffering.
After first video playing, check currentPosition and currentDuration,
specify second video preloader prepare visible video player's buffer data.
First video element's SRC could be specified anytime for seamless playing.
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
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.