Does anyone know how to add interactivity into html5?

HTML & CSS
1

I am converting some videos from Flash to html5/video and they contain interactivity in them. What is the best way possible to embed this interactive component into my newly converted videos?

Any and all help/suggestions would be wonderful!

2

IF you are going to use that giant train wreck of incompatible garbage from a specification not even out of draft, you should also NOT be using set_timeout or the system timer to synchronize scripting to the video since the two can very easily be thrown out of sync the moment there is buffering involved, or changing the time index with the player you’ll end up having to write in javascript as well.

The appropriate thing to be syncing to is the .currentTime property on the player element.

For example, if your markup was:


<video controls id="myVid">  
  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">  
  Your browser does not support the <code>video</code> element.  
</video>

you’d be using this in the script to figure out the current playback position:


myVid=document.getElementById('myVid');
timeIndex=myVid.currentTime();

Though that code should probably be put in a function that is only called when the “timeupdate” event fires for that object.

NOT that I can understand why you’d be wasting your time on a specification not even out of draft, that undoes ALL the progress STRICT gave us of making simpler markup, and has little to no consistent cross-browser codec support… Do yourself a huge favor, and stick with flash.

But that just goes with my total distaste for HTML5 as a whole.

3

http://www.w3schools.com/jsref/met_win_settimeout.asp seems to say the third argument is the language in which the first argument is to be interpreted as, assuming the first argument is a string. From my testing Opera, Chrome and Firefox ignore the third argument in that case and just interprets the first argument as javascript when it’s a string. I don’t know what IE does, though.

4

huh, in the JS live thread it was brought up because of a change in arguments. That currently you can have a third arg but a script or something is expected, and someone was trying to use “this” as the last arg instead.

It didn’t make a whole lot of sense to me, but if it’s pretty much the same then I guess it’s moot : )

5

The third and subsequent arguments get passed as arguments to the function in the first argument.
http://software.hixie.ch/utilities/js/live-dom-viewer/saved/512

6

The Timers section in HTML5 just retro-specs the defacto setInterval, clearInterval, setTimeout and clearTimeout. Nothing new and fancy there.

7

You can overlay stuff on top of the video. To sync it with the video, poll currentTime in a setInterval.

8

I don’t think there is any option in HTML5 to add interactivity, as basic purpose of HTML is to handle markup of page and interactivity is always handled by JavaScript.

In my knowledge there is no possible way to add interactivity to videos using JavaScript, however i assume JS experts on the forum can help you if you elaborate what kind of interactivity you want.

9

Hey Simon, someone mentioned new specs for stuff like setInterval over in the JSLive section… have any browsers taken that up?
(section 12.4 Timers)