5 ms·

Building Interactive HTML5 Videos

74 points by rnyman 12y ago

lukasm 12y ago
It's kind of sad that web in some areas is catching up with... windows 95. I'm building simple web-based tool for editing or replacing music in a movie. Simple player for preview the video with new music is really complicated. You have to build all processing infrastructure to convert avi, mpg etc. to, say, webm. Other option would be to leverage youtube for converting, but it's against terms of service.
- GhotiFish 12y ago
  I don't remember some of the features being described here present in windows 95 video players... but OK. Though, your comment is a bit at odds with the article. it's about client side viewing, not server side processing.
  - lukasm 12y ago
    I have to do server side processing to be able to view it on the client side
    - GhotiFish 12y ago
      wouldn't you have to do that with most of the older solutions as well? flv, mp4, quicktime, ect ect ect. These are not development formats. Well... actually I have seen quicktime being used in the effects industry from time to time, though you wouldn't actually serve quicktime videos with those settings.
      - lukasm 12y ago
        Not really. Desktop players like VLC and play most stuff that you throw at it. Web solutions only supports webm well.
- bluedino 12y ago
  And we did everything 10 years after that (and 10 years before now) in Flash/Java. In ten more years we'll be doing it again with another abstraction layer.
- sp332 12y ago
  Win95 apps didn't run on all computers, tablets, phones, etc. Today, using standard APIs, you can write this code once and have it run everywhere.
fndrplayer13 12y ago
This doesnt seem to work for me in Chrome 36.0.1985.143! But I opened up FireFox and it looks really cool. I love the search ability. That could be awesome for video tutorials. "Ok I already know how to do X, Y, Z, but I want to jump to Step C"
- daveslash 12y ago
  Works for me in Chrome 36.0.1985.143. Does NOT work in IE 11.0.9600.17207, even though the <track> tag seems to be supported http://caniuse.com/#search=track http://caniuse.com/#search=track I'm also having trouble in FireFox 28.0, but that seems to be an SSL issue being caused by my Fiddler install. UPDATE: I've hacked at their demo and replaced the search button with some jquery that executes the search on every keypress - works really well. I've already applied it to one of the software-engineer training videos here at my office.
  - daveslash 12y ago
    UPDATE: Looks like it not working is Mozilla's mistake, not your browser's. Using fiddler shows that the mime type Mozilla is using is binary/octet-stream, but it looks like the correct mime-type should be text/vtt. This is documented on Mozilla's page at https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_T... Also look at http://dev.w3.org/html5/webvtt/#refsRFC3629 http://dev.w3.org/html5/webvtt/#refsRFC3629 and search "mime"
- maho 12y ago
  For me it doesn't work in Firefox 24 ESR, but it does work in Chrome.
jbarrow 12y ago
Extending HTML5 video is actually really interesting. For an old project I wrote a subtitle player for HTML5 videos as a plugin. [1] You pass in a standard SRT file and it automatically parses out the times and changes the subtitle text. [1] https://github.com/Accentivize/srt-player https://github.com/Accentivize/srt-player

74 points by rnyman 12y ago

It's kind of sad that web in some areas is catching up with... windows 95. I'm building simple web-based tool for editing or replacing music in a movie. Simple player for preview the video with new music is really complicated. You have to build all processing infrastructure to convert avi, mpg etc. to, say, webm. Other option would be to leverage youtube for converting, but it's against terms of service.

GhotiFish 12y ago
I don't remember some of the features being described here present in windows 95 video players... but OK. Though, your comment is a bit at odds with the article. it's about client side viewing, not server side processing.
- lukasm 12y ago
  I have to do server side processing to be able to view it on the client side
  - GhotiFish 12y ago
    wouldn't you have to do that with most of the older solutions as well? flv, mp4, quicktime, ect ect ect. These are not development formats. Well... actually I have seen quicktime being used in the effects industry from time to time, though you wouldn't actually serve quicktime videos with those settings.
    - lukasm 12y ago
      Not really. Desktop players like VLC and play most stuff that you throw at it. Web solutions only supports webm well.
bluedino 12y ago
And we did everything 10 years after that (and 10 years before now) in Flash/Java. In ten more years we'll be doing it again with another abstraction layer.
sp332 12y ago
Win95 apps didn't run on all computers, tablets, phones, etc. Today, using standard APIs, you can write this code once and have it run everywhere.

fndrplayer13 12y ago

This doesnt seem to work for me in Chrome 36.0.1985.143! But I opened up FireFox and it looks really cool. I love the search ability. That could be awesome for video tutorials. "Ok I already know how to do X, Y, Z, but I want to jump to Step C"

daveslash 12y ago
Works for me in Chrome 36.0.1985.143. Does NOT work in IE 11.0.9600.17207, even though the <track> tag seems to be supported http://caniuse.com/#search=track http://caniuse.com/#search=track I'm also having trouble in FireFox 28.0, but that seems to be an SSL issue being caused by my Fiddler install. UPDATE: I've hacked at their demo and replaced the search button with some jquery that executes the search on every keypress - works really well. I've already applied it to one of the software-engineer training videos here at my office.
- daveslash 12y ago
  UPDATE: Looks like it not working is Mozilla's mistake, not your browser's. Using fiddler shows that the mime type Mozilla is using is binary/octet-stream, but it looks like the correct mime-type should be text/vtt. This is documented on Mozilla's page at https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_T... Also look at http://dev.w3.org/html5/webvtt/#refsRFC3629 http://dev.w3.org/html5/webvtt/#refsRFC3629 and search "mime"
maho 12y ago
For me it doesn't work in Firefox 24 ESR, but it does work in Chrome.

jbarrow 12y ago

Extending HTML5 video is actually really interesting. For an old project I wrote a subtitle player for HTML5 videos as a plugin. [1] You pass in a standard SRT file and it automatically parses out the times and changes the subtitle text. [1] https://github.com/Accentivize/srt-player https://github.com/Accentivize/srt-player