pouët.net

Hi pouet JavaScript experts.

Maybe someone can tell me what is wrong with the HTML5 video attempt on wurstcaptures. I wanted to have .OGV preview videos instead of the preview pictures. After figuring out how HTML5 <video> worked, I slapped something together and tried it in a small page and it worked.

What I wanted is that when you hover over the preview video it shows the control. I wrote a small JavaScript for that. On "window.onload" it does "addEventListener" for every <video> tag it finds.

The problem is that this only works for two of the videos. Which videos are working changes sometimes when the page is re-created or reloaded. Usually it is the first two (Doomsday). The rest of the videos shows up as "not playable" (marked X if you hover).

The videos are all encoded the same way and all play ok on my computer.

Any idea what could be the problem?

Uhm, and don't try with Safari. It doesn't play .OGV afaik...

Never done .js but is notnot possible ? Line 9 if(!!<expression>)

Second Idea check for the filenames in <video source="">

for example ftp://ftp.untergrund.net/users/rarefluid/481_Doomsday_-_Lotto_(Win32).ogv

dunno if js or html can handle '+' '(' ')' and stuff

wget says

The video check works fine, else none of the videos would have the event listeners... Meaning "hasVideoSupport==true".

Btw. In FireBug it looks like the event listeners ARE actually added, because I can see the "controls" property of the video tags change when I hover.
Must be some problem with the video source links then...

Maybe the videos need to be in the HTML directory and not the FTP dir...

Each video element takes time to initialize, only a few gets initialized before u do the checkVideoSupport(), hence only the first loaded gets the player interface.

Try jQuery and
$(document).ready(function()
{
setupVideo;
}

instead of window.onload = setupVideo;

Don't think that's the case as "checkVideoSupport" creates its own element AND hasVideoSupport is actually true.
But it could be that not all elements are initialized before the "addEventListener" calls...

I think so, yes. I've found HTML5 video to be very picky about where it's being served from, particularly on Safari (desktop and iOS) which requires the server to understand 'partial content' HTTP requests (rather annoying if you're developing in something like Django or Rails which has a 'toy' webserver built in). I'm surprised you're getting any results at all from FTP, to be honest!

OGV? Isn't that more or less dead now, unsupported on most browsers and replaced by webm on the others?

psonice: I chose the one that looked supported by most of the browsers

Ah, more than I thought actually. But for how long? Theora is the worst of the codecs for quality/bitrate, h264 is widely supported by the biggest sites, and webm seems to have all the advantages of theora with fewer downsides.

Maybe I'm wrong there, but I just got the impression that theora was pretty much forgotten about now :)

Sure h264 is better, and Google chose WebM, but Theora/Vorbis is not so bad and actually works in most browsers. That's what I care about atm...
For me it's all about transcoding a bunch of files in a batch script and re-uploading anyway...

Tried some stuff now:
- Moved some files to a subdirectory on the webserver and using them as video "src": No Go
- Used jQuery-functions to determine if document ready: No Go
- Used document.readyState: No Go

Gasman: I suspect it is the problem you describe. I only have what I've been given by untergrund.net though ;) So what would you propose? Re-set the "src" value of every <video> tag after the document has load till video.error==null?

On a sidenote: The PHP script actually CHECKS to see if the OGV videos are there and only adds video tags when a preview video can be found on the FTP. So where there are video tags, there are videos. You can see this, as on the bottom of the page (starting with "TBL - Contour") there are not OGVs and thus no video tags...

Oh, just saw where you're using them. Interesting! Is it better compression than anim-gif? Quality will surely be better, compression probably will be, apart from lack of support everywhere this is a good idea I think.

At this size (128x96) with quality 5 and 48kbps audio the file size is ~1MB/min. GIFs don't have audio...

I think I've found a possible answer. The FTP only support the download of two simultaneous downloads per user. The page makes much more attempts in parallel when it's loaded...

Make sure your webserver return the right MIME type for ythe file. I had streaming problems with OGG Vorbis and nginx.

I've got a similar problem, the same html5-code with video tag use, but one points to files on a http server, the other on a ftp server.

Firefox4 plays when the files on the ftp are used, but not when the files on the http are used,

Chrome8 & Opera11 work when the files are on http, but fail when they are on ftp. (opera even crashes on the ftp way)

WebM is a good codec, but slow encoding, theora gives a lot of artifacts for the same filesize compared to WebM I experienced...
h264 is what I use for full-quality versions to download.

Browsers don't tend to like FTP for html5 video. Also, yes, there's a session limit on untergrund's ftp that kills off after few transfers anyway.

For HTTP, make sure the MIME type is set right. For theora / ogv, it's video/ogg

I suggest using both theora and h.264 for maxium reach, as well as a static image. For selecting between browsers, no JS is really required, just careful construction of the video tag. Feel free to borrow what I do for capped.tv:

<video autoplay loop width="160" height="90" poster="[static thumbnail here]">
<source src="[mp4 video here]" type='video/mp4; codecs="avc1.42E01E"' />
<source src="[theora video here]" type='video/ogg; codecs="theora"' />
<img class="thumb" src="[static thumbnail here]" width="160" height="90" />
</video>

Source 1 has to be mp4 for safari to be happy. All other browsers [ff, chrome, opera] use the theora source. IE and etc will use the image tag. Browsers that don't support any format -should- just use the poster attribute in the video tag..

Fuckings to Google for trying to force VP8 down our throats :-P

Why don't you try something like VideoJS?