pouët.net

Go to bottom

HTML5 video and JavaScript. WTF is wrong here?

category: code [glöplog]
 
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?
added on the 2011-01-21 13:48:39 by raer raer
Uhm, and don't try with Safari. It doesn't play .OGV afaik...
added on the 2011-01-21 13:55:19 by raer raer
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
Code: $ wget "ftp://ftp.untergrund.net/users/rarefluid/481_Doomsday_-_Lotto_(Win32).ogv" --2011-01-21 14:15:33-- ftp://ftp.untergrund.net/users/rarefluid/481_Doomsday_-_Lotto_(Win32).ogv => `481_Doomsday_-_Lotto_(Win32).ogv' Resolving ftp.untergrund.net... 89.207.248.35 Connecting to ftp.untergrund.net|89.207.248.35|:21... connected. Logging in as anonymous ... Error in server greeting.
The video check works fine, else none of the videos would have the event listeners... Meaning "hasVideoSupport==true".
added on the 2011-01-21 14:24:45 by raer raer
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...
added on the 2011-01-21 14:28:01 by raer raer
Maybe the videos need to be in the HTML directory and not the FTP dir...
added on the 2011-01-21 14:29:47 by raer raer
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;

added on the 2011-01-21 15:20:11 by Zplex Zplex
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...
added on the 2011-01-21 15:57:21 by raer raer
Quote:
Maybe the videos need to be in the HTML directory and not the FTP dir...


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!
added on the 2011-01-21 16:22:51 by gasman gasman
OGV? Isn't that more or less dead now, unsupported on most browsers and replaced by webm on the others?
added on the 2011-01-21 16:35:50 by psonice psonice
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 :)
added on the 2011-01-21 17:11:23 by psonice psonice
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?
added on the 2011-01-21 17:40:01 by raer raer
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...
added on the 2011-01-21 17:43:31 by raer raer
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.
added on the 2011-01-21 17:50:50 by psonice psonice
At this size (128x96) with quality 5 and 48kbps audio the file size is ~1MB/min. GIFs don't have audio...
added on the 2011-01-21 18:24:26 by raer raer
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...
added on the 2011-01-21 19:13:59 by raer raer
Make sure your webserver return the right MIME type for ythe file. I had streaming problems with OGG Vorbis and nginx.
added on the 2011-01-22 16:34:51 by ponce ponce
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.
added on the 2011-02-05 01:36:58 by Aszazin Aszazin
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..
added on the 2011-02-05 02:13:57 by micksam7 micksam7
Fuckings to Google for trying to force VP8 down our throats :-P
added on the 2011-02-05 06:35:27 by trixter trixter
Why don't you try something like VideoJS?
added on the 2011-02-05 11:49:47 by D.Fox D.Fox

login

Go to top